Learn TypeScript from Scratch to Advanced: Complete Tutorial and Interview Questions and answers

 TypeScript has become one of the most in-demand programming languages for web development. It powers frameworks like Angular, works seamlessly with React and Node.js, and is widely adopted by companies for building scalable applications. If you’re preparing for interviews or want to upgrade your JavaScript skills, this TypeScript tutorial with interview questions will take you from beginner to advanced step by step.

---

🔹 What is TypeScript?

TypeScript is a superset of JavaScript developed by Microsoft. It adds static typing, interfaces, generics, and object-oriented programming (OOP) concepts on top of JavaScript. The TypeScript compiler (tsc) converts TypeScript code into plain JavaScript, making it compatible with any browser or framework.

Why TypeScript?

• Early error detection with static typing

• Enhanced IDE support (IntelliSense, autocompletion)

• Better maintainability for large projects

• Supports modern ES6+ features

---

🔹 Setting up TypeScript

1. Install Node.js (download from nodejs.org)

2. Install TypeScript globally

   npm install -g typescript
   

3. Check version

   tsc -v
   

4. Compile TypeScript file

   tsc index.ts
   node index.js
   

---

🔹 TypeScript Basics (Beginner Level)

1. Data Types

let username: string = "Cherry";
let age: number = 12;
let isAdmin: boolean = true;
let scores: number[] = [10, 20, 30];
let tupleExample: [string, number] = ["Hasitha", 6];

2. Functions

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

3. Interfaces

interface User {
  id: number;
  name: string;
}
let user: User = { id: 1, name: "Hasitha" };

4. Enums

enum Role { Admin, User, Guest }
let myRole: Role = Role.Admin;

---

🔹 Intermediate TypeScript

1. Classes & Inheritance

class Animal {
  constructor(public name: string) {}
  speak(): void {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  speak(): void {
    console.log(`${this.name} barks`);
  }
}
let dog = new Dog("Tommy");
dog.speak();

2. Generics

function identity<T>(value: T): T {
  return value;
}
console.log(identity<string>("Hello"));
console.log(identity<number>(123));

3. Type Aliases & Union Types

type ID = number | string;
let userId: ID = 101;
userId = "abc123";

4. Modules & Namespaces

// mathUtils.ts
export function add(a: number, b: number): number {
  return a + b;
}

// index.ts
import { add } from "./mathUtils";
console.log(add(5, 10));

---

🔹 Advanced TypeScript Concepts

1. Advanced Types

type Person = { name: string };
type Employee = Person & { salary: number };

let emp: Employee = { name: "Cherry", salary: 50000 };

2. Decorators (used in Angular)

function Logger(target: any) {
  console.log("Logging...", target);
}

@Logger
class TestClass {}

3. Type Guards

function printId(id: string | number) {
  if (typeof id === "string") {
    console.log("String ID:", id.toUpperCase());
  } else {
    console.log("Number ID:", id);
  }
}

4. Utility Types

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type PartialTodo = Partial<Todo>;
type ReadonlyTodo = Readonly<Todo>;

---

🔹 TypeScript Best Practices

• Always define types or interfaces

• Use strict mode in tsconfig.json

• Prefer readonly and private where possible

• Keep functions pure and modular

• Use Enums/Constants instead of magic numbers

---

🔹 TypeScript Interview Questions and Answers

Beginner Level

Q1: What is TypeScript and how is it different from JavaScript?
👉 TypeScript is a superset of JavaScript that adds type safety, interfaces, generics, and OOP features. Unlike JavaScript, TypeScript code needs to be compiled into JS.

Q2: What are the basic data types in TypeScript?
👉 string, number, boolean, null, undefined, tuple, enum, any, void, unknown.

Q3: What is an interface in TypeScript?
👉 An interface defines the structure of an object. It enforces contracts between code.

---

Intermediate Level

Q4: What are Generics in TypeScript?
👉 Generics allow writing reusable functions and classes that work with multiple types. Example:

function identity<T>(arg: T): T {
  return arg;
}

Q5: Difference between type and interface in TypeScript?
👉 Both define object shapes, but type can represent unions, primitives, and mapped types, whereas interface is best for object contracts and can be extended multiple times.

Q6: What is the difference between unknown and any?
👉 any disables type checking completely. unknown is safer; you must check its type before using it.

---

Advanced Level

Q7: Explain Decorators in TypeScript.
👉 Decorators are special functions that modify classes, methods, or properties. They are heavily used in Angular for metadata annotations.

Q8: What are Utility Types in TypeScript?
👉 Predefined types like Partial<T>, Pick<T>, Readonly<T>, Record<K,T> that help in transforming object types.

Q9: How does TypeScript improve large-scale application development?
👉 By enforcing type safety, modularization, OOP principles, and preventing runtime errors, making code maintainable and scalable.

✅ Conclusion

TypeScript is not just an extension of JavaScript—it’s a game-changer for modern development. By learning the fundamentals, moving into advanced topics, and preparing with interview questions, you can become a confident TypeScript developer ready for real-world projects and interviews.