Migrating JavaScript to TypeScript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable with a type annotation.

Typescript

let username: [1] = 'Alice';

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

Anumber

Bstring

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number' or 'boolean' instead of 'string' for text values.

Omitting the type annotation.

In TypeScript, you declare a variable's type after the colon. Here, username is a string.

2fill in blank

medium

Complete the function parameter with the correct type annotation.

Typescript

function greet(name: [1]): string {
  return `Hello, ${name}!`;
}

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

Aboolean

Bnumber

Cstring

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number' or 'boolean' for a name parameter.

Leaving out the type annotation.

The parameter name should be a string because it is used inside a text message.

3fill in blank

hard

Fix the error by adding the correct type annotation to the array.

Typescript

const scores: [1] = [10, 20, 30];

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

Aany[]

Bstring[]

Cboolean[]

Dnumber[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string[]' for an array of numbers.

Not specifying the array type.

The array scores contains numbers, so its type is number[].

4fill in blank

hard

Fill both blanks to define an interface and use it to type an object.

Typescript

interface [1] {
  id: number;
  name: string;
}

const user: [2] = { id: 1, name: 'Bob' };

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

AUser

BPerson

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the interface and the object type.

Using a name that does not match the object.

The interface is named User and the object user uses this interface as its type.

5fill in blank

hard

Fill all three blanks to create a typed function with a return type.

Typescript

function add(a: [1], b: [2]): [3] {
  return a + b;
}

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

Anumber

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' as a parameter or return type.

Mixing different types for parameters and return.

The function add takes two numbers and returns a number, so all types are number.