This chapter explains the essential TypeScript concepts needed for Angular development, including data types, interfaces, classes, access modifiers, generics, arrow functions, and module import/export mechanisms.
1. Types, Interfaces, and Classes
Types
Types define the type of data a variable can hold.
let id: number = 101;
let name: string = "Angular";
let isActive: boolean = true;
let tags: string[] = ["web", "framework"];
Interfaces
Interfaces define the structure of an object.
interface User {
id: number;
name: string;
email: string;
}
const user: User = {
id: 1,
name: "John",
email: "john@example.com"
};
Classes
Classes are used to create objects with properties and methods.
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
getDetails() {
return `${this.name} is ${this.age} years old`;
}
}
2. Access Modifiers (public, private, protected)
Access modifiers control visibility of class properties and methods.
public
Accessible from anywhere.
class Test {
public value = 10;
}
private
Accessible only inside the same class.
class Demo {
private secret = "hidden";
}
protected
Accessible in the class and its derived subclasses.
class Base {
protected data = 5;
}
class Child extends Base {
show() {
return this.data;
}
}
3. Generics
Generics allow reusable components that work with different data types.
function identity<T>(value: T): T {
return value;
}
let num = identity<number>(10);
let str = identity<string>("hello");
Generics can also be used with classes and interfaces.
class Box<T> {
content: T;
constructor(content: T) {
this.content = content;
}
}
4. Arrow Functions
Arrow functions provide a shorter syntax compared to regular JavaScript functions.
Traditional function
function add(a: number, b: number) {
return a + b;
}
Arrow function
const add = (a: number, b: number) => a + b;
Example with array
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
Arrow functions automatically bind this, which is helpful in Angular components.
5. Modules and Imports/Exports
TypeScript organizes code using modules.
Each file is treated as a separate module.
Exporting a class
export class Logger {
log(msg: string) {
console.log(msg);
}
}
Importing a class
import { Logger } from './logger';
const log = new Logger();
log.log("Hello Angular");
Exporting multiple items
export const pi = 3.14;
export function greet() { return "Hello"; }
Default export
export default class Utility { }
Imported as:
import Utility from './utility';