Question

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

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

我对TypeScript基础知识有一个相当好的理解：一般来说，我已经研究过TypeScript主页教程，重复了TypeScript规范的重要部分，阅读了＆＃34; Definitive TypeScript指南＆＃34;网站，并遵循＆＃34;掌握TypeScript＆＃34;视频教程。在这个特定主题上，我还搜索了Google和StackOverflow。

我的问题并非如此理解尖括号的任何特定用途。相反，我希望对括号的含义，它们的确切语法，应该何时使用，何时不应该使用时，有一个简明但详尽/通用的解释，等

更新

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

让我通过举例说明我做知道一般规则的例子来说明我的请求：vanilla JavaScript中的花括号。花括号总是出现在一对围绕实体的开合支撑中。该实体可以是两个主要的事物之一＆＃39;。

首先，大括号可以包围中的语句分组：

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

正文if声明/子句或else子句，

for，for / of，for / in，while或{{1}的正文} / do循环，

while，try或catch块的正文，或

匿名声明块。

其次，花括号也可以包围列表：

对象文字的属性，

finally声明的构造函数，属性和/或方法，

要从模块中class编辑或export的函数和/或常量，

import符合case条件，或

switch秒。

（此列表是否完整和/或正确无关紧要。）

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

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

Answer 1

对于这样的问题，我建议阅读the spec，特别是语法部分。

中使用< something >之类的语法

类型参数

在section 3.6.1

< TypeParameterList >

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

function heat<T>(food: T): T { return food; }
          //^^^^^ Type parameter list

class Pizza<T, E extends Cheese> { toppingA: T; toppingB: E }
         //^^^^^^^^^^^^^^^^^^^^ Type parameter list

类型参数

在section 3.6.2

< TypeArgumentList >

用于对泛型类型的引用和对泛型函数的调用

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

输入断言
- 定义并用作< Type > UnaryExpression UnaryExpression comes from EcmaScript standard中section 4.16的var ingredients = { toppingA: new Pepperoni, toppingB: <Mozzarella> fridge.takeSomeCheese() //^^^^^^^^^^^^ Type assertion };
```
<JSXElementName JSXAttributes(optional)> JSXChildren(optional) </JSXElementName>
```
JSX表达式（启用时）
- 未在规范中记录，但应遵循the syntax of JSX，这基本上是一个表达式
```
<JSXElementName JSXAttributes(optional) />
```
  或
```
{{1}}
```

Answer 2

它们用于多个，语义太多的表达式，以便为它们制定一个常见的用例。它还取决于上下文，就像大括号一样。您可能知道，使用成对的尖括号：

作为type-assertions的弃用语法
用于手动指定通用类型参数
用于在.tsx

当不在.tsx文件中时，成对的尖括号实际上总是表示存在泛型类型参数。有人可能会制定一个表达系统（这可能是你能得到的最接近的）：

在类型定义的上下文中，键入注释，方法调用或类声明时，尖括号表示泛型类型参数
当在TSX元素的上下文中时，尖括号表示由TSX / JSX编译器转换的元素

在Typescript

2 个答案: