DefinitelyTyped and @types packages in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to install type definitions for a package using npm.

Typescript

npm install --save-dev [1]

Drag options to blanks, or click blank then click option'

Alodash

B@types/lodash

Ctypescript

D@types/node

Attempts:

3 left

💡 Hint

Common Mistakes

Installing the main package instead of the '@types' package.

Forgetting to add '--save-dev' for development dependencies.

To add type definitions for a package like lodash, you install the corresponding @types package.

2fill in blank

medium

Complete the code to import a type from an installed '@types' package.

Typescript

import type { [1] } from 'lodash';

Drag options to blanks, or click blank then click option'

Amap

BmapFn

CMap

DMapper

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names for types.

Importing values instead of types with 'import type'.

The type Map is a valid type exported by lodash's type definitions.

3fill in blank

hard

Fix the error in the code by completing the import statement for a type from '@types/node'.

Typescript

import type { [1] } from 'node';

Drag options to blanks, or click blank then click option'

ABuffer

Bbuffer

CBufferType

DBufferClass

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'buffer' which is not a type.

Guessing type names that don't exist.

The correct type to import from '@types/node' is Buffer with uppercase B.

4fill in blank

hard

Fill both blanks to create a type alias for a function type using types from '@types/lodash'.

Typescript

type Func = (input: string) => [1];

const example: Func = (input) => [2];

Drag options to blanks, or click blank then click option'

Anumber

Binput.length

Cstring

Dinput.toUpperCase()

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' as return type but returning a number.

Returning a string when the type expects a number.

The function returns a number, so the type is number and the example returns the length of the input string.

5fill in blank

hard

Fill all three blanks to create a typed object using types from '@types/node' and '@types/lodash'.

Typescript

import type { [1] } from 'node';
import type { [2] } from 'lodash';

const data: { buf: [1]; fn: [2] } = {
  buf: Buffer.from('hello'),
  fn: (arr) => arr.map(x => x * 2)
};

Drag options to blanks, or click blank then click option'

ABuffer

Bmap

CMap

DFunction

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing function names with types.

Using lowercase names for types.

The type Buffer is imported from 'node' and Map is a type from 'lodash'. The object uses these types for its properties.