DefinitelyTyped and @types packages in Typescript - Mini Project: Build & Apply

Using DefinitelyTyped and @types Packages in TypeScript

📖 Scenario: You are building a simple TypeScript project that uses a popular JavaScript library without built-in TypeScript types. To get type support, you will use the @types packages from DefinitelyTyped.

🎯 Goal: Learn how to install and use @types packages from DefinitelyTyped to add type definitions to JavaScript libraries in a TypeScript project.

📋 What You'll Learn

Create a TypeScript file that imports a JavaScript library

Install the corresponding @types package for that library

Use the library with type safety in TypeScript

Print a result using the library

💡 Why This Matters

🌍 Real World

Many JavaScript libraries do not include TypeScript types. Using @types packages from DefinitelyTyped lets you safely use these libraries in TypeScript projects.

💼 Career

Understanding how to add type definitions with @types packages is essential for working on TypeScript projects in professional development environments.

1

Create a TypeScript file importing lodash

Create a file named index.ts and write this line to import lodash: import _ from 'lodash';

Typescript

// Create a file named index.ts and write the import statement
import _ from 'lodash';

Need a hint?

Lodash is a popular JavaScript utility library. We will import it first.

2

Install the @types/lodash package

Add a comment in index.ts that says: // @types package installed for lodash to indicate you installed @types/lodash in your project.

Typescript

import _ from 'lodash';
// Add a comment about @types/lodash installation
// Your code here

Need a hint?

In a real project, you would run npm install --save-dev @types/lodash. Here, just add the comment.

3

Use lodash to chunk an array with type safety

Write a line that creates a variable chunks by calling _.chunk on the array [1, 2, 3, 4] with chunk size 2: const chunks = _.chunk([1, 2, 3, 4], 2);

Typescript

import _ from 'lodash';
// @types package installed for lodash

// Your code here

Need a hint?

The _.chunk function splits an array into smaller arrays of a given size.

4

Print the chunks variable

Write a line to print the chunks variable using console.log(chunks);

Typescript

import _ from 'lodash';
// @types package installed for lodash

const chunks = _.chunk([1, 2, 3, 4], 2);
// Your code here

Need a hint?

Use console.log to see the output of the chunks variable.