DEV Community

Cover image for Navigating the JS TS Limbo
Slobi
Slobi

Posted on • Updated on

Navigating the JS TS Limbo

When working with a valuable JavaScript library, transitioning it entirely to TypeScript might not be optimal solution. However, what if you could embrace the best of both worlds?

In this post, we look into a middle-ground solution that seamlessly combines JavaScript and TypeScript, offering the advantages of both while mitigating the need for maintaining separate code-bases.

By incorporating TypeScript declaration files (.d.ts) alongside your JavaScript library, you can ensure the transparency of your code-base. This empowers developers to seamlessly switch between JavaScript and TypeScript projects without losing touch with the core logic.

Take, for example, an Entity-Component System (ECS) within library. In TypeScript, you might have used the following code to retrieve components of the right type:

var components = entityManager.get(MyComponent, entity)
                     as MyComponent[]
Enter fullscreen mode Exit fullscreen mode

With the added .d.ts file:

declare class EntityManager {
    create(): Entity;
    assign(component: any, e: Entity): void;
    get<T>(c_type: new (...args: any) => T, e: Entity): T[];
    getEntities(c_type: any): Entity[];
}
Enter fullscreen mode Exit fullscreen mode

Now, in TypeScript, you can enjoy a cleaner, more type-safe approach, without end programmer assuming type:

var components = entityManager.get(MyComponent, entity)
Enter fullscreen mode Exit fullscreen mode

This approach ensures that your library remains accessible to both JavaScript and TypeScript projects. It can be a lifesaver when dealing with legacy systems or when the simplicity of JavaScript is the more fitting choice.

Furthermore, this method avoids managing two distinct versions of your library for JavaScript and TypeScript. Changes and bug fixes need only be applied once in the core code, significantly saving time and effort.

However, one minor inconvenience is that when exploring your library in a TypeScript project, clicking on a function may direct you to the declaration file (.d.ts) instead of the actual source code, potentially hindering developers seeking in-depth insights.

It's worth noting that the usage of JavaScript and TypeScript in a single project could potentially bug developers who are not accustomed to this particular setup.

In conclusion, the decision to employ JavaScript and TypeScript in tandem with declaration files is a pragmatic approach, offering the advantages of both worlds. This middle-ground strategy ensures that library remains a valuable asset in the diverse landscape of software development.

Links:
d.ts
lib
tests

Top comments (0)