Karim's Blog

Un peu de tout sur CSS, HTML, AngularJS, JavaScript, Php et le reste

Concepts TypeScript que tout développeur devrait connaître

Concepts fondamentaux

Types de base

TypeScript améliore JavaScript en ajoutant des annotations de type. Cela permet aux développeurs de spécifier le type de valeurs pouvant être attribuées aux variables, aux paramètres de fonction, etc., garantissant ainsi la sécurité des types au moment de la compilation.

let isDone: boolean = false; // Boolean type
let age: number = 30; // Number type
let name: string = "Alice"; // String type

Interfaces

Les interfaces dans TypeScript définissent la forme d'un objet. Elles constituent un moyen efficace de définir des contrats au sein de votre code et des contrats avec du code extérieur à votre projet.

interface User {
  name: string;
  age: number;
}
let user: User = { name: "Bob", age: 25 }; // An object of type User

Classes

TypeScript prend en charge les classes JavaScript modernes et ajoute des fonctionnalités supplémentaires telles que les modificateurs d'accès (public, privé et protégé).

class Animal {
  private name: string;
  constructor(theName: string) { this.name = theName; }
}
let myAnimal = new Animal("Tiger");

Énumérations

Les énumérations sont un moyen de donner des noms plus conviviaux à des ensembles de valeurs numériques. Elles rendent le code plus lisible et plus facile à gérer.

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

Concepts intermédiaires

Génériques

Les génériques vous permettent de définir des fonctions, des interfaces et des classes réutilisables qui fonctionnent avec n'importe quel type, garantissant la sécurité des types sans perte de flexibilité.

function identity<T>(arg: T): T {
  return arg;
}
let output = identity<string>("myString");

Types d'union

Les types d'union permettent à une variable de stocker différents types de valeurs, offrant ainsi plus de flexibilité dans votre code.

let mixedType: number | string;
mixedType = 20; // OK
mixedType = "twenty"; // OK

Décorateurs

Les décorateurs permettent d'ajouter à la fois des annotations et une syntaxe de métaprogrammation pour les déclarations de classe et les membres.

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}
@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
}

Concepts avancés

Espaces de noms

Les espaces de noms sont utilisés pour organiser le code et éviter la pollution de la portée globale.

namespace Shapes {
  export class Rectangle {
    constructor(public width: number, public height: number) { }
  }
}
let rect = new Shapes.Rectangle(10, 20);

Types mappés

Les types mappés vous permettent de prendre un modèle existant et de transformer chacune de ses propriétés en un nouveau type.

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

Types conditionnels

Ces types vous aident à créer des types basés sur une condition.

type Check<T> = T extends string ? "String" : "Other";
type Type = Check<number>; // Type is "Other"

Types d'index

Types d'index Avec les types d'index, vous pouvez accéder de manière dynamique aux propriétés des objets.

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

Pour approfondir votre compréhension de TypeScript, une variété de ressources sont disponibles, adaptées à différents styles d’apprentissage et niveaux d’expertise.

Pour les débutants, le site Web officiel de TypeScript (typescriptlang.org) est la principale source de référence, offrant une documentation complète, des tutoriels et un terrain de jeu pour expérimenter le code TypeScript.