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!

Karen is a front-end web developer at Detroit Labs who has a passion for creating beautiful, user-friendly, well-coded digital experiences, whether it be websites, applications, or any other digital medium. She’s been in the industry for 10+ years working with major brands and building award-winning websites. When not coding, she enjoys baking delicious cupcakes, playing violin, and hanging out with her adorable 1.5 year old daughter, husband, and dog.

Looking for work?

If you’re looking for work as a React Dev, sign up for our Career Lab. It’ll be us and our (secret) client as they look to build their team using our practical approach to interviewing. You’ll work through hands-on exercises designed to showcase your skills in a comfortable and collaborative environment.

Basically an interview without the pressure of an interview.