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.

Practice

1. What type does TypeScript automatically assign to the variable declared as let count = 10;?

easy

A. number

B. string

C. any

D. boolean

Solution

1. Step 1: Look at the assigned value

   The variable count is assigned the value 10, which is a number.

2. Step 2: Understand TypeScript inference

   TypeScript infers the type from the assigned value, so count is inferred as number.

3. Final Answer:

   number -> Option A

4. Quick Check:

   Value 10 means type number [OK]

Hint: Check the assigned value type to guess variable type [OK]

Common Mistakes:

• Thinking unassigned variables get a type
• Confusing number with string
• Assuming type any by default

2. Which of the following is the correct way to declare a variable with automatic type inference in TypeScript?

easy

A. let name: string = 'Alice';

B. let score: any = 100;

C. let isActive: boolean;

D. let age = 25;

Solution

1. Step 1: Identify automatic type inference

   TypeScript infers types when you assign a value without explicitly declaring the type.

2. Step 2: Check each option

   let age = 25; declares age with an assigned value 25 and no explicit type, so TypeScript infers number.

3. Final Answer:

   let age = 25; -> Option D

4. Quick Check:

   Assigned value without explicit type means inference [OK]

Hint: Look for variables declared with value but no type [OK]

Common Mistakes:

• Confusing explicit type with inferred type
• Choosing variables declared without assignment
• Assuming any type is inferred by default

3. What will be the inferred type and output of this code?

let message = 'Hello';
message = 123;

medium

A. TypeScript error: cannot assign number to string

B. message becomes 123 and type is number

C. message becomes '123' as string

D. No error, message is any type

Solution

1. Step 1: Identify inferred type from initial assignment

   Variable message is assigned a string 'Hello', so TypeScript infers type string.

2. Step 2: Check reassignment compatibility

   Assigning a number 123 to a variable inferred as string causes a type error.

3. Final Answer:

   TypeScript error: cannot assign number to string -> Option A

4. Quick Check:

   Inferred string type rejects number assignment [OK]

Hint: Inferred type fixes variable type, no mixed types allowed [OK]

Common Mistakes:

• Assuming variable type changes on reassignment
• Thinking TypeScript converts types automatically
• Ignoring type errors on incompatible assignments

4. Find the error in this TypeScript code:

let data = [1, 2, 3];
data.push('four');

medium

A. No error, array can hold any type

B. Error: cannot push string into number array

C. Error: push method does not exist

D. Error: data is not initialized

Solution

1. Step 1: Identify inferred array type

   Variable data is assigned an array of numbers, so TypeScript infers type number[].

2. Step 2: Check push argument type

   Trying to push a string 'four' into a number[] array causes a type error.

3. Final Answer:

   Error: cannot push string into number array -> Option B

4. Quick Check:

   Array type enforces element types [OK]

Hint: Array inferred type fixes allowed element types [OK]

Common Mistakes:

• Assuming arrays accept mixed types by default
• Thinking push method is unavailable
• Ignoring type errors on array element types

5. Given this code, what is the inferred type of result and why?

const numbers = [1, 2, 3];
const result = numbers.map(n => n * 2);

hard

A. void, because map does not return anything

B. any[], because map returns any type by default

C. number[], because map returns an array of numbers

D. number, because map returns a single number

Solution

1. Step 1: Identify input array type

   numbers is an array of numbers, so type is number[].

2. Step 2: Understand map return type

   Map applies a function to each element and returns a new array of the same length with transformed elements. Since the function returns n * 2 (a number), the result is number[].

3. Final Answer:

   number[], because map returns an array of numbers -> Option C

4. Quick Check:

   map returns array of transformed elements [OK]

Hint: map returns array with same length and inferred element type [OK]

Common Mistakes:

• Thinking map returns a single value
• Assuming map returns any[] by default
• Confusing void return with map's return