Exemples TypeScript

Exemples de code TypeScript avec sécurité de type et démonstrations Hello World

💻 TypeScript Hello World typescript

🟢 simple ⭐⭐

Programme Hello World et exemples de syntaxe avec annotations de type

⏱️ 15 min 🏷️ typescript, programming, types
Prerequisites: Basic JavaScript concepts
// TypeScript Hello World Examples

// 1. Basic Hello World with string type annotation
const message: string = "Hello, World!";
console.log(message);

// 2. Hello World function with type annotations
function sayHello(): string {
    return "Hello, World!";
}

console.log(sayHello());

// 3. Hello World with parameter types
function greet(name: string): string {
    return `Hello, ${name}!`;
}

console.log(greet("TypeScript"));
console.log(greet("World"));

// 4. Hello World with interface
interface Greeter {
    message: string;
    greet(): string;
}

class BasicGreeter implements Greeter {
    constructor(public message: string = "Hello, World!") {}
    
    greet(): string {
        return this.message;
    }
}

const greeter: Greeter = new BasicGreeter();
console.log(greeter.greet());

// 5. Hello World with union types
type Greeting = string | number;

function displayGreeting(greeting: Greeting): void {
    if (typeof greeting === 'string') {
        console.log(greeting);
    } else {
        console.log(`Greeting number: ${greeting}`);
    }
}

displayGreeting("Hello, World!");
displayGreeting(42);

// 6. Hello World with generic types
function createGreeting<T>(value: T): T {
    return value;
}

const stringGreeting: string = createGreeting<string>("Hello, World!");
const numberGreeting: number = createGreeting<number>(123);

console.log(stringGreeting);
console.log(numberGreeting);

// 7. Hello World with optional parameters
function personalizedGreeting(name: string, enthusiastic?: boolean): string {
    if (enthusiastic) {
        return `Hello, ${name}!!!`;
    }
    return `Hello, ${name}!`;
}

console.log(personalizedGreeting("Alice"));
console.log(personalizedGreeting("Bob", true));

// 8. Hello World with array types
const greetings: string[] = ["Hello", "Hola", "Bonjour", "こんにちは"];
greetings.forEach(greeting => console.log(`${greeting}, World!`));

// 9. Hello World with tuple types
const greetingInfo: [string, string, number] = ["Hello", "World", 2024];
console.log(`${greetingInfo[0]}, ${greetingInfo[1]}! (${greetingInfo[2]})`);

// 10. Hello World with enum types
enum GreetingType {
    Formal = "Good day",
    Casual = "Hello",
    Enthusiastic = "Hey"
}

function createGreetingByType(type: GreetingType, name: string): string {
    return `${type}, ${name}!`;
}

console.log(createGreetingByType(GreetingType.Formal, "World"));
console.log(createGreetingByType(GreetingType.Casual, "Everyone"));

// Basic data types with type annotations
const integer: number = 42;
const float: number = 3.14;
const text: string = "TypeScript";
const isActive: boolean = true;
const numbers: number[] = [1, 2, 3, 4, 5];
const person: { name: string; age: number } = { name: "John", age: 30 };

console.log(`Integer: ${integer}, Type: ${typeof integer}`);
console.log(`Text: ${text}, Type: ${typeof text}`);

// Type assertion
const someValue: any = "Hello, World!";
const strLength: number = (someValue as string).length;
console.log(`String length: ${strLength}`);

// Function with return type annotation
function addNumbers(a: number, b: number): number {
    return a + b;
}

console.log(`5 + 3 = ${addNumbers(5, 3)}`);

// Void function
function logMessage(message: string): void {
    console.log(message);
}

logMessage("This is a void function");

// Never type (function that never returns)
function throwError(message: string): never {
    throw new Error(message);
}

// Type inference (TypeScript can infer types)
let inferredString = "TypeScript infers this as string";
let inferredNumber = 100;

console.log(`Inferred string: ${inferredString}`);
console.log(`Inferred number: ${inferredNumber}`);

💻 Interfaces et types TypeScript typescript

🟡 intermediate ⭐⭐⭐⭐

Interfaces TypeScript avancées, alias de types et types utilitaires

⏱️ 25 min 🏷️ typescript, types, interfaces
Prerequisites: Basic TypeScript syntax
// TypeScript Interfaces and Types Examples

// 1. Basic Interface
interface Person {
    name: string;
    age: number;
    email?: string;  // Optional property
    readonly id: number;  // Read-only property
}

const person: Person = {
    name: "Alice",
    age: 30,
    id: 1
};

// 2. Interface with methods
interface Vehicle {
    brand: string;
    model: string;
    start(): void;
    stop(): void;
}

class Car implements Vehicle {
    constructor(
        public brand: string,
        public model: string
    ) {}
    
    start(): void {
        console.log(`${this.brand} ${this.model} started`);
    }
    
    stop(): void {
        console.log(`${this.brand} ${this.model} stopped`);
    }
}

const myCar: Vehicle = new Car("Toyota", "Corolla");
myCar.start();
myCar.stop();

// 3. Interface extending
interface Animal {
    name: string;
    makeSound(): void;
}

interface Dog extends Animal {
    breed: string;
    wagTail(): void;
}

class Labrador implements Dog {
    constructor(
        public name: string,
        public breed: string = "Labrador"
    ) {}
    
    makeSound(): void {
        console.log("Woof!");
    }
    
    wagTail(): void {
        console.log("Tail wagging happily");
    }
}

const dog: Dog = new Labrador("Max");
dog.makeSound();
dog.wagTail();

// 4. Type Aliases
type ID = string | number;
type Coordinates = [number, number]; // Tuple type
type Status = "pending" | "completed" | "failed";

type User = {
    id: ID;
    name: string;
    status: Status;
    location: Coordinates;
};

const user: User = {
    id: "user123",
    name: "John Doe",
    status: "pending",
    location: [40.7128, -74.0060]
};

// 5. Generic Interfaces
interface Repository<T> {
    findById(id: string): T | null;
    save(entity: T): void;
    delete(id: string): boolean;
}

interface Product {
    id: string;
    name: string;
    price: number;
}

class ProductRepository implements Repository<Product> {
    private products: Product[] = [];
    
    findById(id: string): Product | null {
        return this.products.find(p => p.id === id) || null;
    }
    
    save(entity: Product): void {
        const existing = this.findById(entity.id);
        if (existing) {
            Object.assign(existing, entity);
        } else {
            this.products.push(entity);
        }
    }
    
    delete(id: string): boolean {
        const index = this.products.findIndex(p => p.id === id);
        if (index > -1) {
            this.products.splice(index, 1);
            return true;
        }
        return false;
    }
}

// 6. Utility Types
interface Book {
    id: string;
    title: string;
    author: string;
    price: number;
    published: boolean;
}

// Partial - makes all properties optional
type BookUpdate = Partial<Book>;

// Required - makes all properties required
type RequiredBook = Required<Book>;

// Pick - select specific properties
type BookInfo = Pick<Book, 'title' | 'author'>;

// Omit - remove specific properties
type BookWithoutPrice = Omit<Book, 'price'>;

// Record - create object type with specific keys and values
type BookCatalog = Record<string, Book>;

// 7. Function Types
type MathOperation = (a: number, b: number) => number;

const add: MathOperation = (a, b) => a + b;
const multiply: MathOperation = (a, b) => a * b;

console.log(`Add: ${add(5, 3)}`);
console.log(`Multiply: ${multiply(5, 3)}`);

// 8. Index Signatures
interface StringArray {
    [index: number]: string;
}

const names: StringArray = ["Alice", "Bob", "Charlie"];

interface Dictionary {
    [key: string]: number;
}

const ages: Dictionary = {
    "Alice": 30,
    "Bob": 25,
    "Charlie": 35
};

// 9. Mapped Types
type Optional<T> = {
    [P in keyof T]?: T[P];
};

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

type ReadonlyBook = Readonly<Book>;

// 10. Conditional Types
type NonNullable<T> = T extends null | undefined ? never : T;

type ExtractType<T, U> = T extends U ? T : never;
type ExtractString = ExtractType<string | number | boolean, string>;

// Type predicates
function isString(value: any): value is string {
    return typeof value === 'string';
}

function processValue(value: any) {
    if (isString(value)) {
        console.log(`String value: ${value.toUpperCase()}`);
    } else {
        console.log(`Non-string value: ${value}`);
    }
}

processValue("hello");
processValue(42);

// 11. Declaration Merging
interface UserSettings {
    theme: string;
}

interface UserSettings {
    notifications: boolean;
}

const settings: UserSettings = {
    theme: "dark",
    notifications: true
};

// 12. Mixed types example
type ApiResponse<T> = {
    data: T;
    status: number;
    message: string;
};

interface ApiResponseHandler<T> {
    handleResponse(response: ApiResponse<T>): void;
}

class UserApiHandler implements ApiResponseHandler<User> {
    handleResponse(response: ApiResponse<User>): void {
        console.log(`User: ${response.data.name}, Status: ${response.status}`);
    }
}

💻 Classes TypeScript et POO avancée typescript

🟡 intermediate ⭐⭐⭐⭐

Programmation orientée objet en TypeScript avec classes, héritage et décorateurs

⏱️ 30 min 🏷️ typescript, oop, classes
Prerequisites: Basic TypeScript syntax and interfaces
// TypeScript Classes and Advanced OOP Examples

// 1. Basic Class with Access Modifiers
class Employee {
    // Properties with access modifiers
    public id: number;
    private name: string;
    protected department: string;
    readonly company: string = "Tech Corp";

    constructor(id: number, name: string, department: string) {
        this.id = id;
        this.name = name;
        this.department = department;
    }

    // Public method
    public getDetails(): string {
        return `${this.name} (ID: ${this.id}) - ${this.department}`;
    }

    // Private method
    private calculateSalary(): number {
        return 50000 + (this.id * 1000);
    }

    // Protected method
    protected getDepartmentInfo(): string {
        return `Department: ${this.department}`;
    }
}

// 2. Class Inheritance
class Manager extends Employee {
    private teamSize: number;

    constructor(id: number, name: string, department: string, teamSize: number) {
        super(id, name, department);
        this.teamSize = teamSize;
    }

    public getManagerDetails(): string {
        return `${this.getDetails()} - Team Size: ${this.teamSize}`;
    }

    // Overriding method
    public getDetails(): string {
        return `${super.getDetails()} [MANAGER]`;
    }

    // Accessing protected member from parent
    public getFullInfo(): string {
        return `${this.getDetails()} - ${this.getDepartmentInfo()}`;
    }
}

const manager = new Manager(1, "Alice", "Engineering", 10);
console.log(manager.getManagerDetails());

// 3. Abstract Classes
abstract class Shape {
    constructor(protected color: string) {}

    abstract getArea(): number;
    abstract getPerimeter(): number;

    public getColor(): string {
        return this.color;
    }

    public printInfo(): void {
        console.log(`Shape color: ${this.color}`);
    }
}

class Circle extends Shape {
    constructor(
        color: string,
        private radius: number
    ) {
        super(color);
    }

    getArea(): number {
        return Math.PI * this.radius * this.radius;
    }

    getPerimeter(): number {
        return 2 * Math.PI * this.radius;
    }
}

class Rectangle extends Shape {
    constructor(
        color: string,
        private width: number,
        private height: number
    ) {
        super(color);
    }

    getArea(): number {
        return this.width * this.height;
    }

    getPerimeter(): number {
        return 2 * (this.width + this.height);
    }
}

const circle = new Circle("red", 5);
const rectangle = new Rectangle("blue", 4, 6);

// 4. Static Members
class MathHelper {
    private static PI: number = 3.14159;

    public static calculateCircleArea(radius: number): number {
        return this.PI * radius * radius;
    }

    public static calculateCircleCircumference(radius: number): number {
        return 2 * this.PI * radius;
    }

    public static getVersion(): string {
        return "1.0.0";
    }
}

console.log(`Circle area: ${MathHelper.calculateCircleArea(5)}`);
console.log(`MathHelper version: ${MathHelper.getVersion()}`);

// 5. Getters and Setters
class BankAccount {
    private _balance: number = 0;

    get balance(): number {
        return this._balance;
    }

    set balance(amount: number) {
        if (amount < 0) {
            throw new Error("Balance cannot be negative");
        }
        this._balance = amount;
    }

    public deposit(amount: number): void {
        if (amount > 0) {
            this._balance += amount;
        }
    }

    public withdraw(amount: number): void {
        if (amount > 0 && amount <= this._balance) {
            this._balance -= amount;
        }
    }
}

const account = new BankAccount();
account.balance = 1000;
console.log(`Account balance: ${account.balance}`);

// 6. Implementing Multiple Interfaces
interface Loggable {
    log(): void;
}

interface Serializable {
    serialize(): string;
}

class User implements Loggable, Serializable {
    constructor(
        public id: number,
        public name: string,
        public email: string
    ) {}

    log(): void {
        console.log(`User: ${this.name} (${this.email})`);
    }

    serialize(): string {
        return JSON.stringify({
            id: this.id,
            name: this.name,
            email: this.email
        });
    }

    static deserialize(data: string): User {
        const obj = JSON.parse(data);
        return new User(obj.id, obj.name, obj.email);
    }
}

const user = new User(1, "John Doe", "[email protected]");
user.log();
const serialized = user.serialize();
console.log(`Serialized: ${serialized}`);

// 7. Class Decorators
function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

@sealed
class SealedClass {
    constructor(public message: string) {}
}

// Property Decorator
function format(formatString: string) {
    return function (target: any, propertyKey: string) {
        let value: string;
        
        const getter = function() {
            return value;
        };
        
        const setter = function(newVal: string) {
            value = formatString.replace(/{0}/g, newVal);
        };
        
        Object.defineProperty(target, propertyKey, {
            get: getter,
            set: setter,
            enumerable: true,
            configurable: true
        });
    };
}

class GreetingService {
    @format("Hello, {0}!")
    private name: string = "";

    constructor(name: string) {
        this.name = name;
    }

    public getGreeting(): string {
        return this.name;
    }
}

const greeting = new GreetingService("World");
console.log(greeting.getGreeting()); // "Hello, World!"

// 8. Mixins
class Timestamped {
    private timestamp: number = Date.now();

    public getTimestamp(): number {
        return this.timestamp;
    }
}

class Activatable {
    private isActive: boolean = false;

    public activate(): void {
        this.isActive = true;
    }

    public deactivate(): void {
        this.isActive = false;
    }

    public getActiveStatus(): boolean {
        return this.isActive;
    }
}

// Apply mixins
interface SmartObject extends Timestamped, Activatable {}

class SmartObject implements SmartObject {
    constructor(public id: string, public name: string) {}
}

// Apply mixin functionality
Object.assign(SmartObject.prototype, Timestamped.prototype, Activatable.prototype);

const smartObj = new SmartObject("obj1", "Smart Device");
console.log(`Timestamp: ${smartObj.getTimestamp()}`);
smartObj.activate();
console.log(`Active: ${smartObj.getActiveStatus()}`);

// 9. Generic Classes
class Container<T> {
    private items: T[] = [];

    public addItem(item: T): void {
        this.items.push(item);
    }

    public removeItem(item: T): boolean {
        const index = this.items.indexOf(item);
        if (index > -1) {
            this.items.splice(index, 1);
            return true;
        }
        return false;
    }

    public getItems(): T[] {
        return [...this.items];
    }

    public findItem(predicate: (item: T) => boolean): T | undefined {
        return this.items.find(predicate);
    }
}

const stringContainer = new Container<string>();
stringContainer.addItem("Hello");
stringContainer.addItem("World");
console.log(stringContainer.getItems());

// 10. Singleton Pattern
class DatabaseConnection {
    private static instance: DatabaseConnection;
    private connection: any;

    private constructor() {
        this.connection = "Database connection established";
    }

    public static getInstance(): DatabaseConnection {
        if (!DatabaseConnection.instance) {
            DatabaseConnection.instance = new DatabaseConnection();
        }
        return DatabaseConnection.instance;
    }

    public query(sql: string): void {
        console.log(`Executing: ${sql}`);
        console.log(`Using: ${this.connection}`);
    }
}

const db1 = DatabaseConnection.getInstance();
const db2 = DatabaseConnection.getInstance();
console.log(`Same instance: ${db1 === db2}`);
db1.query("SELECT * FROM users");