Mid-week scoop - where do you look for types for third party libraries on NPM?
In this week's mid-week scoop, I explain to developers where to look for types when consuming third-party libraries in Typescript.
Hey, Wycliffe here, and welcome to this week’s mid-week scoop.
Every week, either Wednesday or Thursday, I will do a more compact scoop on different Typescript-related topics and practices to help you understand Typescript even better.
I also send out deep dives content every Monday, where I cover more complex concepts such as how to Overload Functions in Typescript.
Please consider subscribing to this free newsletter if you haven’t, and share it with friends if you already have.
Thank you.
One thing I usually love doing when looking for NPM packages to use is to try and figure out if it’s written in Typescript or not. Why? Because it can be excruciating using a third-party dependency without the benefits of type declarations for the libraries - type safety, easy to look up documentation for code, and auto-completion (IntelliSense) in your favorite editor.
I do this because most Javascript libraries written in Typescript will usually ship with their declaration files. Code editors will automatically pick this for autocompletion/IntelliSense while Typescript and Linters for type checking and linting. Once you have installed the npm package, you don’t have to do anything extra concerning the library types.
What if it’s written in plain Javascript? Libraries written in plain Javascript can still ship their types if the maintainers want, but it’s not very common to see that, so in this case, the next place to look for types is DefinetlyTyped.
Please note: it also possible to find a library written in Typescript, that doesn’t ship with it’s type declarations.
The DefinitelyTyped Project
DefintelyTyped is a community-driven project for a central place where types for popular javascript libraries can be found. The community (not necessarily the authors) contributes to the type declaration for libraries which are then made available to everyone via NPM. Everything is scoped under the @types name, and if you, for instance, were interested in express types, you would install @types/express with the name of the library being the package name. Once you have installed the above express types, Typescript will pick them up automatically to type-check your code.
Please Note: The Typescript language service is usually clever enough to determine that an npm package you are using doesn’t have any declaration files shipped. It will usually suggest that you install the types from DefinitelyTyped if available.
Unlike types that ship with libraries, DefinetlyTyped types are shipped independently of the libraries they provided types for. This means you need to be aware of this and ensure that you have type compatibility between the installed version of the library and its types from definitely typed. If you are not careful, you might end up in a situation where your code type-checks correctly, but there are bugs at runtime since the source of the types you have is not for the version of the library you have installed.
Defining your types for Libraries
Suppose you can’t find the types for a library you are using in the DefinitelyTyped project. This happens when a project doesn’t have a lot of users; hence not enough people to contribute to the type declaration for the package.
In that case, you might consider creating type declarations for the library you are consuming locally. If you find yourself in this situation, please contribute; someone else will appreciate it and help improve your work so that we can all benefit.
You can achieve this by creating your ambient declaration files within your project. These files have an extension .d.ts and are a way of informing the typescript compiler that something library exists at runtime or some library has certain types.
This is going to be the topic I am going to explore next week on Monday. Please subscribe not to miss out.
And that’s it from me, I hope you enjoyed ❤️ this issue as much as I did writing it, and I hope you have a fantastic week ahead.
Please consider doing one of the following things if you love this issue.
1. Share it ❤️ - Help me spread word of mouth and help All Things Typescript grow:
2. ✉️ Subscribe to this newsletter. You will receive weekly content like this from All Things Typescript that will help you learn and master Typescript.
3. Consider Sponsoring me on GitHub ❤️; you will be helping me create more free content for the benefit of everyone.
Au revoir 👋🏿.