Adding Custom Type Definitions to a Third-Party Library

Karen Ford

Posts by Karen Ford

If you’re like me, you may not always want to write your own code for every little thing, and you may choose to add a third party library into your React/Angular/other-js-framework app. If you’ve done this, you may quickly find out that if you are using TypeScript with your app, there are a lot of libraries out there that do not have their own typings.

You may have first encountered this problem when you received this error message:

Could not find a declaration file for module ‘third-party-library-name’. ‘third-party-library-name.js’ implicitly has an ‘any’ type.
Try npm install @types/third-party-library-name if it exists or add a new declaration (.d.ts) file containing declare module 'third-party-library-name';

Don’t panic! But what should you do in this situation? First, I should point out that you will only see this message if you have noImplicitAny in your tsconfig file set to true. You could get around this by setting that to false. However, I personally find that rule to be helpful in development, so this article assumes this rule stays set to true. Additionally, this article assumes you are using TypeScript 2.x.

Next, and what this error message is suggesting as well, is to check DefinitelyTyped (indicated above by the @types/third-party-component part of the message). It is as easy as the suggested message states. Try installing it via npm or yarn. However, if it is one of the many libraries out there that doesn’t have any public typings, then that will do nothing.

The following steps detail how to satisfy that error message correctly:

1. Edit your tsconfig file to use the typeRoots property. You should include both the node_modules/@types directory, as well as your custom directory:

{
     "compilerOptions": {
         ...
         "typeRoots": [ "./types", "./node_modules/@types"]
      }
}

This means that your project will first check your “types” folder before searching in node_modules/@types. Note that this directory should be at the root of your project!

2. Add that root folder to the exclude property in the tsconfig file as well, so it will not get compiled:

{
      "compilerOptions": {},
      "exclude": ["node_modules", "typings", ...]
}

3. Add a folder for your third-party library in your types directory:

types/third-party-library-name

4. Add an index.d.ts file with your typings into that folder:

types/third-party-library-name/index.d.ts

5. Add your type definition. Or, if you are just trying to quickly prototype, you can add one like this:

declare module 'third-party-library-name'

Additionally, if you simply want to make the error go away, do not want to write out a full custom type definition, and prefer the shorter declare module 'library-name', approach, then you could also bypass the above instructions and simply make a file at the project root named global.d.ts and list your declare module 'x' statements all in that one file.

If you choose to write a complete and robust type file, this is a great article about how to do that, as well as DefinitelyTyped and TypeScript.

Happy Typing!