DEV Community

Cover image for How to create your own typings ?
Dany Paredes
Dany Paredes

Posted on • Updated on • Originally published at danywalls.com

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" />
Enter fullscreen mode Exit fullscreen mode

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'{

}
Enter fullscreen mode Exit fullscreen mode

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>
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

Happy Typings.

Photo by Romain Vignes on Unsplash

Top comments (0)