在Typescript中使用尖括号的规则

Question

什么是规定尖括号的时间,地点,方式和原因的一般规则,即"<...>"应该在TypeScript中使用？

虽然我认为我理解这些括号的许多个人用法,但我很难看到它们的一般使用模式:它们有时似乎先于事物之前,有时候会附加在事物之后; 有时它们用于泛型,有时用于特定类型; 有时它们出现在我可能天真地期望使用冒号语法的地方.

我对TypeScript基础知识有一个相当好的理解:一般来说,我研究了TypeScript主页教程,浏览了TypeScript规范的重要部分,阅读了"Definitive TypeScript Guide"网站,并遵循了"Mastering TypeScript"视频教程.在这个特定主题上,我还搜索了Google和StackOverflow.

我的问题不是理解尖括号的任何特定用途.相反,我想对括号的含义,它们的确切语法,何时应该使用它们,什么时候不应该使用等等进行简明但详尽/通用的解释.

更新:

我正在更新我的问题以回应一些评论,以澄清为什么我问这个问题以及我究竟在寻找什么.

让我给予的东西,我的例子来说明我的要求做知道的一般规则:在香草的JavaScript花括号.花括号总是出现在一对围绕实体的开合支撑中.该实体可以是两个主要"事物"之一.

首先,花括号可以包围一组语句:

• 函数,方法,构造函数或生成器的主体,

• 身体一个if陈述/条款或else条款,

• 的主体for,for/ of,for/ in,while或do/ while循环,

• 主体的try,catch或finally块,或

• 一个匿名的陈述块.

其次,花括号也可以包含以下列表:

• 对象文字的属性,

• 构造函数,属性和/或class声明方法,

• 要从模块export编辑或import编辑的函数和/或常量,

• case遵循switch标准,或

• enum秒.

(此列表是否完整和/或正确不是重点.)

现在想象有人学习JavaScript.到目前为止,她可能已经正确地学会了如何使用花括号来包围一个语句块,即上面第一组中的用法.但是,她偶尔也会在不是语句块的事物周围遇到花括号,例如{a:1, b:2}并且因为这些花括号的内容不是可以执行的语句而感到困惑.或者更糟糕的是,她甚至无法指出一个她不理解的例子.相反,她只是在她的脑海中有这种啃咬的感觉,她遇到的其他人写的代码包含以不熟悉的方式使用的花括号(尽管她不记得在哪里).这使她怀疑她目前对何时使用花括号的理解可能不完整.她没有试图找到她不理解的个别例子,而只是希望有人给她上面的"规则"列表,其中包括使用花括号的地方.

所以,我的问题再次提出以下问题:有人可以为我描述一些一般原则和/或具体规则,这些原则和/或具体规则详尽地描述了在TypeScript中使用尖括号的方式,就像我上面描述的在JavaScript中使用花括号一样？

Answer 1

对于这样的问题,我建议阅读规范,特别是语法部分.类似的语法< something >用于

1. 类型参数

   • 定义为< TypeParameterList >在第3.6.1节

   • 与类,接口,函数等的声明和调用签名一起使用

     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 >在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元素和标记模板.

      <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来自ECMAScript标准在第4.16节

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

4. JSX表达式(启用时)

   • 没有在规范中记录,但应遵循JSX的语法,这基本上是一个表达式

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

     要么

     <JSXElementName JSXAttributes(optional) />