Concepts TypeScript avancés que tout développeur devrait connaître

TypeScript est un puissant sur-ensemble de JavaScript qui ajoute un typage statique et d'autres fonctionnalités pour améliorer l'expérience de développement. Bien que de nombreux développeurs connaissent les bases, la maîtrise des concepts avancés de TypeScript peut améliorer considérablement votre capacité à écrire du code robuste, maintenable et évolutif. Voici 10 concepts TypeScript avancés que tout développeur devrait connaître.

1. Types de syndicats

Les types Union permettent à une variable de contenir un type parmi plusieurs, vous donnant la flexibilité de gérer différents types de données tout en préservant la sécurité des types. C'est comme avoir un multi-outil ?️ qui peut gérer différentes tâches.

Example 1:

let value: string | number;

value = "Hello";
console.log(value); // "Hello"

value = 123;
console.log(value); // 123


Example 2:
type status = "review" | "published" | "expired";

function getJobStatus(status: status): string {
  switch (status) {
    case "review":
      return "Job is on Review";
    case "published":
      return "Job is Published";
    case "expired":
      return "Job is Expired";
    default:
      return "Unknown status";
  }
}

2. Types d'intersections

Les types d'intersection combinent plusieurs types en un seul, nécessitant qu'une variable ait toutes les propriétés des types combinés.

interface Person {
  name: string;
  age: number;
}

interface Employee {
  employeeId: number;
}

type Developer = Person & Employee;

const emp: Developer = {
  name: "Alice",
  age: 25,
  employeeId: 12345
};

console.log(emp);

Dans cet exemple, nous avons défini deux types, Personne et Employé, puis avons utilisé une intersection pour créer un type Développeur qui combine les propriétés Employé et Personne. Cela représente l'identité et le rôle d'un développeur dans l'organisation.

3. Tapez les gardes

Les gardes de type vous aident à affiner le type d'une variable dans un bloc conditionnel, garantissant ainsi la sécurité du type. Vous les considérez comme des videurs de sécurité ? dans une boîte de nuit, ne laissant entrer que les bons types.

Exemple

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

function printValue(value: string | number) {
  if (isString(value)) {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed());
  }
}

printValue("Hello"); // "HELLO"
printValue(123); // "123"

Type gardes : parce que nous avons tous besoin d'un peu de sécurité dans nos vies.

4. Types conditionnels

Les types conditionnels vous permettent de créer des types basés sur des conditions, offrant ainsi de puissantes transformations de types. C'est comme un livre de choix de votre propre aventure ?.

Exemple

type IsString<T> = T extends string ? "Yes" : "No";

type Result1 = IsString<string>; // "Yes"
type Result2 = IsString<number>; // "No"

Les types conditionnels sont incroyablement puissants, vous permettant de créer des types dynamiques et flexibles basés sur des conditions.

5. Types mappés

Les types mappés vous permettent de transformer des types existants en nouveaux en appliquant une transformation à chaque propriété.

Exemple

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

interface Todo {
  title: string;
  description: string;
}

const todo: Readonly<Todo> = {
  title: "Learn TypeScript",
  description: "Study advanced concepts"
};

// todo.title = "New Title"; // Error: Cannot assign to 'title' because it is a read-only property.


type Nullable<T> = {
  [P in keyof T]: T[P] | null;
};

interface User {
  id: number;
  name: string;
  email: string;
}

type NullableUser = Nullable<User>;

type NullableUser = {
  id: number | null;
  name: string | null;
  email: string | null;
};

// In this example, Nullable transforms each property of User to also accept null.

6. Types littéraux de modèles

Les types littéraux de modèle vous permettent de créer des types en combinant des littéraux de chaîne, ce qui rend vos définitions de type plus expressives.

Exemple

type Color = "red" | "green" | "blue";
type Brightness = "light" | "dark";

type Theme = `${Brightness}-${Color}`;

const theme1: Theme = "light-red";
const theme2: Theme = "dark-blue";

// const theme3: Theme = "bright-yellow"; // Error: Type '"bright-yellow"' is not assignable to type 'Theme'.

Les types littéraux de modèle vous permettent de définir un type de thème qui doit suivre le modèle Brightness-Color. C'est comme donner à vos types un guide de style à suivre.

7. Types récursifs

Les types récursifs sont des types qui font référence à eux-mêmes, vous permettant de modéliser des structures de données complexes comme des arbres et des listes chaînées.

Exemple

Création d'un type récursif pour une structure arborescente :

interface TreeNode {
  value: number;
  left?: TreeNode;
  right?: TreeNode;
}

const tree: TreeNode = {
  value: 1,
  left: {
    value: 2,
    left: { value: 3 },
    right: { value: 4 }
  },
  right: {
    value: 5
  }
};

Types récursifs : parce que parfois vous avez besoin de types qui durent éternellement, comme une boucle infinie (mais dans le bon sens).

Conclusion

TypeScript est un outil puissant, et la maîtrise de ces concepts avancés peut rendre votre code plus robuste, plus maintenable et tout simplement génial. En continuant à explorer ces fonctionnalités avancées, vous constaterez que votre code devient plus concis, vos définitions de types plus précises et votre flux de travail de développement global plus fluide.

Ressources supplémentaires

• Documentation TypeScript
• Référentiel GitHub TypeScript

Bon codage ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!