Migrating JavaScript to TypeScript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the first step when migrating a JavaScript project to TypeScript?

Rename your JavaScript files from .js to .ts to enable TypeScript features and start getting type checking.

beginner

Why add type annotations during migration?

Type annotations help catch errors early by telling TypeScript what kind of values variables and functions expect, making your code safer and easier to understand.

intermediate

What is the role of the tsconfig.json file in a TypeScript project?

It configures the TypeScript compiler options, like which files to include, target JavaScript version, and strictness rules, guiding how TypeScript checks and compiles your code.

intermediate

How can you gradually migrate a large JavaScript codebase to TypeScript?

Use the allowJs option in tsconfig.json to include JavaScript files, then convert files one by one, adding types step-by-step to avoid big disruptions.

beginner

What is the any type and when should you use it during migration?

The any type disables type checking for a variable. Use it temporarily when you don't know the exact type yet, but plan to replace it with specific types later.

What file extension should you use for TypeScript files?

A .js

B .ts

C .tsx

D .json

TypeScript files use the .ts extension. .tsx is for TypeScript with JSX.

Which tsconfig.json option allows JavaScript files to be included in a TypeScript project?

A includeJs

B jsSupport

C enableJs

D allowJs

The allowJs option lets the compiler process JavaScript files.

What does the any type do in TypeScript?

A Disables type checking for a variable

B Specifies a number type

C Defines a string type

D Creates a new type alias

any tells TypeScript to skip type checking for that variable.

Why is it good to add type annotations gradually during migration?

A To avoid breaking the whole project at once

B Because TypeScript requires all types upfront

C To make the code run faster

D To remove JavaScript files immediately

Gradual typing helps keep the project working while improving safety step-by-step.

What is the purpose of tsconfig.json?

A To install TypeScript packages

B To list all JavaScript files

C To configure TypeScript compiler options

D To run the TypeScript code

tsconfig.json tells the compiler how to process your TypeScript code.

Explain the main steps to migrate a JavaScript project to TypeScript.

Think about file changes, configuration, and adding types step-by-step.

Describe how the any type helps during migration and why it should be used carefully.

Consider both benefits and risks of using <code>any</code>.

Practice

1. What is the main benefit of migrating JavaScript code to TypeScript?

easy

A. It adds type safety to catch errors early

B. It makes the code run faster in browsers

C. It removes all JavaScript features

D. It automatically converts code to Python

Solution

1. Step 1: Understand TypeScript's purpose

   TypeScript adds static types to JavaScript, helping find errors before running code.

2. Step 2: Compare options

   Only It adds type safety to catch errors early correctly states the benefit of type safety. Other options are incorrect or unrelated.

3. Final Answer:

   It adds type safety to catch errors early -> Option A

4. Quick Check:

   Type safety = D [OK]

Hint: TypeScript adds types to catch errors early [OK]

Common Mistakes:

• Thinking TypeScript makes code run faster
• Believing TypeScript removes JavaScript features
• Confusing TypeScript with other languages

2. Which of the following is the correct way to declare a typed variable in TypeScript?

easy

A. let age = number 30;

B. let age: number = 30;

C. let age = 30: number;

D. let age number = 30;

Solution

1. Step 1: Recall TypeScript variable syntax

   TypeScript uses let variableName: type = value; to declare typed variables.

2. Step 2: Check each option

   Only let age: number = 30; follows the correct syntax. Others have misplaced type or incorrect order.

3. Final Answer:

   let age: number = 30; -> Option B

4. Quick Check:

   Correct typed variable syntax = B [OK]

Hint: Use colon after variable name for type [OK]

Common Mistakes:

• Placing type after value
• Omitting colon between name and type
• Using wrong order of type and value

3. What will be the output of this TypeScript code after migration?

function greet(name: string) {
  return `Hello, ${name.toUpperCase()}!`;
}
console.log(greet("world"));

medium

A. TypeError at runtime

B. "Hello, world!"

C. "Hello, WORLD!"

D. SyntaxError during compilation

Solution

1. Step 1: Analyze the function behavior

   The function takes a string and returns a greeting with the name in uppercase.

2. Step 2: Evaluate the output of greet("world")

   Calling greet("world") returns "Hello, WORLD!" because toUpperCase() converts to uppercase.

3. Final Answer:

   "Hello, WORLD!" -> Option C

4. Quick Check:

   String uppercase greeting = C [OK]

Hint: Check string methods and template literals output [OK]

Common Mistakes:

• Ignoring toUpperCase effect
• Expecting original case output
• Confusing runtime and compile errors

4. Identify the error in this TypeScript migration:

function add(a, b: number): number {
  return a + b;
}

medium

A. Parameter 'a' is missing a type annotation

B. Return type 'number' is invalid

C. Function name 'add' is not allowed

D. Parameters must not have types in TypeScript

Solution

1. Step 1: Check parameter types

   In TypeScript, all parameters should have type annotations for clarity and safety.

2. Step 2: Identify missing type

   Parameter 'a' lacks a type, causing a compile error. Other parts are correct.

3. Final Answer:

   Parameter 'a' is missing a type annotation -> Option A

4. Quick Check:

   All parameters need types = A [OK]

Hint: All function parameters need types in TypeScript [OK]

Common Mistakes:

• Leaving some parameters untyped
• Misunderstanding return type syntax
• Thinking function names have restrictions

5. You have this JavaScript object:

const user = { id: 1, name: "Alice", active: true };

How would you migrate it to TypeScript with a proper type annotation?

hard

A. const user: any = { id: 1, name: "Alice", active: true };

B. const user = { id: number, name: string, active: boolean } = { id: 1, name: "Alice", active: true };

C. const user: object = { id: 1, name: "Alice", active: true };

D. const user: { id: number; name: string; active: boolean } = { id: 1, name: "Alice", active: true };

Solution

1. Step 1: Define precise object type

   Use an inline type annotation with exact property types for clarity and safety.

2. Step 2: Compare options

   const user: { id: number; name: string; active: boolean } = { id: 1, name: "Alice", active: true }; correctly annotates the object with property types. const user = { id: number, name: string, active: boolean } = { id: 1, name: "Alice", active: true }; is invalid syntax. const user: object = { id: 1, name: "Alice", active: true }; is too generic. const user: any = { id: 1, name: "Alice", active: true }; disables type checking.

3. Final Answer:

   const user: { id: number; name: string; active: boolean } = { id: 1, name: "Alice", active: true }; -> Option D

4. Quick Check:

   Precise object type annotation = A [OK]

Hint: Use inline type with property names and types [OK]

Common Mistakes:

• Using 'any' which disables type safety
• Incorrect syntax for object type annotation
• Using generic 'object' type losing property info