typescript - TypeScript 中尖括号的使用规则

Question

规定何时、何地、如何以及为什么使用尖括号的一般规则是什么，即 <...> , 应该在 TypeScript 中使用？

虽然我认为我理解这些括号的许多单独用途，但我很难看到它们的一般使用模式:它们有时似乎放在事物之前，有时附加在事物之后；有时它们用于泛型，有时用于特定类型；有时它们出现在我可能期望使用冒号语法的地方。

我想对括号的含义、它们的确切语法、何时应该使用它们、何时不应该使用等有一个简洁但详尽/通用的解释。

Answer 1

对于这样的问题，我建议阅读 the spec ，尤其是语法部分。语法类似于 < something >用于

1. 类型参数

   • 定义为 < TypeParameterList >在 section 3.6.1

   • 与类、接口(interface)、函数等的声明和调用签名一起使用

     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. 类型参数

   • 定义为 < TypeArgumentList >在 section 3.6.2

   • 与对泛型类型的引用和对泛型函数的调用一起使用

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

     2018-07-01 更新: 从 2.9 版开始，泛型类型参数也可以在 JSX elements 中使用和 tagged templates .

      <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. 类型断言

   • 定义并用作 < Type > UnaryExpression其中 UnaryExpression comes from EcmaScript standard在 section 4.16

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

4. JSX 表达式(启用时)

   • 规范中没有记录，但应该遵循 the syntax of JSX , 这基本上是一个类似的表达式

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

     或

     <JSXElementName JSXAttributes(optional) />