What is TypeScript, and Why Does Angular Use It?

1. What is TypeScript?

TypeScript is a programming language built on top of JavaScript that adds static type checking and other language features useful for developing large applications.

It is developed and maintained by Microsoft.

The easiest way to understand it is:

JavaScript
    +
Static Types
    +
Interfaces
    +
Generics
    +
Better Compile-Time Checking
    =
TypeScript

A valid JavaScript program is generally valid TypeScript, although TypeScript can apply additional checking depending on compiler settings.

The important point is:

Browsers execute JavaScript, not TypeScript directly. TypeScript is compiled/transformed into JavaScript before the application runs in the browser.

2. Simple JavaScript vs TypeScript Example

Consider JavaScript:

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

add(10, 20);

There is no declared type for:

a
b

Someone could accidentally call:

add(10, "20");

JavaScript may produce:

1020

instead of:

30

because "20" is a string.

TypeScript

With TypeScript:

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

Correct:

add(10, 20);

Incorrect:

add(10, "20");

TypeScript can report a compile-time/type-checking error because:

Expected
number

Received
string

This is one of the main reasons TypeScript is useful for large applications.

3. Why Do We Need TypeScript?

JavaScript is flexible and powerful, but that flexibility can make large applications harder to maintain.

Imagine an enterprise application containing:

500+ components
100+ services
Many API models
Forms
Authentication
Routing
Admin screens
Thousands of functions
Multiple developers

If the expected data types are unclear, mistakes become easier to introduce.

For example:

function getArticle(id) {
}

What type is id?

number?
string?
object?
null?

TypeScript makes the contract explicit:

function getArticle(id: number): void {
}

Now developers and development tools understand what is expected.

4. Why Does Angular Use TypeScript?

Angular applications can become large and complex.

TypeScript provides features that work very well with Angular's architecture, particularly:

• Static type checking
• Classes
• Interfaces
• Generics
• Decorators
• Access modifiers
• Strong IDE/tooling support
• Better refactoring
• Better API contracts

Angular's APIs and tooling are designed around TypeScript.

For example:

@Component({
  selector: 'app-home',
  templateUrl: './home.html'
})
export class Home {

  title: string = 'Angular';

}

Here Angular uses TypeScript together with Angular concepts such as:

@Component
Class
Typed properties
Imports

5. TypeScript Compilation Flow

Suppose you write:

let age: number = 48;

The browser does not need the TypeScript type annotation.

During the build process, TypeScript/Angular tooling transforms the application into JavaScript that browsers can execute.

Conceptually:

Angular TypeScript Code
        ↓
Type Checking
        ↓
Angular Build Tooling
        ↓
JavaScript
        ↓
Browser

The type:

:number

is primarily for development and compile-time checking.

It does not become a JavaScript runtime type declaration.

6. Static Typing

Static type checking is one of TypeScript's most important features.

Example:

let name: string = 'Syed';

let age: number = 48;

let isActive: boolean = true;

Incorrect:

age = 'Forty Eight';

TypeScript reports an error because:

age expects number
       ↓
string provided

This helps identify problems before the application reaches production.

7. Type Inference

You don't always have to explicitly write the type.

For example:

let name = 'Angular';

TypeScript can infer:

name → string

Similarly:

let count = 10;

TypeScript infers:

count → number

Therefore this is often unnecessary:

let count: number = 10;

when the type is already obvious.

This feature is called type inference.

8. Important TypeScript Types

Common types include:

let name: string = 'Angular';

let count: number = 10;

let isActive: boolean = true;

let value: null = null;

Arrays:

let names: string[] = [
  'Angular',
  'ASP.NET Core'
];

Another array syntax is:

let numbers: Array<number> = [10, 20, 30];

Objects can also be typed:

let article: {
  id: number;
  title: string;
};

article = {
  id: 1,
  title: 'Angular Basics'
};

For reusable object shapes, interfaces or type aliases are often more practical.

9. Interfaces

Interfaces are extremely important in Angular applications.

An interface defines the expected shape of an object.

Example:

export interface Article {
  id: number;
  title: string;
  content: string;
  isPublished: boolean;
}

Now:

const article: Article = {
  id: 1,
  title: 'Angular',
  content: 'Angular Tutorial',
  isPublished: true
};

TypeScript checks whether the object matches the expected structure.

10. Why Interfaces Are Useful with ASP.NET Core APIs

This is especially relevant in an Angular + ASP.NET Core application.

Suppose your ASP.NET Core API returns:

{
  "id": 1,
  "title": "Angular Components",
  "isPublished": true
}

Angular can define:

export interface Article {
  id: number;
  title: string;
  isPublished: boolean;
}

Then:

ASP.NET Core DTO
       ↓
      JSON
       ↓
Angular HttpClient
       ↓
Article interface
       ↓
Component

For example:

getArticles() {
  return this.http.get<Article[]>('/api/articles');
}

Now the code knows the expected response shape is:

Article[]

This improves development-time type safety and IntelliSense.

Important

The TypeScript interface does not validate the HTTP response at runtime by itself.

If the server returns incorrect data, writing:

this.http.get<Article[]>()

doesn't magically runtime-validate the JSON.

It describes the expected TypeScript type.

11. Classes

TypeScript supports classes.

Example:

export class Product {

  id: number = 0;

  name: string = '';

  getName(): string {
    return this.name;
  }

}

Angular itself makes extensive use of classes.

For example:

@Component({
  selector: 'app-home'
})
export class Home {
}

And services:

@Injectable({
  providedIn: 'root'
})
export class ArticleService {
}

12. Access Modifiers

TypeScript supports access modifiers such as:

public
private
protected

Example:

export class ArticleService {

  private apiUrl = '/api/articles';

}

Another example:

export class Home {

  public title = 'Angular';

  private loadData() {
  }

}

If you come from C#, this concept will be very familiar.

13. TypeScript and C# Similarities

For a .NET developer, TypeScript feels more structured than plain JavaScript.

For example:

C#

public class Article
{
    public int Id { get; set; }

    public string Title { get; set; }
}

TypeScript

export interface Article {
  id: number;
  title: string;
}

They are not equivalent runtime constructs, but both can express a strongly defined development-time contract.

Conceptually:

ASP.NET Core
C#
 ↓
DTO
 ↓
JSON
 ↓
Angular
TypeScript
 ↓
Interface

14. Generics

TypeScript supports generics.

Example:

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

Usage:

getValue<number>(100);

getValue<string>('Angular');

Angular APIs frequently use generics.

A very common example is HttpClient:

this.http.get<Article[]>('/api/articles');

Here:

Article[]

describes the expected response type.

Another example:

this.http.get<Article>('/api/articles/1');

15. Decorators

Decorators are important in Angular.

You frequently see:

@Component()

@Injectable()

and in existing code:

@Input()
@Output()

Example:

@Component({
  selector: 'app-home',
  templateUrl: './home.html'
})
export class Home {
}

@Component provides Angular metadata about the class.

This is one reason TypeScript fits naturally with Angular's programming model.

16. Optional Properties

TypeScript supports optional properties using:

?

Example:

export interface Article {

  id: number;

  title: string;

  description?: string;

}

Here:

description?: string;

means the property may be absent.

Valid:

const article: Article = {
  id: 1,
  title: 'Angular'
};

17. Union Types

A variable can be allowed to contain more than one type.

Example:

let id: number | string;

Both are valid:

id = 10;

id = 'A100';

This is called a union type.

Another common example:

let article: Article | null = null;

meaning:

article can contain:

Article
   OR
null

18. any

TypeScript provides:

any

Example:

let data: any;

This largely disables useful type checking for that value.

For example:

data = 10;
data = 'Angular';
data = true;

All can be accepted.

Excessive use of any defeats one of the main reasons for using TypeScript.

Prefer specific types whenever practical.

Instead of:

getArticles(): any {
}

prefer an appropriate type, for example:

getArticles(): Observable<Article[]> {
}

when that is what the method actually returns.

19. unknown vs any

unknown can be safer when you genuinely don't know a value's type.

Example:

let value: unknown;

Before using it as a string:

if (typeof value === 'string') {

  console.log(value.toUpperCase());

}

With unknown, TypeScript forces you to narrow/check the type before performing operations that assume a specific type.

Simple difference:

any
 ↓
"Don't type-check this carefully."


unknown
 ↓
"I don't know the type yet;
check it before using it."

20. Modules and Imports

TypeScript supports ES modules.

Export:

export interface Article {
  id: number;
  title: string;
}

Import:

import { Article } from './models/article';

Angular applications rely heavily on imports.

For example:

import { Component } from '@angular/core';

import { RouterLink } from '@angular/router';

import { ArticleService } from './services/article.service';

This allows code to be organized into separate files.

21. TypeScript in an Angular Component

A simple Angular component demonstrates several TypeScript concepts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.html'
})
export class Home {

  title: string = 'Angular';

  articleCount: number = 10;

  isLoggedIn: boolean = true;

  showMessage(): void {
    console.log('Welcome');
  }

}

Here we have:

export          → Module export

class           → Class

title: string   → Typed property

number          → Numeric type

boolean         → Boolean type

:void           → Method returns no value

Angular builds on these TypeScript capabilities.

22. TypeScript in an Angular Service

Example:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ArticleService {

  constructor(private http: HttpClient) {
  }

}

TypeScript gives Angular clear type information for:

private http: HttpClient

This also works naturally with Angular's dependency-injection model.

23. TypeScript and Angular Templates

Suppose:

export class Home {

  title: string = 'Angular';

  count: number = 10;

}

Template:

<h1>{{ title }}</h1>

<p>{{ count }}</p>

Angular's tooling can use TypeScript information while checking templates.

For example, if the template refers to a property that doesn't exist:

<h1>{{ productName }}</h1>

but the component only has:

title: string = 'Angular';

Angular's template checking can report the problem during development/build.

This is a major benefit in large applications.

24. Why Angular Uses TypeScript — Main Reasons

1. Static Type Checking

TypeScript catches many errors before runtime.

let count: number = 'Angular';

Error detected during type checking.

2. Better IDE Support

Editors such as VS Code can provide:

IntelliSense
Autocomplete
Type information
Navigation
Refactoring
Error detection

3. Better Maintainability

Explicit types make large codebases easier to understand.

getArticle(id: number): Observable<Article>

provides much more information than an untyped function contract.

4. Interfaces

Angular frontend models can have clearly defined shapes:

interface Article {
  id: number;
  title: string;
}

This is especially useful when consuming APIs.

5. Classes

Angular components and services are naturally expressed using classes.

export class Home {
}

6. Decorators

Angular uses decorator-based metadata extensively:

@Component()
@Injectable()

7. Generics

Angular APIs can preserve type information.

For example:

http.get<Article[]>()

8. Refactoring

If a property, method, or type changes, TypeScript-aware tooling can help identify affected code.

This is particularly valuable in enterprise applications.

25. JavaScript vs TypeScript

Important:

TypeScript does not replace JavaScript in the browser. It produces JavaScript.

26. Does Angular Require a Separate TypeScript Installation?

When you create an Angular application through Angular CLI, TypeScript is normally included as a project development dependency.

You can see it in:

package.json

under dependencies such as:

"devDependencies": {
  "typescript": "..."
}

So normally you don't need to separately install TypeScript globally just to develop an Angular CLI project.

The project's Angular tooling manages a compatible TypeScript version.

You can check the project's versions using:

ng version

or inspect:

package.json

27. TypeScript Configuration

Angular projects contain TypeScript configuration files such as:

tsconfig.json
tsconfig.app.json
tsconfig.spec.json

The main:

tsconfig.json

contains TypeScript compiler settings.

For example:

{
  "compilerOptions": {
    "strict": true
  }
}

The setting:

strict

enables stricter type checking and helps identify potential errors.

28. TypeScript Does Not Provide Runtime Validation Automatically

This is a very important interview point.

Suppose:

interface Article {
  id: number;
  title: string;
}

and:

this.http.get<Article[]>('/api/articles');

This tells TypeScript what data your code expects.

It does not force the server's JSON to follow that interface at runtime.

Therefore:

TypeScript Interface
        ↓
Compile-time/development contract

NOT

Runtime API validation

If runtime validation of untrusted external data is required, you need runtime validation logic/library/schema.

29. Advantages of TypeScript

• Static type checking
• Better code quality
• Better IntelliSense
• Easier refactoring
• Interfaces
• Generics
• Stronger API contracts
• Better maintainability
• Good support for large teams
• Errors can be detected earlier
• Fits Angular's architecture well

30. Disadvantages

Additional Learning

Developers need to learn:

Types
Interfaces
Generics
Union types
Type narrowing
TypeScript configuration

Build Step

TypeScript needs to be transformed into JavaScript.

Type Errors Can Initially Feel Strict

For example:

let article: Article | null = null;

requires developers to properly handle the possibility of null.

However, this strictness is also one of TypeScript's major advantages.

Types Don't Exist as Runtime Validation

TypeScript can protect your source code during development, but it doesn't automatically validate external JSON at runtime.

31. Key Points

For interviews, remember:

1. TypeScript is built on JavaScript.
2. It adds a powerful static type system.
3. TypeScript code is transformed into JavaScript.
4. Browsers ultimately execute JavaScript.
5. Angular is designed around TypeScript.
6. TypeScript helps catch errors earlier.
7. It provides interfaces, generics, union types and other typing features.
8. Angular uses classes for components and services.
9. Angular uses decorators such as @Component and @Injectable.
10. TypeScript provides excellent IDE support and refactoring.
11. Interfaces are particularly useful for defining API data shapes.
12. TypeScript interfaces do not automatically perform runtime JSON validation.
13. Avoid unnecessary any.
14. unknown is safer when a value's type is genuinely unknown.
15. Angular CLI projects normally include TypeScript as a project dependency.

The easiest way to remember why Angular uses TypeScript:

                    TypeScript
                        |
       +----------------+----------------+
       |                |                |
       v                v                v
     Types          Interfaces       Generics
       |                |                |
       +----------------+----------------+
                        |
                 Better Tooling
                        |
                 Earlier Errors
                        |
                Maintainable Code
                        |
                        v
               Angular Application

32. Interview Questions and Answers

Q1. What is TypeScript?

Answer:

TypeScript is a programming language built on JavaScript that adds static type checking and features such as interfaces, generics, and richer type definitions. TypeScript is transformed into JavaScript before it runs in the browser.

Q2. Why does Angular use TypeScript?

Answer:

Angular uses TypeScript because it provides static type checking, classes, interfaces, generics, decorators, strong IDE support, and better maintainability for large applications.

Q3. Does the browser execute TypeScript directly?

Answer:

No. Angular's build tooling transforms TypeScript into JavaScript that the browser can execute.

TypeScript
    ↓
Build
    ↓
JavaScript
    ↓
Browser

Q4. What is static typing?

Answer:

Static typing means the type system checks values and operations during development/build rather than waiting for many type-related problems to appear at runtime.

let age: number = 48;

Assigning a string:

age = 'Angular';

causes a TypeScript error.

Q5. What is type inference?

Answer:

Type inference means TypeScript can determine a type without you explicitly declaring it.

let name = 'Angular';

TypeScript infers:

string

Q6. Why are interfaces useful in Angular?

Answer:

Interfaces define expected object structures.

For example:

interface Article {
  id: number;
  title: string;
}

They are particularly useful for describing data expected from backend APIs.

Q7. What is any in TypeScript?

Answer:

any largely disables TypeScript's normal type checking for that value.

let value: any;

It should generally be avoided when a more precise type can be defined.

Q8. What is the difference between any and unknown?

Answer:

any allows operations without normal type safety.

unknown represents an unknown value but requires you to check or narrow its type before using it in type-specific ways.

Therefore, unknown is generally safer for genuinely unknown data.

Q9. What are generics?

Answer:

Generics allow reusable code to work with different types while preserving type information.

Angular example:

this.http.get<Article[]>('/api/articles');

Here the expected response is typed as:

Article[]

Q10. What are decorators?

Answer:

Decorators provide metadata about classes or class members. Angular uses decorators such as:

@Component()
@Injectable()

and traditional APIs such as:

@Input()
@Output()

Q11. Does a TypeScript interface validate API JSON at runtime?

Answer:

No.

For example:

http.get<Article[]>()

describes the expected TypeScript type, but it does not automatically validate the actual HTTP response at runtime.

Q12. What is the difference between JavaScript and TypeScript?

Answer:

JavaScript is dynamically typed, while TypeScript adds static type checking and a richer type system. TypeScript is transformed into JavaScript before execution.

Interview Summary

TypeScript is a programming language built on JavaScript that adds static type checking and features such as interfaces, generics, classes, union types, and strong development tooling. Angular uses TypeScript because these features make large applications easier to develop, refactor, debug, and maintain. Angular components and services are commonly written as TypeScript classes, while decorators such as @Component provide Angular metadata. TypeScript is transformed into JavaScript because browsers ultimately execute JavaScript.