javascript - sirven - parentesis ejemplos

Reglas para el uso de corchetes angulares en Typescript

Question

¿Cuáles son las reglas generales que dictan cuándo, dónde, cómo y por qué deben utilizarse los corchetes angulares, es decir, "<...>" , en TypeScript?

Si bien creo que entiendo muchos usos individuales de estos corchetes, me cuesta mucho ver patrones generales para su uso: a veces parecen estar antepuestos antes que a cosas, a veces después de cosas; a veces se usan para genéricos, a veces para tipos específicos; a veces aparecen donde podría haber esperado ingenuamente que se usara la sintaxis de colon.

Comprendo razonablemente bien los conceptos básicos de TypeScript: en general, estudié los tutoriales de la página de inicio de TypeScript, repasé partes significativas de la especificación de TypeScript, leí el sitio web de "Definitive TypeScript Guide" y seguí un video de "Mastering TypeScript" tutorial. En este tema en particular, también he buscado en Google y StackOverflow.

Mi problema no es tanto comprender un uso particular de los corchetes angulares. Más bien, me gustaría tener una explicación concisa pero exhaustiva / universal de lo que significan los corchetes, su sintaxis exacta, cuándo deben usarse, cuándo no deben usarse, etc.

ACTUALIZAR:

Estoy actualizando mi pregunta en respuesta a algunos comentarios para aclarar por qué estoy haciendo esta pregunta y qué es exactamente lo que estoy buscando.

Permítame ilustrar mi solicitud dando un ejemplo de algo que sí conozco las reglas generales para: llaves en JavaScript de vainilla. Las llaves de rizo siempre vienen en un par de llaves de apertura y cierre que rodean a una entidad. Esa entidad puede ser una de las dos "cosas" principales.

Primero, las llaves pueden rodear una agrupación de declaraciones en:

• El cuerpo de una función, método, constructor o generador.

• el cuerpo es una sentencia if / cláusula o de lo else cláusula,

• el cuerpo de un bucle for , for / of , for / in , while o do / while,

• el cuerpo de un try , catch o finally bloquear, o

• Un bloque anónimo de declaraciones.

En segundo lugar, las llaves también pueden rodear una lista de:

• propiedades de un objeto literal,

• constructores, propiedades y / o métodos de una declaración de class ,

• funciones y / o constantes para export o import desde un módulo,

• case s siguiendo un criterio de switch , o

• enum s.

(No se trata de si esta lista está completa o no es correcta).

Ahora imagina a alguien aprendiendo JavaScript. Hasta ahora, podría haber aprendido correctamente cómo usar llaves para rodear un bloque de declaraciones, es decir, los usos en el primer conjunto de puntos anterior. Sin embargo, es posible que ocasionalmente también haya encontrado llaves alrededor de cosas que no son un bloque de declaraciones, por ejemplo, {a:1, b:2} y se haya confundido porque el contenido de esas llaves no son declaraciones que se puedan ejecutar. O, peor aún, puede que ni siquiera pueda señalar un ejemplo que no entiende. En su lugar, solo tiene esta sensación persistente en el fondo de su mente de que el código que ha encontrado escrito por otras personas contiene llaves que se usan de formas desconocidas (aunque no puede recordar dónde). Esto hace que ella sospeche que su comprensión actual de cuándo usar llaves no esté completa. En lugar de tratar de encontrar ejemplos individuales que no entiende, solo quiere que alguien le dé la lista de "reglas" de donde usar llaves.

Entonces, una vez más, mi pregunta es la siguiente: ¿Puede alguien describirme algunos principios generales y / o reglas específicas que describan de manera exhaustiva el uso de corchetes angulares en TypeScript de la forma en que he descrito el uso de llaves en JavaScript arriba?

Answer 1

Con preguntas como esta, recomiendo leer las especificaciones , especialmente la sección de gramática. La sintaxis como < something > se usa en

1. Parámetros de tipo

   • Definido como < TypeParameterList > en la sección 3.6.1

   • Se usa con declaraciones y firmas de llamadas de clases, interfaces, funciones y más

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

2. Tipo de argumentos

   • Definido como < TypeArgumentList > en la sección 3.6.2

   • Se utiliza con referencias a tipos genéricos y llamadas a funciones genéricas.

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

     Actualización 2018-07-01: A partir de la versión 2.9, los argumentos de tipo genérico también se pueden usar en elementos JSX y plantillas etiquetadas .

      <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

3. Tipo de aserciones

   • Definido y utilizado como < Type > UnaryExpression donde UnaryExpression proviene del estándar EcmaScript en la sección 4.16

     var ingredients = {
         toppingA: new Pepperoni,
         toppingB: <Mozzarella> fridge.takeSomeCheese()
                 //^^^^^^^^^^^^ Type assertion
     };

4. Expresiones JSX (cuando está habilitado)

   • No está documentado en la especificación, pero debe seguir la sintaxis de JSX , que es básicamente una expresión como

     <JSXElementName JSXAttributes(optional)> JSXChildren(optional) </JSXElementName>

     o

     <JSXElementName JSXAttributes(optional) />

Answer 2

Se usan para expresiones múltiples, demasiado semánticamente distintas, para formular un caso de uso común sobre ellas. También depende del contexto, al igual que los corchetes. Como probablemente sepas, se utilizan paréntesis angulares en pares:

• Como una sintaxis en desuso para las aserciones de tipo
• Para especificar manualmente los parámetros de tipo genérico.
• Para declarar elementos en .tsx

Cuando no se encuentra en un archivo .tsx , los paréntesis angulares en pares son prácticamente siempre la indicación de la presencia de un parámetro de tipo genérico. Uno podría formular un sistema de expresiones como tal (que probablemente sea lo más cercano a usted):

• Cuando en el contexto de una definición de tipo, anotación de tipo, invocación de método o declaración de clase, los paréntesis angulares denotan un parámetro de tipo genérico
• Cuando se encuentra en el contexto de un elemento TSX, los corchetes angulares indican que un compilador TSX / JSX transpila un elemento