How TypeScript infers types automatically - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable with automatic type inference.

Typescript

let message = [1];

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

Alet

Bstring

C"Hello, TypeScript!"

D42

Attempts:

3 left

💡 Hint

Common Mistakes

Writing the type explicitly instead of letting TypeScript infer it.

Assigning a number instead of a string.

TypeScript infers the type of message as string because it is initialized with a string literal.

2fill in blank

medium

Complete the function to let TypeScript infer the return type automatically.

Typescript

function add(a: number, b: number) {
  return [1];
}

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

Aa + b

Ba / b

Ca * b

Da - b

Attempts:

3 left

💡 Hint

Common Mistakes

Using subtraction or multiplication instead of addition.

Not returning any value.

The function returns the sum of a and b. TypeScript infers the return type as number.

3fill in blank

hard

Fix the error by completing the code so TypeScript infers the correct type for the array.

Typescript

const numbers = [1, 2, 3, [1]];

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

A4

B"four"

Ctrue

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Adding a string or boolean to a number array.

Using null which is not a number.

All elements are numbers, so TypeScript infers the array type as number[]. Adding a string or other types causes errors.

4fill in blank

hard

Fill both blanks to create an object with inferred types for its properties.

Typescript

const user = {
  name: [1],
  age: [2]
};

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

A"Alice"

B30

C"Bob"

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a boolean for the name or age.

Mixing up the types of the properties.

The object user has a name property inferred as string and an age property inferred as number.

5fill in blank

hard

Fill all three blanks to create a function with explicit parameter types and inferred return type.

Typescript

const multiply = (x: [1], y: [2]) => [3];

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

Anumber

Bstring

Cx * y

Dx + y

Attempts:

3 left

💡 Hint

Common Mistakes

Using string types for parameters.

Returning the sum instead of the product.

The function multiply takes two number parameters and returns their product. TypeScript infers the return type as number.