How TypeScript compiles to JavaScript - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable with a type in TypeScript.

Typescript

let message: [1] = 'Hello, TypeScript!';

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

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number type for a text variable.

Omitting the type annotation.

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

2fill in blank

medium

Complete the code to define a function with typed parameters in TypeScript.

Typescript

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

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

Anumber

Bboolean

Cstring

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or boolean for a text parameter.

Not specifying a return type.

The parameter name should be a string because it represents text.

3fill in blank

hard

Fix the error in the TypeScript code by completing the type annotation.

Typescript

let count: [1] = 10;
count = 'ten'; // Error: Type mismatch

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

Anumber

Bany

Cboolean

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using string type but assigning a number.

Ignoring the type mismatch error.

The variable count is assigned a number initially, so its type should be number. Assigning a string later causes an error.

4fill in blank

hard

Complete the code to create a typed interface and use it in a function parameter.

Typescript

interface User { {
  name: string;
  age: number;
}

function printUser(user: {BLANK_2}}) {
  console.log(`${user.name} is ${user.age} years old.`);
}

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

A{

BUser

C}

DPerson

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong braces or missing them.

Using a different name than the interface for the parameter type.

The interface body starts with { and the function parameter type is the interface name User.

5fill in blank

hard

Fill all three blanks to write a TypeScript class with a constructor and a method.

Typescript

class [1] {
  name: string;
  constructor(name: [2]) {
    this.name = name;
  }
  greet(): [3] {
    return `Hello, ${this.name}!`;
  }
}

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

APerson

Bstring

DUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent class names.

Omitting types in constructor or method.

The class is named Person, the constructor parameter type is string, and the greet method returns a string.