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
// 全局搭建房间 const globalBricks = "每个人都可以使用这些"; function buildSection() { // 个人搭建桌 var tableBricks = "仅供此搭建者使用"; if (true) { // 特定区域 let sectionBricks = "仅供此部分使用"; } }
Évolution de 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"]) };
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
function buildHouse(floors, color) { const foundation = "concrete"; return function addRoof(roofStyle) { return `${color} house with ${floors} floors and ${roofStyle} roof on ${foundation}`; }; }
Évolution de 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>; }; }
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
// 全局搭建房间 const globalBricks = "每个人都可以使用这些"; function buildSection() { // 个人搭建桌 var tableBricks = "仅供此搭建者使用"; if (true) { // 特定区域 let sectionBricks = "仅供此部分使用"; } }
Évolution de 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"]) };
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
// 全局搭建房间 const globalBricks = "每个人都可以使用这些"; function buildSection() { // 个人搭建桌 var tableBricks = "仅供此搭建者使用"; if (true) { // 特定区域 let sectionBricks = "仅供此部分使用"; } }
Évolution de 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"]) };
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
function buildHouse(floors, color) { const foundation = "concrete"; return function addRoof(roofStyle) { return `${color} house with ${floors} floors and ${roofStyle} roof on ${foundation}`; }; }
Évolution de 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>; }; }
Résumé
La transition de JavaScript vers TypeScript, c'est comme mettre à niveau votre processus de construction Lego :
-
JavaScript (construction de base) :
- Construction de forme libre
- Utilisation flexible des éléments de base
- Détection des erreurs d'exécution
-
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 :
- Commencez par les annotations de type de base.
- Ajoutez progressivement des interfaces et des définitions de types.
- Utilisez le compilateur pour détecter les erreurs plus tôt.
- Utilisez l'inférence de type autant que possible.
- 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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds











Python convient plus aux débutants, avec une courbe d'apprentissage en douceur et une syntaxe concise; JavaScript convient au développement frontal, avec une courbe d'apprentissage abrupte et une syntaxe flexible. 1. La syntaxe Python est intuitive et adaptée à la science des données et au développement back-end. 2. JavaScript est flexible et largement utilisé dans la programmation frontale et côté serveur.

Le passage de C / C à JavaScript nécessite de s'adapter à la frappe dynamique, à la collecte des ordures et à la programmation asynchrone. 1) C / C est un langage dactylographié statiquement qui nécessite une gestion manuelle de la mémoire, tandis que JavaScript est dynamiquement typé et que la collecte des déchets est automatiquement traitée. 2) C / C doit être compilé en code machine, tandis que JavaScript est une langue interprétée. 3) JavaScript introduit des concepts tels que les fermetures, les chaînes de prototypes et la promesse, ce qui améliore la flexibilité et les capacités de programmation asynchrones.

Les principales utilisations de JavaScript dans le développement Web incluent l'interaction client, la vérification du formulaire et la communication asynchrone. 1) Mise à jour du contenu dynamique et interaction utilisateur via les opérations DOM; 2) La vérification du client est effectuée avant que l'utilisateur ne soumette les données pour améliorer l'expérience utilisateur; 3) La communication de rafraîchissement avec le serveur est réalisée via la technologie AJAX.

L'application de JavaScript dans le monde réel comprend un développement frontal et back-end. 1) Afficher les applications frontales en créant une application de liste TODO, impliquant les opérations DOM et le traitement des événements. 2) Construisez RestulAPI via Node.js et Express pour démontrer les applications back-end.

Comprendre le fonctionnement du moteur JavaScript en interne est important pour les développeurs car il aide à écrire du code plus efficace et à comprendre les goulots d'étranglement des performances et les stratégies d'optimisation. 1) Le flux de travail du moteur comprend trois étapes: analyse, compilation et exécution; 2) Pendant le processus d'exécution, le moteur effectuera une optimisation dynamique, comme le cache en ligne et les classes cachées; 3) Les meilleures pratiques comprennent l'évitement des variables globales, l'optimisation des boucles, l'utilisation de const et de locations et d'éviter une utilisation excessive des fermetures.

Python et JavaScript ont leurs propres avantages et inconvénients en termes de communauté, de bibliothèques et de ressources. 1) La communauté Python est amicale et adaptée aux débutants, mais les ressources de développement frontal ne sont pas aussi riches que JavaScript. 2) Python est puissant dans les bibliothèques de science des données et d'apprentissage automatique, tandis que JavaScript est meilleur dans les bibliothèques et les cadres de développement frontaux. 3) Les deux ont des ressources d'apprentissage riches, mais Python convient pour commencer par des documents officiels, tandis que JavaScript est meilleur avec MDNWEBDOCS. Le choix doit être basé sur les besoins du projet et les intérêts personnels.

Les choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.

C et C jouent un rôle essentiel dans le moteur JavaScript, principalement utilisé pour implémenter des interprètes et des compilateurs JIT. 1) C est utilisé pour analyser le code source JavaScript et générer une arborescence de syntaxe abstraite. 2) C est responsable de la génération et de l'exécution de bytecode. 3) C met en œuvre le compilateur JIT, optimise et compile le code de point chaud à l'exécution et améliore considérablement l'efficacité d'exécution de JavaScript.
