在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中使用花括号一样?
答案 0 :(得分:33)
对于这样的问题,我建议阅读the spec,特别是语法部分。
中使用< something >
之类的语法
类型参数
< 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
类型参数
< 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}}
答案 1 :(得分:1)
它们用于多个,语义太多的表达式,以便为它们制定一个常见的用例。它还取决于上下文,就像大括号一样。您可能知道,使用成对的尖括号:
.tsx
当不在.tsx
文件中时,成对的尖括号实际上总是表示存在泛型类型参数。有人可能会制定一个表达系统(这可能是你能得到的最接近的):