Thursday, 17 April 2025

Angular 19 | Chapter 2 | Learning TypeScript for Angular

 ðŸš€ What is TypeScript?

TypeScript = JavaScript + types. It adds static typing, interfaces, classes, and more to JavaScript.

 

✅ Essential TypeScript for Angular


1. Types (Core of TypeScript)

let name: string = 'Angular';
let age: number = 5;
let isAwesome: boolean = true;

let anything: any = 'can be anything';
let maybeString: string | null = null;

You can also let TypeScript infer types:

let framework = 'Angular'; // inferred as string

 

2. Functions

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

Optional and default parameters:

function greet(name: string = 'Guest') {
  console.log(`Hello, ${name}`);
}

Arrow functions:

const add = (a: number, b: number): number => a + b;

 

3. Interfaces & Types

Used heavily in Angular for models, services, etc.

interface User {
  id: number;
  name: string;
  email?: string; // optional
}

const user: User = {
  id: 1,
  name: 'Alice',
};

 

4. Classes

Angular uses classes for components, services, etc.

class Person {
  constructor(public name: string, private age: number) {}

greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

5. Generics (used in Angular services & observables)

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

let output = identity<string>('Hello');

 

6. Modules & Imports (used in Angular components, services, etc.)

// user.ts
export interface User {
  id: number;
  name: string;
}

// main.ts
import { User } from './user';

 

7. Enums

Used for defining named constants.

enum Status {
  Active,
  Inactive,
  Pending,
}

let userStatus: Status = Status.Active;

 

8. Type Assertions

When you know more than TypeScript.

let someValue: any = 'this is a string';
let strLength: number = (someValue as string).length;

 

🧠 Summary of TypeScript for Angular Use

You'll mostly use TypeScript for:

  • Defining interfaces for models
  • Classes for components & services
  • Decorators like @Component, @Injectable
  • Generics in things like Observable<T>
  • Strong typing for props, inputs, function arguments

No comments:

Post a Comment