When you develop an app you often use some third-party packages as dependencies. Not all of them are written in TypeScript, but many provide 

 for a developer to be able to include those in a project.

The biggest repository with type declarations is 

. It contains type declarations for packages like React, Redux, Mobx, and many others.

 files in them. These files contain type declarations. If your dependency package has it, you won't need to install types manually.

 file and is written in plain JavaScript, you might need to find type declarations yourself.

 package. You installed the package itself and try to import it in a React + TS project:

import { Transition } from 'react-transition-group';

IDE will show an error that the project can't be compiled:

A package may recommend installing types from a DefinitelyTyped or another repository in its documentation.

If so, run all the commands recommended in docs.

Otherwise, try to install types from DefinitelyTyped manually. In the case of 

npm install @types/react-transition-group
# or
yarn add @types/react-transition-group

Usually, type declaration name consists of the 

 prefix and the package name after it. (In some rare cases you may want to google the name first.)

When types are installed IDE should hide the error and compile the project.

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How to Install Types for Packages</h1><p>When you develop an app you often use some third-party packages as dependencies. Not all of them are written in TypeScript, but many provide <a href="https://www.typescriptlang.org/docs/handbook/2/type-declarations.html" rel="noopener noreferrer nofollow">type declarations</a> for a developer to be able to include those in a project.</p><p>The biggest repository with type declarations is <a href="https://github.com/DefinitelyTyped/DefinitelyTyped" rel="noopener noreferrer nofollow">DefinitelyTyped</a>. It contains type declarations for packages like React, Redux, Mobx, and many others.</p><h2><a name="when-you-need-to-install-types" id="when-you-need-to-install-types">When You Need to Install Types</a></h2><p>Some packages already have <code>.d.ts</code> files in them. These files contain type declarations. If your dependency package has it, you won't need to install types manually.</p><p>If a package doesn't have <code>.d.ts</code> file and is written in plain JavaScript, you might need to find type declarations yourself.</p><p>Let's say you want to use <code>react-transition-group</code> package. You installed the package itself and try to import it in a React + TS project:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-F379l" id="cm-F379l">import { Transition } from 'react-transition-group';</textarea><p>IDE will show an error that the project can't be compiled:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201104104152843_%C2%ABScreenshot%C2%BB%202020-11-04%20at%2013.40.59.png" attachmentid="f0e4d577-b310-4690-83fb-f8a1c11a8ec5" contenteditable="false"><div></div></figure><h2><a name="how-to-install-types" id="how-to-install-types">How to Install Types</a></h2><p>A package may recommend installing types from a DefinitelyTyped or another repository in its documentation.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201104104338276_%C2%ABScreenshot%C2%BB%202020-11-04%20at%2013.43.29.png" attachmentid="41fb2077-2ae0-473a-bf32-2df3b0e014d1" contenteditable="false"><div></div></figure><p>If so, run all the commands recommended in docs.</p><p>Otherwise, try to install types from DefinitelyTyped manually. In the case of <code>react-transition-group</code>:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-h2RLX" id="cm-h2RLX">npm install @types/react-transition-group
# or
yarn add @types/react-transition-group</textarea><p>Usually, type declaration name consists of the <code>@types/</code> prefix and the package name after it. (In some rare cases you may want to google the name first.)</p><p>When types are installed IDE should hide the error and compile the project.</p><h2><a name="sources" id="sources">Sources</a></h2><ul><li><p><a href="https://www.typescriptlang.org/docs/handbook/2/type-declarations.html" rel="noopener noreferrer nofollow">Type Declarations</a></p></li><li><p><a href="https://github.com/DefinitelyTyped/DefinitelyTyped" rel="noopener noreferrer nofollow">DefinitelyTyped</a></p></li></ul><p></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How to Install Types for Packages

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript