Construire avec TypeScript : un guide basé sur Lego

TypeScript : la transition en douceur de JavaScript vers TypeScript, c'est comme mettre à niveau votre processus de construction Lego !

« Faites ce que vous pouvez, utilisez ce que vous avez » – telle est l’une de mes devises. Cette phrase reflète également une partie de la mentalité de croissance. La plupart d'entre nous, développeurs front-end ou JavaScript, avons déjà commencé ou complètement migré vers TypeScript. Mais certaines personnes peuvent encore avoir des difficultés à comprendre les concepts ou à passer de JavaScript à TypeScript. Pour résoudre ce problème, nous allons utiliser l'un de mes outils préférés : les Legos. Commençons ici : "Considérez JavaScript comme un ensemble de briques Lego de base que vous pouvez construire librement ; TypeScript est le même ensemble de briques, mais avec des instructions détaillées et des contrôles de qualité. Pour une discussion plus approfondie de TypeScript, vous pouvez lire : peut se référer à ici , ici , et à cette vidéo . Ce guide vise à montrer comment chaque concept JavaScript se traduit en TypeScript, en utilisant des analogies Lego pour vous aider à comprendre les concepts plus facilement.

Portée variable et levage : construire une pièce

Définition du concept

Portée de la variable fait référence au contexte dans lequel les variables peuvent être consultées et utilisées dans un programme. Il existe deux principaux types de périmètre : le portée locale et le portée globale. Une variable déclarée en dehors de toute fonction a une portée globale, ce qui signifie qu'elle est accessible et modifiable n'importe où dans le code. D'un autre côté, les variables déclarées à l'intérieur d'une fonction ont une portée locale et ne sont accessibles que dans cette fonction. JavaScript utilise les mots-clés var, let et const pour déclarer les variables, et chaque mot-clé a un impact différent sur la portée. Les variables déclarées avec let et const ont une portée de bloc, ce qui signifie qu'elles ne sont accessibles que dans le bloc englobant {} le plus proche. En revanche, var est limité à une fonction, ce qui le rend disponible dans toute la fonction dans laquelle il est déclaré. Une compréhension claire de la portée des variables permet d'éviter des problèmes tels que des conflits de noms de variables et des effets secondaires inattendus dans les programmes JavaScript.

Le levage est l'acte de déplacer les déclarations de variables et de fonctions vers le haut de leur portée avant que le code ne soit exécuté (phase de compilation). Cela signifie que les variables et les fonctions peuvent être utilisées avant d'être déclarées. Les déclarations de fonctions sont entièrement hissées, ce qui permet de les appeler avant même qu'elles ne soient définies dans le code. Cependant, les variables déclarées avec var sont hissées mais pas initialisées à leur valeur initiale, donc y accéder avant l'affectation entraînera undefined. Les variables déclarées avec let et const sont également hissées mais pas initialisées, ce qui donnerait ReferenceError si elles étaient accessibles avant la déclaration. Comprendre la promotion aide les développeurs à éviter les pièges courants en construisant correctement les déclarations de variables et de fonctions.

Analogie Lego

Considérez les scopes comme différentes pièces Lego :

• Portée mondiale : Tous les constructeurs peuvent accéder au salon commun des blocs de construction.
• Portée de la fonction : table de construction personnelle.
• Portée du bloc : créez une zone spécifique de la table.

Implémentation JavaScript

<code class="language-javascript">// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
    // 个人搭建桌
    var tableBricks = "仅供此搭建者使用";

    if (true) {
        // 特定区域
        let sectionBricks = "仅供此部分使用";
    }
}</code>

Évolution de TypeScript

<code class="language-typescript">// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript确保我们只使用有效的积木类型
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript阻止在此块之外使用sectionBricks
        let sectionBricks: BrickType = "rare";
    }
}

// 真实世界的例子：配置管理
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set<string>;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};</code>

Fonctions et fermetures : Instructions de montage

Définition du concept

Les fonctions sont des blocs de code réutilisables conçus pour effectuer une tâche spécifique. Cela améliore la modularité et l’efficacité du code. Ils peuvent être définis à l'aide du mot-clé function, suivi d'un nom, de crochets () et d'un bloc de code entre accolades {}. Les arguments peuvent être transmis à une fonction entre parenthèses ou accolades, qui servent d'espaces réservés pour les valeurs fournies lors de l'appel de la fonction. JavaScript prend également en charge les fonctions anonymes (sans noms) et les fonctions fléchées (offrant une syntaxe plus claire). Les fonctions peuvent utiliser l'instruction return pour renvoyer une valeur ou effectuer des opérations qui ne renvoient pas de valeur. De plus, les fonctions en JavaScript sont des objets de première classe, ce qui signifie qu'elles peuvent être affectées à des variables, passées en arguments et renvoyées par d'autres fonctions, permettant ainsi le modèle de programmation fonctionnelle.

Les fermetures sont une fonctionnalité puissante qui permet à une fonction de mémoriser et d'accéder à sa portée lexicale même si la fonction s'exécute en dehors de cette portée. Des fermetures peuvent être créées lorsqu'une fonction est définie à l'intérieur d'une fonction et fait référence à des variables dans la fonction externe. Même une fois l’exécution de la fonction externe terminée, la fonction interne peut toujours accéder à ces variables. Cette fonctionnalité est utile pour l'encapsulation des données et le maintien de l'état dans des environnements tels que les gestionnaires d'événements ou les rappels. Les fermetures prennent en charge des modèles tels que les variables privées, dans lesquels les fonctions peuvent exposer un comportement spécifique tout en masquant les détails d'implémentation.

Analogie Lego

• Les fonctions sont comme des instructions de construction.
• Les paramètres sont comme des éléments de base requis.
• La valeur de retour est comme une structure terminée.
• Une fermeture est comme un kit de construction scellé avec quelques éléments de construction inclus de manière permanente.

Implémentation JavaScript

<code class="language-javascript">function buildHouse(floors, color) {
    const foundation = "concrete";

    return function addRoof(roofStyle) {
        return `${color} house with ${floors} floors and ${roofStyle} roof on ${foundation}`;
    };
}</code>

Évolution de TypeScript

<code class="language-typescript">// 带有类型的基本函数
interface House {
    floors: number;
    color: string;
    roofStyle: string;
    foundation: string;
}

// 为我们的搭建者添加类型安全
function buildHouse(
    floors: number,
    color: string
): (roofStyle: string) => House {
    const foundation = "concrete";

    return (roofStyle: string): House => ({
        floors,
        color,
        roofStyle,
        foundation
    });
}

// 真实世界的例子：组件工厂
interface ComponentProps {
    id: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
}

function createComponent<T extends ComponentProps>(
    baseProps: T
): (additionalProps: Partial<T>) => React.FC<T> {
    return (additionalProps) => {
        // 组件实现
        return (props) => <div></div>;
    };
}</code>

Objets et prototypes : conseils de construction

Définition du concept

Les objets en JavaScript sont des structures de données de base qui servent de conteneurs pour les données et fonctionnalités associées. Ils se composent de paires clé-valeur, où chaque clé (propriété) correspond à une valeur, qui peut être n'importe quel type JavaScript valide, y compris des fonctions (méthodes). Les objets peuvent être créés de plusieurs manières :

• Objet littéral : const obj = {}
• Constructeur : new Object()
• Object.create()Méthode

Le système prototype est le mécanisme d'héritage intégré de JavaScript. Chaque objet possède un lien interne vers un autre objet, appelé son prototype. Lorsqu'il tente d'accéder à une propriété qui n'existe pas sur un objet, JavaScript la recherche automatiquement dans sa chaîne de prototypes. Cette chaîne d'objets continue jusqu'à ce qu'elle atteigne un objet avec le prototype null, généralement Object.prototype. Comprendre les prototypes est essentiel pour :

• Mettre en œuvre l'héritage
• Partage de méthodes entre instances
• Gérer l'efficacité de la mémoire
• Construire une hiérarchie d'objets

Analogie Lego

Pensez à des objets et des prototypes comme celui-ci :

• Les objets sont comme des kits LEGO dédiés avec leurs propres briques et instructions uniques.
• Un prototype est comme un modèle principal auquel plusieurs kits peuvent référencer.
• L'héritage, c'est comme avoir une suite de base à partir de laquelle des suites plus avancées peuvent être construites.
• Les propriétés sont comme des éléments de base spécifiques dans chaque kit.
• Les méthodes sont comme des conseils de construction spéciaux inclus dans chaque kit.

Implémentation JavaScript

<code class="language-javascript">// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
    // 个人搭建桌
    var tableBricks = "仅供此搭建者使用";

    if (true) {
        // 特定区域
        let sectionBricks = "仅供此部分使用";
    }
}</code>

Évolution de TypeScript

<code class="language-typescript">// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript确保我们只使用有效的积木类型
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript阻止在此块之外使用sectionBricks
        let sectionBricks: BrickType = "rare";
    }
}

// 真实世界的例子：配置管理
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set<string>;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};</code>

Programmation asynchrone : constituer une équipe

Définition du concept

Fonctions et programmation asynchrones

Les fonctions asynchrones sont un type de fonction spécial en JavaScript qui offre un moyen élégant de gérer les opérations asynchrones. Lorsqu'elles sont déclarées avec le mot-clé async, ces fonctions renvoient automatiquement une promesse et permettent l'utilisation du mot-clé await dans leur corps. L'opérateur await suspend l'exécution d'une fonction jusqu'à ce que la promesse soit résolue ou rejetée, permettant d'écrire du code asynchrone dans un style plus synchrone et plus lisible. Cette syntaxe réduit efficacement la complexité des rappels et élimine le besoin de chaînes de promesses imbriquées. Par exemple, dans async function fetchData() { const response = await fetch(url); }, la fonction attend la fin de l'opération fetch avant de poursuivre l'exécution, ce qui rend le comportement du code plus prévisible tout en garantissant que le thread principal reste débloqué. Ce modèle est particulièrement utile lorsqu'il s'agit de plusieurs opérations asynchrones qui dépendent les unes des autres, car il permet aux développeurs d'écrire du code qui exprime clairement l'ordre des opérations sans sacrifier les performances.

Promesse

La promesse représente une valeur qui peut être disponible maintenant, disponible dans le futur ou jamais disponible. Il s'agit d'un objet avec trois états possibles : En attente, Terminé ou Rejeté. Il est utilisé pour gérer les opérations asynchrones. Les promesses ont des méthodes telles que .then(), .catch() et .finally() pour enchaîner les actions en fonction du résultat. Cela en fait une alternative puissante aux rappels imbriqués, améliorant la lisibilité du code et la gestion des erreurs.

Analogie Lego

• Les fonctions asynchrones sont comme des membres d'une équipe travaillant sur différentes parties.
• La promesse est comme un accord pour livrer la pièce terminée.

Implémentation JavaScript

<code class="language-javascript">// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
    // 个人搭建桌
    var tableBricks = "仅供此搭建者使用";

    if (true) {
        // 特定区域
        let sectionBricks = "仅供此部分使用";
    }
}</code>

Évolution de TypeScript

<code class="language-typescript">// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript确保我们只使用有效的积木类型
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript阻止在此块之外使用sectionBricks
        let sectionBricks: BrickType = "rare";
    }
}

// 真实世界的例子：配置管理
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set<string>;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};</code>

Fonctionnalités modernes : techniques de construction avancées

Définition du concept

Déconstruction

C'est un moyen intéressant d'extraire les valeurs d'un tableau ou les propriétés d'un objet dans différentes variables. La déstructuration de tableaux utilise des crochets [], tandis que la déstructuration d'objets utilise des accolades {}. Cette syntaxe réduit le besoin de code en double en décompressant les valeurs directement dans des variables, ce qui facilite la gestion des structures de données complexes. Par exemple, const [a, b] = [1, 2] attribue 1 à a et 2 à b, tandis que const { name } = person extrait l'attribut name de l'objet personne.

Développer l'opérateur

L'opérateur de spread est représenté par trois points (...). Il permet d'étendre des objets itérables tels que des tableaux ou des objets lorsque plusieurs éléments ou paires clé-valeur sont requis. Il peut être utilisé pour copier, combiner ou transmettre des éléments de tableau comme arguments de fonction. Par exemple, const arr = [1, 2, ...anotherArray].

Chaîne en option

Les chaînes facultatives sont représentées par ?.. Il fournit un moyen sûr d'accéder aux propriétés d'objets profondément imbriquées sans provoquer d'erreurs lorsque la propriété est indéfinie ou nulle. Si la référence est nulle, elle court-circuite et renvoie immédiatement undéfini. Par exemple, user?.address?.street vérifie si l'utilisateur et l'adresse existent avant d'accéder à la rue. Cette syntaxe évite les erreurs d'exécution et rend le travail avec des structures de données imbriquées plus propre et moins sujet aux erreurs, en particulier dans les API ou les données qui dépendent de la saisie de l'utilisateur.

Analogie Lego

• La déconstruction, c'est comme trier des blocs de construction dans des conteneurs.
• L'opérateur de propagation revient à copier des blocs de construction entre des suites.
• Le chaînage facultatif revient à vérifier si un bloc existe avant de l'utiliser.

Implémentation JavaScript

<code class="language-javascript">function buildHouse(floors, color) {
    const foundation = "concrete";

    return function addRoof(roofStyle) {
        return `${color} house with ${floors} floors and ${roofStyle} roof on ${foundation}`;
    };
}</code>

Évolution de TypeScript

<code class="language-typescript">// 带有类型的基本函数
interface House {
    floors: number;
    color: string;
    roofStyle: string;
    foundation: string;
}

// 为我们的搭建者添加类型安全
function buildHouse(
    floors: number,
    color: string
): (roofStyle: string) => House {
    const foundation = "concrete";

    return (roofStyle: string): House => ({
        floors,
        color,
        roofStyle,
        foundation
    });
}

// 真实世界的例子：组件工厂
interface ComponentProps {
    id: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
}

function createComponent<T extends ComponentProps>(
    baseProps: T
): (additionalProps: Partial<T>) => React.FC<T> {
    return (additionalProps) => {
        // 组件实现
        return (props) => <div></div>;
    };
}</code>

Résumé

La transition de JavaScript vers TypeScript, c'est comme mettre à niveau votre processus de construction Lego :

1. JavaScript (construction de base) :

   • Construction de forme libre
   • Utilisation flexible des éléments de base
   • Détection des erreurs d'exécution

2. TypeScript (construit par des professionnels) :

   • Instructions détaillées et spécifiques
   • Vérification de la compatibilité des briques
   • Prévention des erreurs avant la construction

Conseils clés de transition :

1. Commencez par les annotations de type de base.
2. Ajoutez progressivement des interfaces et des définitions de types.
3. Utilisez le compilateur pour détecter les erreurs plus tôt.
4. Utilisez l'inférence de type autant que possible.
5. Une vérification stricte des valeurs nulles et d'autres options du compilateur sont progressivement ajoutées.

Rappelez-vous : TypeScript s'appuie sur vos connaissances JavaScript, ajoutant sécurité et clarté, plutôt que de modifier le processus de construction fondamental. Cela dit, mon conseil est toujours... apprenez d'abord JavaScript, puis apprenez TypeScript.

Références

Récupéré le 12 janvier 2025 sur
• https://www.php.cn/link/84b184211c5d929d9435a371eb505cad Mozilla (s.d.). Variables — JavaScript
Récupéré le 14 janvier 2025.
• https://www.php.cn/link/646e69d6e105d351e4e31a2e02a69b0e

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!