Règles d'utilisation des parenthèses angulaires dans Typescript

Question

Quelles sont les règles générales qui dictent quand, où, comment et pourquoi les équerres, c'est-à-dire "<...>", doit être utilisé en TypeScript?

Bien que je pense comprendre de nombreuses utilisations individuelles de ces supports, j'ai du mal à voir les modèles généraux de leur utilisation: ils semblent parfois être ajoutés avant les choses, parfois ajoutés après les choses; ils sont parfois utilisés pour des génériques, parfois pour des types spécifiques; parfois, ils apparaissent là où j'aurais pu naïvement espérer que la syntaxe du deux-points soit utilisée.

J'ai une assez bonne compréhension des bases de TypeScript: en général, j'ai étudié les didacticiels de la page d'accueil TypeScript, parcouru des parties importantes de la spécification TypeScript, lu le site Web "Definitive TypeScript Guide" et suivi une vidéo "Mastering TypeScript" Didacticiel. Sur ce sujet particulier, j'ai également recherché Google et StackOverflow.

Mon problème n'est pas tant de comprendre une utilisation particulière des équerres. Je voudrais plutôt avoir une explication concise mais exhaustive/universelle de ce que signifient les crochets, leur syntaxe exacte, quand ils doivent être utilisés, quand ils ne devraient pas être utilisé, etc.

MISE À JOUR:

Je mets à jour ma question en réponse à certains commentaires afin de clarifier pourquoi je pose cette question et ce que je recherche exactement.

Permettez-moi d'illustrer ma demande en donnant un exemple de quelque chose que je connais les règles générales pour: les accolades en JavaScript Vanilla. Les accolades bouclées viennent toujours dans une paire d'accolades d'ouverture et de fermeture qui entourent une entité. Cette entité peut être l'une des deux "choses" principales.

Tout d'abord, les accolades peuvent entourer un regroupement de déclarations dans:

le corps d'une fonction, d'une méthode, d'un constructeur ou d'un générateur,
le corps d'une instruction/clause if ou else,
le corps d'un for, for/of, for/in, while ou do/while,
le corps d'un bloc try, catch ou finally, ou
un bloc anonyme de déclarations.

Deuxièmement, les accolades peuvent également entourer une liste de:

propriétés d'un objet littéral,
constructeurs, propriétés et/ou méthodes d'une déclaration class,
fonctions et/ou constantes à export ed ou import ed à partir d'un module,
case suit un critère switch, ou
enum s.

(Que cette liste soit complète et/ou correcte n'est pas la question.)

Imaginez maintenant quelqu'un apprenant JavaScript. Jusqu'à présent, elle aurait peut-être appris correctement comment utiliser des accolades pour entourer un bloc de déclarations, c'est-à-dire les utilisations dans le premier ensemble de points ci-dessus. Cependant, elle a parfois aussi rencontré des accolades autour de choses qui ne sont pas un bloc de déclarations, par exemple {a:1, b:2} et ont été confondus car le contenu de ces accolades n'est pas une instruction qui peut être exécutée. Ou, pire encore, elle pourrait même ne pas être capable de montrer un exemple qu'elle ne comprend pas. Au lieu de cela, elle a juste ce sentiment de rongement dans le fond de son esprit que le code qu'elle a rencontré écrit par d'autres personnes contient des accolades bouclées utilisées de manière inconnue (bien qu'elle ne se souvienne pas où). Cela la fait soupçonner que sa compréhension actuelle du moment d'utiliser des accolades pourrait être incomplète. Plutôt que d'essayer de trouver des exemples individuels qu'elle ne comprend pas, elle veut juste que quelqu'un lui donne la liste ci-dessus des "règles" de l'endroit où utiliser les accolades.

Donc, encore une fois, ma question est la suivante: quelqu'un peut-il me décrire certains principes généraux et/ou règles spécifiques qui décrivent de manière exhaustive l'utilisation des crochets angulaires dans TypeScript de la manière dont j'ai décrit l'utilisation des accolades en JavaScript ci-dessus?

noppa · Accepted Answer

Avec des questions comme celle-ci, je recommande de lire la spécification , en particulier la section Grammaire. Syntaxe comme < something > est utilisé dans

Paramètres de type

Défini comme < TypeParameterList > in section 3.6.1

Utilisé avec les déclarations et les signatures d'appel des classes, interfaces, fonctions et plus

function heat<T>(food: T): T { return food; } //^^^^^ Type parameter list class Pizza<T, E extends Cheese> { toppingA: T; toppingB: E } //^^^^^^^^^^^^^^^^^^^^ Type parameter list

Arguments de type

Défini comme < TypeArgumentList > in section 3.6.2

Utilisé avec des références à des types génériques et des appels à des fonctions génériques

var pizza: Pizza<Pepperoni, Mozzarella>; //^^^^^^^^^^^^^^^^^^^^^^ Type argument list pizza = heat<{ toppingA: Pepperoni, toppingB: Mozzarella}>(ingredients) //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Type argument list

Mise à jour 2018-07-01: À partir de la version 2.9, des arguments de type générique peuvent également être utilisés dans éléments JSX et - modèles balisés .

 <MenuItem<Pizza> toppings={[Pepperoni, Mozzarella]} /> //^^^^^^^ Type argument list const ratingHtml = escapeUserInput<string | number> `Customer ${feedback.customer.username} rated this pizza with <b>${feedback.rating}</b>/10!` //^^^^^^^^^^^^^^^^ Type argument list

Assertions de type
- Défini et utilisé comme < Type > UnaryExpression où naryExpression vient du standard EcmaScript in section 4.16
```
var ingredients = { toppingA: new Pepperoni, toppingB: <Mozzarella> fridge.takeSomeCheese() //^^^^^^^^^^^^ Type assertion }; 
```
Expressions JSX (si activé)
- Non documenté dans la spécification, mais doit suivre la syntaxe de JSX , qui est fondamentalement une expression comme
```
<JSXElementName JSXAttributes(optional)> JSXChildren(optional) </JSXElementName> 
```
  ou
```
<JSXElementName JSXAttributes(optional) /> 
```

John Weisz · Answer

Ils sont utilisés pour plusieurs expressions bien trop sémantiquement distinctes pour que l'on puisse formuler un cas d'utilisation courant à leur sujet. Cela dépend également du contexte, un peu comme les accolades. Comme vous le savez probablement, des équerres par paires sont utilisées:

Comme syntaxe déconseillée pour les assertions de type
Pour spécifier manuellement les paramètres de type générique
Pour déclarer des éléments dans .tsx

Lorsqu'il n'est pas dans un .tsx fichier, les chevrons par paires sont pratiquement toujours l'indication de la présence d'un paramètre de type générique. On pourrait formuler un système d'expressions en tant que tel (qui est probablement le plus proche possible):

Dans le contexte d'une définition de type, d'une annotation de type, d'un appel de méthode ou d'une déclaration de classe, les crochets indiquent un paramètre de type générique
Dans le contexte d'un élément TSX, les crochets indiquent un élément transpilé par un compilateur TSX/JSX