DefinitelyTyped and @types packages in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is DefinitelyTyped in TypeScript?

DefinitelyTyped is a large community repository of TypeScript type definitions for popular JavaScript libraries that don't include their own types.

beginner

What are @types packages in TypeScript?

@types packages are npm packages that contain type definitions from DefinitelyTyped, allowing TypeScript to understand JavaScript libraries without built-in types.

beginner

How do you install type definitions for a JavaScript library using npm?

You run npm install --save-dev @types/library-name to add the type definitions as a development dependency.

intermediate

Why are @types packages important for TypeScript developers?

They provide type safety, code completion, and better error checking when using JavaScript libraries without built-in TypeScript support.

beginner

What should you do if a JavaScript library already includes its own TypeScript types?

You do not need to install a separate @types package because the types are already included in the library itself.

What is the main purpose of the DefinitelyTyped repository?

A To provide type definitions for JavaScript libraries

B To host JavaScript libraries

C To compile TypeScript code

D To manage npm packages

DefinitelyTyped hosts type definitions so TypeScript can understand JavaScript libraries.

How do you add type definitions for a library named 'lodash'?

A npm install lodash

B npm install lodash-types

C npm install --save-dev @types/lodash

D npm install types-lodash

You install the @types package for lodash using npm with --save-dev.

If a library includes its own TypeScript types, what should you do?

A Use the included types, no extra install needed

B Install @types package anyway

C Disable TypeScript for that library

D Write your own type definitions

Libraries with built-in types do not require separate @types packages.

What benefit do @types packages provide?

A Faster JavaScript execution

B Type safety and better editor support

C Automatic code formatting

D Library version updates

@types packages improve type safety and editor features like autocomplete.

Where are @types packages usually published?

A TypeScript official website

B DefinitelyTyped repository

C GitHub

D npm registry

@types packages are published on npm for easy installation.

Explain what DefinitelyTyped is and how it relates to @types packages.

Think about where type definitions come from and how you get them in your project.

Describe the steps to add type support for a JavaScript library that lacks built-in TypeScript types.

Focus on npm commands and why you do this.

Practice

1. What is the main purpose of the @types packages in TypeScript?

easy

A. To provide type definitions for JavaScript libraries

B. To compile TypeScript code into JavaScript

C. To run JavaScript code in the browser

D. To create new JavaScript libraries

Solution

1. Step 1: Understand the role of @types packages

   @types packages contain type definitions that describe the shape and types of JavaScript libraries for TypeScript.

2. Step 2: Identify the main purpose

   They help TypeScript understand JavaScript libraries by providing type information, enabling better type checking and editor support.

3. Final Answer:

   To provide type definitions for JavaScript libraries -> Option A

4. Quick Check:

   @types = type definitions [OK]

Hint: Remember: @types adds types for JS libs [OK]

Common Mistakes:

• Confusing @types with compilers
• Thinking @types runs code
• Assuming @types creates libraries

2. Which of the following is the correct way to install type definitions for the lodash library using npm?

easy

A. npm install @types/lodash

B. npm install lodash-types

C. npm install types-lodash

D. npm install lodash/@types

Solution

1. Step 1: Recall the naming convention for type packages

   Type definitions from DefinitelyTyped are published under the @types scope, so the package name is @types/library-name.

2. Step 2: Match the correct npm install command

   For lodash, the correct package is @types/lodash, so the command is npm install @types/lodash.

3. Final Answer:

   npm install @types/lodash -> Option A

4. Quick Check:

   Type packages start with @types/ [OK]

Hint: Type packages always start with @types/ [OK]

Common Mistakes:

• Using incorrect package names without @types/
• Mixing up package and type package names
• Trying to install types as normal packages

3. Given the following TypeScript code, what will be the output if @types/lodash is NOT installed?

import _ from 'lodash';

const numbers = [1, 2, 3];
const doubled = _.map(numbers, n => n * 2);
console.log(doubled);

medium

A. [] (empty array)

B. [2, 4, 6]

C. Runtime error: _.map is not a function

D. TypeScript error: Cannot find module 'lodash' or its corresponding type declarations

Solution

1. Step 1: Understand the role of type definitions in TypeScript

   Without @types/lodash, TypeScript cannot find type information for lodash, causing a compile-time error.

2. Step 2: Identify the error message

   The error will say it cannot find the module or its type declarations, preventing compilation.

3. Final Answer:

   TypeScript error: Cannot find module 'lodash' or its corresponding type declarations -> Option D

4. Quick Check:

   No types = compile error [OK]

Hint: No @types means TypeScript can't find types [OK]

Common Mistakes:

• Confusing runtime errors with compile errors
• Expecting code to run without types installed
• Thinking JavaScript errors appear instead

4. You installed @types/express but still get errors about missing types when importing express. What is the most likely cause?

medium

A. You need to restart your TypeScript server or IDE

B. You installed the wrong version of @types/express

C. You forgot to install the express package itself

D. You must import types explicitly using import type

Solution

1. Step 1: Check dependencies

   Type definitions only provide types; the actual library must be installed separately.

2. Step 2: Identify missing library

   If express is not installed, importing it causes errors despite having types.

3. Final Answer:

   You forgot to install the express package itself -> Option C

4. Quick Check:

   Types need actual library installed [OK]

Hint: Always install both library and its @types [OK]

Common Mistakes:

• Assuming types include the library code
• Not restarting IDE after install
• Misusing import type for libraries

5. You want to use a JavaScript library foo-lib in your TypeScript project, but no @types/foo-lib package exists. What is the best way to add type support?

hard

A. Ignore type errors and use any everywhere

B. Write a custom declaration file foo-lib.d.ts with needed types

C. Install @types/foo-lib anyway, it will work

D. Rewrite the library in TypeScript

Solution

1. Step 1: Understand missing type definitions

   If no official @types package exists, you can create your own declaration file to describe the library's types.

2. Step 2: Choose best practice

   Writing a .d.ts file lets TypeScript check your code and improves editor support without rewriting the library.

3. Final Answer:

   Write a custom declaration file foo-lib.d.ts with needed types -> Option B

4. Quick Check:

   Custom .d.ts files add missing types [OK]

Hint: Create .d.ts files for missing types [OK]

Common Mistakes:

• Ignoring types and risking bugs
• Expecting non-existent @types packages
• Thinking rewriting library is easiest