How to create your own typings ?

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 methods that the library exposes without the implementation of them.

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

All the definitions of the typings I will make in typings/rdjs/index.d.ts, the first thing we must do is to create an ambient module which are type declarations that do not define anything of what the code really does, but simply defines 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 methods that exposes 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 make an export of the object rdjs is 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 and 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 our IDE can autocomplete and also show the signature of the methods or visually alert us that we are not passing the parameters specified in the interface and also, the compiler alerts 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.

Leave a Reply

Your email address will not be published. Required fields are marked *