Skip to Content
Course content

113: Finding and Installing @types Packages

Click on the "Edit" button in the top corner of the screen to edit your slide content.

You’ve probably already hit that moment where you install a handy JavaScript library—let's use lodash as our example—and the second you try to import it, TypeScript screams at you with a "Could not find a declaration file for module" error. It's frustrating because the code actually runs fine in Node or the browser; it's just that TypeScript is blind to the library's internal structure.

The temptation to just use 'any'

When I first started with TypeScript, my instinct was to just make the red squiggles go away as quickly as possible. The naive approach is to create a quick .d.ts file in your project and just declare the module as any, or worse, cast every single function call from that library to any. I'll admit, it's satisfying for about five minutes because the compiler stops complaining. But here is the trade-off: you've essentially opted out of TypeScript for that entire dependency. You lose autocomplete, you lose type checking on the arguments you pass into lodash, and you're back to guessing whether a function returns an array or an object.

Leaning on DefinitelyTyped

The better way—and the industry standard—is to check if the community has already done the hard work for you. Most popular JS libraries have corresponding type definitions hosted by DefinitelyTyped. These are distributed via npm under the @types scope. Instead of fighting with any, you just run npm install --save-dev @types/lodash. Now, TypeScript suddenly knows exactly what _.chunk or _.merge expects. I always recommend installing these as devDependencies because your production code doesn't need the type definitions to run; they're only there to keep us honest during development.

When you don't actually need @types

Here is the part that trips people up: not every library needs a separate @types package. A lot of modern libraries are written in TypeScript from the ground up, meaning they ship their own type definitions bundled right inside the main package. If you try to install @types/axios, for instance, you'll find it doesn't exist—or is deprecated—because axios already includes its own types.

I usually figure out which path to take by looking at the library's package.json on GitHub or checking the npm page for a "TS" icon. If you see a types or typings field in the package.json, you're golden; just install the library and the types come for free. If that field is missing and you're seeing those red squiggles, that's your signal to go hunting for the @types version.




📋 Practical Task

Fixing Type Definitions for the 'date-fns' Library

In this exercise, you will simulate a common integration scenario where a library is missing its type definitions.

  • Initialize a new TypeScript project and install the date-fns library.
  • Attempt to import format from date-fns and use it to format a date object.
  • Observe the TypeScript compiler error regarding the missing declaration file.
  • Research whether date-fns provides its own types or requires a separate @types package.
  • Install the correct type package (if necessary) to resolve the error and enable full IntelliSense/autocomplete for the format function.
Rating
0 0

There are no comments for now.

to be the first to leave a comment.