Javascript Typescript中尖括号的使用规则

在TypeScript中何时、何地、如何以及为什么使用尖括号（即

“

）的一般规则是什么？

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

我对TypeScript的基础知识有相当好的理解：一般来说，我学习了TypeScript主页教程，阅读了TypeScript规范的重要部分，阅读了“权威TypeScript指南”网站，并学习了“掌握TypeScript”视频教程。在这个特定的主题上，我还搜索了Google和StackOverflow

我的问题不是太了解尖括号的任何一种特殊用法。相反，我想对括号的含义、确切语法、应该使用的时间、不应该使用的时间等有一个简明但详尽/普遍的解释

更新：

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

让我举一个例子来说明我的请求，我确实知道它的一般规则：香草JavaScript中的花括号。花括号总是在一对围绕实体的开括号和闭括号中出现。该实体可以是两个主要“事物”之一

首先，大括号可以围绕以下语句的分组：

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

• 正文是一个

  if

  语句/子句或

  else

  子句

• 用于的

  ，
  用于
  的

  /

  ，
  用于
  中的

  /

  ，
  while
  或
  do
  /
  while
  循环
  

• try

  、

  catch

  或

  finally

  块的主体，或

• 匿名语句块

其次，大括号还可以围绕以下内容的列表：

• 对象文字的属性

• 类

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

• 要从模块导出或导入的函数和/或常量

• 案例

  s遵循

  开关

  标准，或

• enum

  s

（此列表是否完整和/或正确不是重点。）

现在想象有人在学习JavaScript。到目前为止，她可能已经正确地学会了如何使用大括号来包围语句块，即上面第一组要点中的用法。然而，她可能偶尔也会在不是语句块的事物周围遇到大括号，例如，

{a:1，b:2}

，她会感到困惑，因为这些大括号的内容不是可以执行的语句。或者，更糟糕的是，她甚至可能无法举出一个她不理解的例子。相反，她内心深处有一种痛苦的感觉，她遇到的其他人编写的代码中包含了以不熟悉的方式使用的花括号（尽管她不记得在哪里）。这使她怀疑，她目前对何时使用花括号的理解可能不完整。与其试图找出她不懂的个别例子，她只是希望有人给她上面列出的使用花括号的“规则”

---

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

它们用于多个，在语义上太过不同的表达式，人们无法对其制定一个通用用例。它还取决于上下文，就像花括号一样。您可能知道，使用的是成对的尖括号：

• 作为类型断言的不推荐语法
• 用于手动指定泛型类型参数
• 用于在

  .tsx

当不在

.tsx

文件中时，成对的尖括号实际上总是表示存在泛型类型参数。你可以这样表述一个表达式系统（这可能是你能得到的最接近的）：

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

---

对于这样的问题，我建议阅读，尤其是语法部分。类似于
的语法用于
• 类型参数
  • 在中定义为

  • 用于类、接口、函数等的声明和调用签名

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

    功能热（食物：T）：T{返回食物；}
    //^^^^^类型参数列表
    班级比萨饼{toppingA:T；toppingB:E}
    //^^^^^^^^^^^^^^^^^^^^类型参数列表
    

• 类型参数
  • 在中定义为

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

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

    var比萨饼：比萨饼；
    //^^^^^^^^^^^^^^^^^^^^^^类型参数列表
    比萨饼=热（配料）
    //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^类型参数列表
    

    更新2018-07-01: 从2.9版开始，泛型类型参数也可以用于

     <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
    

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

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

    <JSXElementName JSXAttributes(optional) />