How to create type definitions

How to create type definitions

Help developer with autocomplete and signature methods in typescript.

If there is one thing I have to admit, it is that Typescript allows us to feel in control in javascript and that is also thanks to the typings (tsd), but some libraries don't have the typings, I have found myself in need of writing the typings of the rdjs library.

Creating the typings

To create our library typings, we have to have our library installed by npm, and inside our project, we create a directory called typings and inside another with the name of the library we want, in my case rdjs

typings/index.d.ts typings/rdjs/index.dt.ts

Typescript interprets the * .d.ts files as declaration files, and these describe the library's methods without their implementation.

In the typings directory, we have a .d.ts index that will contain a reference to each of our declaration files.

In this case, typings/index.d.ts will contain a reference to the rdjs/index.d.ts file.

/// <reference path="rdjs/index.d.ts" />

Defining the typings

I will make all the definitions of typings I will make in typings/rdjs/index.d.ts. We must create an ambient module that is type declarations that do not define anything of what the code does but define its form.

We declare a module with the same name as the npm module, in my case, rdjs.

declare module 'rdjs'{

}

Then we define an interface with the methods and their signature that we want it to use. In this case, I have put the different techniques that expose get, post put, and delete.

interface rdjs {
get(url: string, params: any, headers: { key: string; value: any; }\[\]): Promise<any>
post(url: string, params: any, headers: { key: string; value: any; }\[\]): Promise<any>
put(url: string, params: any, headers: { key: string; value: any; }\[\]): Promise<any>
delete(url: string, params: any, headers: { key: string; value: any; }\[\]): Promise<any>
}

We export the object rdjs as an object. Our module will export a const variable implementing the interface that contains our specifications.

const rdjs: rdjs
export = rdjs

Now we have the methods that I will use in my application. I can see how visual studio code autocompletes me, specifies the signature that that method needs and its parameters, and the compiler alerts me that I am not sending the expected type.

declare module 'rdjs'{

rdjs interface {
get(url: string, params: any, headers: { key: string; value: any; }\[\]): Promise<any>
post(url: string, params: any, headers: { key: string; value: any; }\[\]): Promise<any>
put(url: string, params: any, headers: { key: string; value: any; }\[\]): Promise<any>
delete(url: string, params: any, headers: { key: string; value: any; }\[\]): Promise<any>
}
const rdjs: rdjs
export = rdjs
}

Now we have the IDE that can autocomplete and show the signature of the methods or visually alert us that we are not passing the parameters specified in the interface. Also, the compiler warns us that I am not sending the expected parameters.

scroller.ts(22,9): error TS2346: Supplied parameters do not match any signature of call target.

Happy Typings.

Photo by Romain Vignes on Unsplash