TypeScript 中尖括号的使用规则答案

【问题标题】：Rules for the use of angle brackets in TypeScriptTypeScript 中尖括号的使用规则
【发布时间】：2022-01-09 03:26:35
【问题描述】：

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

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

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

【问题讨论】：

你不能举一些你不明白的尖括号用法的例子吗？ 出现在事物之后和预期使用冒号语法的地方是什么意思？尖括号 before things 可能是类型转换？ 在 thnigs 之后 与 type parameter - 定义泛型类型。
@n.turakulov，回复：之前/之后，这里是直接来自 TypeScript 规范的示例：某事之前的尖括号：var circle = <Circle> shape;，某事之后的尖括号：var x: KeyValuePair<number, string> = [10, "ten"];，仅尖括号 (即既不是之前也不是之后）：var <ClassName> = (function () {...。当我说“冒号语法”时，我的意思是有时你会看到<string>，有时你会看到... : string。感谢您提供的具体解释，但我正在寻找一套详尽（但简单明了）的规则。

标签： typescript

【解决方案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 in section 4.16

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

JSX 表达式（启用时）
- 规范中没有记录，但应该遵循the syntax of JSX，这基本上是一个类似的表达式
```
<JSXElementName JSXAttributes(optional)> JSXChildren(optional) </JSXElementName>
```
  或
```
<JSXElementName JSXAttributes(optional) />
```

【讨论】：

值得注意的是，类型断言的首选语法现在是 UnaryExpression as Type，因为前者在 .tsx 文件中不明确。
这正是我想要的。感谢您列出尖括号的用例。也感谢您将我指向规范的相关部分，尤其是语法部分。我已经开始阅读规范，但陷入了困境，没有注意到该部分如何简洁地回答了我的问题。
@AndrewWillems 很高兴为您提供帮助。请注意，我链接的规范指向它的特定版本，因此答案中的链接将来不会消失。但是，您可能应该使用newest version。
@noppa 你知道我们在哪里可以找到 TypeScript 版本 2 的规范吗？
@Ciwan 我也找不到。他们的What's new in TypeScript 文档很好地列出了新功能，但我希望他们也尽快更新doc directory。

【解决方案2】：

它们用于多个语义上截然不同的表达式，以至于一个人无法在它们之上制定一个常见的用例。它还取决于上下文，就像大括号一样。您可能知道，使用成对的尖括号：

作为类型断言的弃用语法
用于手动指定泛型类型参数
用于在.tsx 中声明元素

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

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

【讨论】：

感谢您的回复。关于你的第一句话：恕我直言，必须可以制定这样的描述。不知道你有没有看到我的问题更新。在其中，我展示了即使 JavaScript 中的花括号有多个语义不同的用例，我也能够用 4 个短句和 2 个 5 点列表相当清楚地列出所有这些用例。事实上，我相信你的其余答案是部分（但还不是全部？）给我我正在寻找的东西。（为了记录，我还不了解 .tsx 文件、React、JSX 等）