What is TypeScript

Introduction

TypeScript helps you write safer and clearer JavaScript code by adding types. It catches mistakes before you run your program.

When you want to avoid bugs by checking your code early.

When working on big projects with many files and people.

When you want better tools like auto-completion and error hints in your editor.

When you want to use new JavaScript features but keep compatibility with older browsers.

When you want to write code that is easier to understand and maintain.

Syntax

Typescript

let message: string = "Hello, TypeScript!";
function add(a: number, b: number): number {
  return a + b;
}

Type annotations like : string or : number tell TypeScript what type a variable or function should have.

TypeScript code needs to be converted (compiled) to JavaScript before running in browsers or Node.js.

Examples

This declares a variable age that must hold a number.

Typescript

let age: number = 25;

This function takes a string and returns a string.

Typescript

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

This variable holds a true or false value.

Typescript

let isActive: boolean = true;

Sample Program

This program defines a function to multiply two numbers and prints the result.

Typescript

function multiply(x: number, y: number): number {
  return x * y;
}

const result = multiply(4, 5);
console.log(`4 times 5 is ${result}`);

Important Notes

TypeScript is a superset of JavaScript, so all JavaScript code is valid TypeScript.

Using types helps you find errors early, before running your code.

You need a tool called the TypeScript compiler (tsc) to turn TypeScript into JavaScript.

Summary

TypeScript adds types to JavaScript to help catch errors early.

It improves code clarity and tooling support.

You write TypeScript, then compile it to JavaScript to run it.

Practice

1. What is the main purpose of TypeScript?

easy

A. To replace JavaScript entirely with a new language

B. To style web pages with colors and fonts

C. To run code faster than JavaScript

D. To add types to JavaScript for better error checking

Solution

1. Step 1: Understand TypeScript's role

   TypeScript is designed to add types to JavaScript, helping catch errors before running the code.

2. Step 2: Compare options

   Only "To add types to JavaScript for better error checking" correctly describes this purpose. TypeScript does not replace JavaScript entirely with a new language, does not inherently run code faster, and is not for styling.

3. Final Answer:

   To add types to JavaScript for better error checking -> Option D

4. Quick Check:

   TypeScript adds types = B [OK]

Hint: Remember: TypeScript adds types to JavaScript [OK]

Common Mistakes:

• Thinking TypeScript replaces JavaScript
• Confusing TypeScript with CSS or styling
• Believing TypeScript runs code faster by itself

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

easy

A. let age: number = 25;

B. let age = number 25;

C. let age: = 25 number;

D. let age number = 25;

Solution

1. Step 1: Recall TypeScript variable syntax

   In TypeScript, the correct syntax to declare a typed variable is: let variableName: type = value;

2. Step 2: Check each option

   let age: number = 25; matches this syntax exactly. The other options have incorrect order or missing punctuation.

3. Final Answer:

   let age: number = 25; -> Option A

4. Quick Check:

   Correct typed variable syntax = D [OK]

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

Common Mistakes:

• Placing type before variable name
• Missing colon between name and type
• Incorrect order of type and value

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

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

medium

A. Hello, Alice!

B. Hello, name!

C. Error: name is not defined

D. Hello, ${name}!

Solution

1. Step 1: Understand the function behavior

   The function greet takes a string parameter and returns a greeting using template literals to insert the name.

2. Step 2: Evaluate the console.log output

   Calling greet("Alice") returns "Hello, Alice!" which is printed to the console.

3. Final Answer:

   Hello, Alice! -> Option A

4. Quick Check:

   Template literal output = Hello, Alice! [OK]

Hint: Template literals insert variables with ${} [OK]

Common Mistakes:

• Confusing string interpolation syntax
• Expecting variable name printed literally
• Thinking function throws error

4. Identify the error in this TypeScript code:

let count: number = "10";

medium

A. Variable name 'count' is reserved

B. Missing semicolon at the end

C. Type mismatch: assigning string to number variable

D. No error, code is correct

Solution

1. Step 1: Check variable type and value

   The variable count is declared as a number but assigned a string "10".

2. Step 2: Understand TypeScript type checking

   TypeScript does not allow assigning a string to a number type variable, causing a type mismatch error.

3. Final Answer:

   Type mismatch: assigning string to number variable -> Option C

4. Quick Check:

   Type mismatch error = A [OK]

Hint: Match variable type and assigned value exactly [OK]

Common Mistakes:

• Ignoring type mismatch errors
• Thinking semicolon missing causes error here
• Assuming variable names are reserved

5. You want to write TypeScript code that only accepts a number or a string as input and returns a string describing the input type. Which code snippet correctly uses TypeScript types to do this?

hard

A. function describe(input): string {
return `Input is a ${typeof input}`;
}

B. function describe(input: number | string): string {
return `Input is a ${typeof input}`;
}

C. function describe(input: any): number {
return typeof input;
}

D. function describe(input: number & string): string {
return `Input is a ${typeof input}`;
}

Solution

1. Step 1: Understand union types in TypeScript

   To accept either number or string, use the union type: number | string.

2. Step 2: Check return type and function body

   The function returns a string describing the input type using typeof. function describe(input: number | string): string { return `Input is a ${typeof input}`; } correctly types input and return value.

3. Step 3: Analyze other options

   function describe(input): string { return `Input is a ${typeof input}`; } lacks input type, losing type safety. function describe(input: any): number { return typeof input; } returns number but should return string. function describe(input: number & string): string { return `Input is a ${typeof input}`; } uses intersection number & string which is impossible.

4. Final Answer:

   function describe(input: number | string): string { return `Input is a ${typeof input}`; } -> Option B

5. Quick Check:

   Use union types for multiple input types = A [OK]

Hint: Use | for union types to accept multiple types [OK]

Common Mistakes:

• Using & instead of | for union types
• Omitting input type annotation
• Returning wrong type from function