在Typescript

时间:2016-05-21 02:43:41

标签: javascript types typescript brackets

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

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

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

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

更新

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

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

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

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

  • 正文if声明/子句或else子句,

  • forfor / offor / inwhile或{{1}的正文} / do循环,

  • whiletrycatch块的正文,或

  • 匿名声明块。

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

  • 对象文字的属性,

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

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

  • import符合case条件,或

  • switch秒。

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

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

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

2 个答案:

答案 0 :(得分:33)

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

中使用< something >之类的语法
  1. 类型参数

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

    • 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 elementstagged 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 standardsection 4.16var ingredients = { toppingA: new Pepperoni, toppingB: <Mozzarella> fridge.takeSomeCheese() //^^^^^^^^^^^^ Type assertion };

      <JSXElementName JSXAttributes(optional)> JSXChildren(optional) </JSXElementName>
      
  4. JSX表达式(启用时)

    • 未在规范中记录,但应遵循the syntax of JSX,这基本上是一个表达式

      <JSXElementName JSXAttributes(optional) />
      

      {{1}}

答案 1 :(得分:1)

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

  • 作为type-assertions的弃用语法
  • 用于手动指定通用类型参数
  • 用于在.tsx
  • 中声明元素

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

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