TypeScript adds static typing to JavaScript. You must declare types for variables, function parameters, and return values.

Copy Codelet x: number = 10;
let name: string = "Alice";
let isActive: boolean = true;

TypeScript can infer types automatically if you initialize a variable with a value.

Copy Codelet x = 10;  // TypeScript infers x as number
let name = "Alice";  // TypeScript infers name as string

TypeScript allows variables to have multiple types using the | operator.

Copy Codelet value: number | string;
value = 10;  // Valid
value = "Hello";  // Also valid

Interfaces define the structure of objects. They are used for type-checking.

Copy Codeinterface Person {
    name: string;
    age: number;
}

const person: Person = {
    name: "Alice",
    age: 25
};

Type aliases allow you to create custom types. They are similar to interfaces but can represent any type.

Copy Codetype Point = {
    x: number;
    y: number;
};

const p: Point = { x: 10, y: 20 };

Generics allow you to create reusable components that work with multiple types.

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

let output = identity<string>("Hello");  // Output is of type string

Enums allow you to define a set of named constants. They make code more readable.

Copy Codeenum Direction {
    Up,
    Down,
    Left,
    Right
}

let dir: Direction = Direction.Up;

Function parameters can be optional or have default values.

Copy Codefunction greet(name: string, age?: number) {
    console.log(`Hello, ${name}`);
}

greet("Alice");  // age is optional

Type assertions allow you to override TypeScript's inferred type.

Copy Codelet value: any = "Hello";
let length: number = (value as string).length;

Tuples allow you to define an array with fixed types and lengths.

Copy Codelet tuple: [string, number];
tuple = ["Alice", 25];  // Valid
tuple = [10, "Alice"];  // Error

Properties marked as readonly cannot be modified after initialization.

Copy Codeinterface Person {
    readonly name: string;
    age: number;
}

const person: Person = { name: "Alice", age: 25 };
person.name = "Bob";  // Error: Cannot assign to 'name'

Decorators are a special kind of declaration that can be attached to classes, methods, or properties.

Copy Codefunction log(target: any, key: string) {
    console.log(`${key} was called`);
}

class Person {
    @log
    greet() {
        console.log("Hello!");
    }
}

Namespaces are used to group related code and avoid naming collisions.

Copy Codenamespace MathUtils {
    export function add(a: number, b: number): number {
        return a + b;
    }
}

console.log(MathUtils.add(10, 20));  // 30

Type guards allow you to narrow down the type of a variable within a conditional block.

Copy Codefunction isString(value: any): value is string {
    return typeof value === "string";
}

let value: string | number = "Hello";
if (isString(value)) {
    console.log(value.toUpperCase());  // Safe to call string methods
}

TypeScript provides built-in utility types like Partial, Pick, and Omit to manipulate types.

Copy Codeinterface Person {
    name: string;
    age: number;
}

type PartialPerson = Partial<Person>;  // All properties are optional
type NameOnly = Pick<Person, "name">;  // Only the 'name' property

TypeScript's strictNullChecks flag ensures that null and undefined are handled explicitly.

Copy Codelet x: number;
x = null;  // Error if strictNullChecks is enabled

Declaration files (.d.ts) are used to describe the shape of existing JavaScript libraries.

Copy Code// myLibrary.d.ts
declare module "myLibrary" {
    export function doSomething(): void;
}

TypeScript integrates seamlessly with React, providing type safety for props and state.

Copy Codeinterface Props {
    name: string;
    age: number;
}

const Greet: React.FC<Props> = ({ name, age }) => (
    <div>Hello, {name}! You are {age} years old.</div>
);

Copy Code// 🏷️ Explicit type declarations
let age: number = 25;
let name: string = "Alice";
let isActive: boolean = true;

// 🧩 Array types
let numbers: number[] = [1, 2, 3];
let mixed: (string | number)[] = ["text", 42];

Copy Code// 📜 Object shape definition
interface User {
    id: number;
    name: string;
    email?: string;  // Optional property
}

// 🖨️ Usage
const user: User = { id: 1, name: "John" };

Copy Code// 🔢 Named constants
enum Direction {
    Up = 'UP',
    Down = 'DOWN',
}

// 🧭 Usage
const move: Direction = Direction.Up;

Copy Code// 🤝 Combine types
type ID = string | number;
type Admin = User & { privileges: string[] };

Copy Code// 🔍 Runtime type checking
function isString(val: any): val is string {
    return typeof val === 'string';
}

// 🛡️ Safe type usage
if (isString(input)) {
    console.log(input.toUpperCase());
}

Copy Code// 🧪 Reusable type variables
function identity<T>(arg: T): T {
    return arg;
}

// 📦 Generic interfaces
interface Box<T> {
    content: T;
}

Copy Code// 🛠️ Built-in type helpers
type PartialUser = Partial<User>;
type ReadonlyUser = Readonly<User>;
type StringKeys = keyof User;

Copy Code// 🏗️ Class with modifiers
class Animal {
    private name: string;
    protected age: number;
    
    constructor(name: string) {
        this.name = name;
    }
    
    public move(): void {
        console.log("Moving");
    }
}

Copy Code// 🎀 Metadata annotations
function log(target: any, key: string) {
    console.log(`Method ${key} called`);
}

class Calculator {
    @log
    add(a: number, b: number) { return a + b; }
}

Copy Code// ⚙️ Core compiler options
{
    "compilerOptions": {
        "target": "ES2020",
        "module": "CommonJS",
        "strict": true,
        "outDir": "./dist"
    }
}

Copy Code// 🔦 Precise type control
function printId(id: string | number) {
    if (typeof id === 'string') {
        console.log(id.toUpperCase());
    } else {
        console.log(id.toFixed(2));
    }
}

Copy Code// ⚠️ Use with caution
const element = document.getElementById('root') as HTMLElement;
const value = <number>someUnknownValue;