Maison > interface Web > js tutoriel > le corps du texte

Passer du concept Javascript au concept Typscript doit être connu

Barbara Streisand
Libérer: 2024-11-25 19:24:15
original
326 Les gens l'ont consulté

Jumping From Javascript To Typscript Concept Should be Known

tu veux vraiment apprendre ?
sérieusement !
commençons,

Voici une liste de concepts à connaître :

1.Types et annotations de types

  • Types de base : Comprendre la différence entre une chaîne, un nombre, un booléen, tout, vide, undéfini, nul, etc.

  • Annotations de types : Apprenez à déclarer explicitement des types (par exemple, laissez age : nombre = 30 ;).

  • Inférence de types : TypeScript peut déduire des types à partir du contexte, mais il est important de comprendre quand utiliser des types explicites et quand s'appuyer sur l'inférence.

  • Types d'union : les types peuvent être une combinaison de plusieurs types (par exemple, let value : chaîne | nombre).

  • Types littéraux : types qui peuvent être des valeurs spécifiques (par exemple, laisser la direction : 'gauche' | 'droite';).

2. Interfaces et alias de type

  • Interfaces : utilisées pour définir des formes d'objets (par exemple, interface utilisateur { nom : chaîne ; âge : numéro }).
  • Alias ​​de type : vous permet de créer des types personnalisés (par exemple, type ID = string | number;).
  • Différences entre interfaces et types : Les interfaces sont extensibles, tandis que les alias de type sont plus flexibles (peuvent définir des primitives, des unions, des intersections, etc.).

3. Génériques

  • Fonctions génériques : fonctions qui peuvent fonctionner avec plusieurs types (par exemple, function Identity(arg: T): T { return arg; }).
  • Interfaces/Classes génériques : appliquez des génériques aux interfaces et aux classes (par exemple, interface Box { valeur : T; }).

4. Assertion de type et conversion

  • Assertions de type : indique à TypeScript que vous en savez plus sur le type qu'il n'en sait (par exemple, laissez value = someValue as string).
  • Assertion non nulle : Utilisez ! pour indiquer à TypeScript qu'une valeur n'est pas nulle ou indéfinie (par exemple, someVar!.doSomething()).

5. Typage structurel (Duck Typing)
Dans TypeScript, les types sont structurels, ce qui signifie que les types sont comparés en fonction de leurs propriétés et non de leurs noms. Si deux types ont la même structure, ils sont considérés comme le même type.

6. Énumérations

  • Énumérations numériques et chaînes : vous permet de définir un ensemble de constantes nommées (par exemple, enum Direction {Haut, Bas, Gauche, Droite}).
  • Const Enums : une forme d'énumération plus efficace lorsqu'aucun mappage inverse n'est nécessaire (par exemple, const enum Color { Red, Green, Blue }).

7. Tapez rétrécissement

  • Type Guards : utilisez des prédicats typeof, instanceof ou de type personnalisé pour affiner le type d'une variable.
  • Unions discriminées : combiner des types d'union avec une propriété commune (discriminateur) pour affiner les types (par exemple, tapez Circle = { kind: "circle"; radius: number };).

8. Types avancés

  • Types d'intersection : combinez plusieurs types en un seul (par exemple, tapez AdminUser = User & Admin ;).
  • Types mappés : Vous permet de transformer des propriétés en un type (par exemple, tapez ReadOnly = { readonly [P in keyof T]: T[P]; }). Types d'utilitaires : types intégrés qui simplifient les transformations de types courantes, telles que Partial, Pick, Omit, Record, etc.

9. Modules et espaces de noms

  • Modules ES : TypeScript prend en charge la syntaxe du module ES6 (par exemple, importation/exportation). Comprendre la résolution du module et la différence entre les exportations par défaut et nommées est essentiel.
  • Espaces de noms : TypeScript possède également son propre système d'espaces de noms, mais il est généralement déconseillé au profit des modules ES pour les bases de code modernes.

10. Gestion des bibliothèques JavaScript

  • DefinitelyTyped : découvrez comment installer et utiliser des définitions de types pour les bibliothèques JavaScript qui ne fournissent pas leurs propres types (par exemple, via @types/lodash).
  • Déclaration de types pour les bibliothèques tierces : Sachez comment écrire des déclarations de type personnalisées (fichiers *.d.ts) pour les bibliothèques ou les objets globaux lorsqu'aucun type n'est disponible.

11. Classes et héritage

  • Classes TypeScript : similaires aux classes JavaScript mais avec une vérification de type supplémentaire.
  • Modificateurs d'accès : les mots clés publics, privés et protégés contrôlent la visibilité des membres de la classe.
  • Lecture seule : marque les propriétés en lecture seule (par exemple, identifiant en lecture seule : numéro).
  • Classes et méthodes abstraites : les classes abstraites ne peuvent pas être instanciées directement et sont destinées à être sous-classées.

12. Async/Attendre et Promesses
TypeScript prend entièrement en charge async/await et Promises, mais l'ajout d'annotations de type peut aider à éviter des problèmes avec des types tels que Promise ou la fonction async.

13. Décorateurs
Fonctionnalité expérimentale : les décorateurs sont une syntaxe spéciale pour annoter ou modifier des classes et des membres de classe. Utile dans des frameworks comme Angular, mais toujours expérimental en TypeScript.

14. Options de vérification de type strictes

  • Mode strict : active des options de vérification de type plus strictes (par exemple, strictNullChecks, noImplicitAny).
  • tsconfig.json : découvrez comment configurer TypeScript à l'aide de ce fichier pour activer ou désactiver les options du compilateur.

15. Interopérabilité TypeScript et JavaScript

  • Travailler avec du code JavaScript : TypeScript est entièrement compatible avec JavaScript. Vous pouvez progressivement introduire TypeScript dans un projet JavaScript existant tout en continuant d'appeler JavaScript depuis TypeScript et vice versa.
  • Commentaires JSDoc : vous pouvez utiliser des commentaires de style JSDoc en JavaScript pour fournir des informations de type à TypeScript, ce qui est utile dans les bases de code mixtes JS/TS.

16. Gestion des erreurs
TypeScript aide à détecter les erreurs courantes au moment de la compilation, telles que l'accès aux propriétés sur null ou non défini. Il est important de comprendre comment utiliser try/catch dans TypeScript, ainsi que les annotations de type appropriées.

17. Configuration TypeScript (tsconfig.json)

  • Options du compilateur : découvrez comment configurer les paramètres du compilateur, y compris la résolution du module, les paramètres de rigueur et les environnements cibles.
  • Cartes sources : configurez des cartes sources pour faciliter le débogage de TypeScript dans le navigateur ou Node.js.

18. Fonctions et types d'utilitaires

  • keyof, typeof, instanceof : comprenez ces opérateurs utilitaires et comment les utiliser pour extraire et manipuler les types.
  • Signatures d'index : vous permettent de définir dynamiquement les types de clés et de valeurs pour les objets (par exemple, [key: string]: any).

19. Types conditionnels
TypeScript permet de définir des types en fonction de conditions (par exemple, tapez IsString = T extends string ? true : false;).

20. Versionnement et compatibilité TypeScript

  • Nouvelles fonctionnalités : restez à jour avec les nouvelles versions de TypeScript, car il s'agit d'un langage qui évolue rapidement. De nouvelles fonctionnalités telles que les types littéraux de modèles, les prédicats de type et une vérification de type plus stricte peuvent améliorer votre code.

En maîtrisant ces concepts spécifiques à TypeScript, vous serez en mesure d'exploiter toute la puissance de TypeScript, y compris son système de types statiques, pour améliorer la qualité du code, la maintenabilité et l'évolutivité par rapport au JavaScript simple.

vous voulez en savoir plus sur moi, écrivez simplement sallbro sur le moteur de recherche...

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal