Backend interview prep

Start

TypeScript for Angular

Learn TypeScript for Angular from beginner to advanced with practical examples, architecture diagrams, OOP concepts, decorators, interfaces, generics, and top Angular interview questions.

TypeScript is the foundation of Angular. Every Angular application is written in TypeScript because it provides static typing, object-oriented programming, decorators, interfaces, generics, and modern JavaScript features.

If JavaScript is the engine, TypeScript is the safety system that makes Angular applications scalable and maintainable.

In Angular interviews, TypeScript questions are extremely common because Angular relies heavily on TypeScript features.

Table of Contents

  • What is TypeScript?
  • Why Angular Uses TypeScript
  • TypeScript Architecture
  • JavaScript vs TypeScript
  • TypeScript Features
  • OOP Concepts
  • Decorators
  • Interfaces
  • Generics
  • Access Modifiers
  • TypeScript Compilation
  • Top 10 Interview Questions
  • Best Practices
  • Common Mistakes
  • Summary

What is TypeScript?

TypeScript is an open-source programming language developed by Microsoft.

It is a superset of JavaScript, meaning every valid JavaScript program is also valid TypeScript.

TypeScript adds:

  • Static Typing
  • Interfaces
  • Classes
  • Generics
  • Enums
  • Decorators
  • Access Modifiers
  • Better Tooling

Finally, TypeScript is compiled into plain JavaScript that browsers can execute.

Why Angular Uses TypeScript

Angular uses TypeScript because it improves:

  • Maintainability
  • Readability
  • IDE Support
  • Code Navigation
  • Compile-time Error Detection
  • Refactoring
  • Object-Oriented Design

Large enterprise applications become much easier to manage.

TypeScript Architecture

flowchart LR

Developer

Developer --> TypeScript

TypeScript --> Compiler["TypeScript Compiler (tsc)"]

Compiler --> JavaScript

JavaScript --> Browser

Angular + TypeScript Relationship

flowchart TD

Angular

Angular --> Components

Angular --> Services

Angular --> Pipes

Angular --> Directives

Angular --> Routing

Components --> TypeScript

Services --> TypeScript

Pipes --> TypeScript

Directives --> TypeScript

TypeScript Compilation Process

flowchart LR

WriteCode["Write TypeScript"]

WriteCode --> TypeChecking

TypeChecking --> Compilation

Compilation --> JavaScript

JavaScript --> BrowserExecution

JavaScript vs TypeScript

JavaScript TypeScript
Dynamic Typing Static Typing
No Interfaces Supports Interfaces
No Access Modifiers Supports Access Modifiers
Runtime Errors Compile-Time Error Detection
Weak Tooling Excellent IDE Support
No Decorators Decorators Supported
Difficult Refactoring Easy Refactoring

Static Typing Example

let name: string = "Venu";

let age: number = 35;

let active: boolean = true;

If we assign:

age = "Thirty Five";

TypeScript immediately reports a compilation error.

Type Inference

TypeScript can automatically determine variable types.

let company = "Google";

TypeScript automatically infers:

string

Interfaces

Interfaces define the structure of an object.

interface Employee {

    id: number;

    name: string;

    salary: number;

}

Usage:

const employee: Employee = {

    id: 1,

    name: "John",

    salary: 85000

};

Classes

Angular components and services are classes.

class Employee {

    constructor(
        public id: number,
        public name: string
    ) {}

}

OOP in TypeScript

classDiagram

class Employee{

+number id

+string name

+work()

}

class Manager{

+approve()

}

Employee <|-- Manager

Inheritance Example

class Employee {

    work() {
        console.log("Working...");
    }

}

class Manager extends Employee {

    approve() {
        console.log("Approved");
    }

}

Access Modifiers

Modifier Accessible
public Everywhere
private Inside Class
protected Class + Child Classes

Example:

class User {

    public name = "John";
}

Enums

enum Role {

    Admin,

    User,

    Manager

}

Usage:

let role = Role.Admin;

Generics

Generics allow reusable code.

function getData<T>(value: T): T {

    return value;

}

Usage:

getData<string>("Angular");

getData<number>(100);

Decorators

Angular heavily relies on decorators.

@Component({

 selector: 'app-home',

 standalone: true,

 template: `<h2>Home</h2>`

})

export class HomeComponent {

}

Common Angular decorators:

Decorator Purpose
@Component Component
@Injectable Service
@Directive Directive
@Pipe Pipe
@Input Input Property
@Output Output Event
@HostListener Listen Events
@HostBinding Bind Host Properties

Arrow Functions

const add = (a:number,b:number):number => {

    return a+b;

}

Async / Await

async function loadData() {

    const response = await fetch("/users");

    return response.json();

}

TypeScript Features Used in Angular

flowchart TD

TypeScript

TypeScript --> Classes

TypeScript --> Interfaces

TypeScript --> Generics

TypeScript --> Decorators

TypeScript --> Modules

TypeScript --> Enums

TypeScript --> AsyncAwait

TypeScript --> ArrowFunctions

Advantages of TypeScript

Feature Benefit
Static Typing Fewer Bugs
Interfaces Better Contracts
Classes OOP Support
Generics Reusable Code
Decorators Angular Integration
IDE Support Faster Development
Compile-Time Checking Early Error Detection
Refactoring Easier Maintenance

Top 10 TypeScript Interview Questions

1. What is TypeScript?

Answer

TypeScript is a statically typed superset of JavaScript developed by Microsoft. It compiles into JavaScript and adds features such as classes, interfaces, generics, decorators, and compile-time type checking.

2. Why does Angular use TypeScript?

Answer

Angular uses TypeScript because it provides:

  • Static typing
  • Object-Oriented Programming
  • Decorators
  • Better IDE support
  • Compile-time error checking
  • Maintainable code

3. Difference between JavaScript and TypeScript?

JavaScript TypeScript
Dynamic Static
No Interfaces Interfaces
No Generics Generics
Runtime Errors Compile-Time Errors
No Decorators Decorators

4. What is an Interface?

Answer

An interface defines the structure that an object or class must follow.

It improves type safety and readability.

5. What are Generics?

Answer

Generics allow writing reusable functions, classes, and services while preserving type safety.

Example:

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

6. What are Decorators?

Answer

Decorators add metadata to classes, methods, properties, or parameters.

Angular uses decorators like:

  • @Component
  • @Injectable
  • @Directive
  • @Pipe

7. What are Access Modifiers?

Answer

TypeScript provides three access modifiers:

  • public
  • private
  • protected

These control the visibility of class members.

8. What is Type Inference?

Answer

Type inference allows TypeScript to automatically determine the type of a variable based on its assigned value, reducing the need for explicit type annotations.

9. What is the TypeScript Compiler?

Answer

The TypeScript Compiler (tsc) converts TypeScript code into browser-compatible JavaScript while performing type checking during compilation.

10. Why is TypeScript important for enterprise Angular applications?

Answer

TypeScript improves scalability through strong typing, modular code, interfaces, decorators, and excellent tooling. These features reduce bugs, simplify refactoring, and make collaboration easier across large development teams.

Common Interview Follow-Up Questions

  • Is TypeScript mandatory for Angular?
  • What is structural typing?
  • What is the difference between interface and type?
  • What are union types?
  • What are intersection types?
  • What is optional chaining?
  • What are optional properties?
  • What is readonly?
  • What is unknown vs any?
  • What is never?

Common Mistakes

  • Using any everywhere.
  • Ignoring compile-time warnings.
  • Overusing type assertions (as).
  • Creating very large interfaces.
  • Forgetting access modifiers.
  • Mixing JavaScript patterns with TypeScript best practices.

Best Practices

  • Prefer specific types over any.
  • Use interfaces for object contracts.
  • Use generics for reusable code.
  • Enable strict mode in tsconfig.json.
  • Keep classes focused on a single responsibility.
  • Use readonly where values should not change.
  • Use enums only when they improve readability.
  • Take advantage of IDE refactoring support.

Summary

TypeScript is the backbone of Angular development. It enhances JavaScript with static typing, object-oriented programming, interfaces, decorators, and generics, making Angular applications easier to develop, test, and maintain. Mastering TypeScript is essential for building enterprise Angular applications and for succeeding in Angular interviews.

Interview Cheat Sheet

Topic Remember
Developed By Microsoft
Language Type JavaScript Superset
Compiler tsc
Typing Static
OOP Supported
Interfaces Yes
Generics Yes
Decorators Yes
Access Modifiers public, private, protected
Angular Language TypeScript

Next Article

➡️ 06-Angular-Bootstrap-Process-QA.md