在Typescript中使用尖括号的规则 [英] Rules for the use of angle brackets in Typescript

问题描述

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

What are the general rules that dictate when, where, how and why angle brackets, i.e. "<...>", should be used in TypeScript?

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

While I think I understand many individual uses of these brackets, I have a hard time seeing general patterns for their use: They sometimes seem to be prepended before things, sometimes appended after things; sometimes they are used for generics, sometimes for specific types; sometimes they appear where I might have naively expected the colon syntax to be used.

我对TypeScript基础知识有一个相当好的理解：一般来说，我研究过TypeScript主页教程，浏览了TypeScript规范的重要部分，阅读了Definitive TypeScript Guide网站，并按照Mastering TypeScript视频教程进行了操作。在这个特定主题上，我还搜索了Google和StackOverflow。

I have a reasonably good understanding of TypeScript basics: In general, I've studied the TypeScript home page tutorials, gone over significant portions of the TypeScript spec, read the "Definitive TypeScript Guide" web site, and followed a "Mastering TypeScript" video tutorial. On this particular topic, I've also searched Google and StackOverflow.

我的问题不是理解尖括号的任何特定用法。相反，我想对括号的含义，它们的确切语法，何时应该使用它们，什么时候不应该使用等等进行简明但详尽/通用的解释。

My issue isn't so much understanding any one particular use of angle brackets. Rather, I'd like to have a concise but exhaustive/universal explanation of what the brackets mean, their exact syntax, when they should be used, when they shouldn't be used, etc.

更新：

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

I am updating my question in response to some comments in order to clarify why I'm asking this question and what exactly I'm looking for.

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

Let me illustrate my request by giving an example of something I do know the general rules for: curly braces in vanilla JavaScript. Curly braces always come in a pair of an opening and closing brace which surround an entity. That entity can be one of two main 'things'.

首先，花括号可以围绕语句分组：

First, curly braces can surround a grouping of statements in:

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

• the body of a function, method, constructor, or generator,

正文 if statement / clause或 else 子句，

the body an if statement/clause or else clause,

的主体为，为 / ， / in ， while 或执行 / 而循环，

the body of a for, for/of, for/in, while or do/while loop,

一个的主体尝试， catch 或最后块，或

一个匿名的陈述词。

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

Second, curly braces can also surround a list of:

• 对象文字的属性，

• properties of an object literal,

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

constructors, properties, and/or methods of a class declaration,

函数和/或常量 export ed或 import ed from a module，

functions and/or constants to be exported or imported from a module,

case s遵循开关标准，或

enum s。

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

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

Now imagine someone learning JavaScript. So far, she might have learned correctly how to use curly braces to surround a block of statements, i.e. the uses in the first set of points above. However, she may have occasionally also encountered curly braces around things that are not a block of statements, e.g. {a:1, b:2} and have been confused because the contents of those curly braces aren't statements that can be executed. Or, worse, she may not even be able to point to an example she doesn't understand. Instead she just has this gnawing feeling in the back of her mind that code she has encountered written by other people contains curly braces used in unfamiliar ways (though she can't remember where). This makes her suspect that her current understanding of when to use curly braces might be incomplete. Rather than try to find individual examples she doesn't understand, she just wants someone to give her the above list of "rules" of where to use curly braces.

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

So, again, my question is the following: Can someone describe for me some general principles and/or specific rules that exhaustively describe the use of angle brackets in TypeScript the way I have described the use of curly braces in JavaScript above?

推荐答案

对于这样的问题，我建议阅读规范，尤其是语法部分。语法如< > 用于

With questions like this, I'd recommend reading the spec, especially the Grammar section. Syntax like < something > is used in

1. 类型参数

• 定义为< >第3.6.1节



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

• Defined as < TypeParameterList > in section 3.6.1

• Used with declarations and call signatures of classes, interfaces, functions and more

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> in 第3.6.2节



• 与泛型类型的引用和泛型函数的调用一起使用

• Defined as < TypeArgumentList > in section 3.6.2

• Used with references to generic types and calls to generic functions

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

更新2018-07-01：
从版本2.9开始，泛型类型参数也可用于 JSX元素和标记模板。

 <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

类型断言

• 定义并用作<输入> UnaryExpression 其中 UnaryExpression来自EcmaScript标准在第4.16节中

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

JSX表达式（启用时）

• 未在规范中记录，但应遵循 JSX的语法，它基本上是一个表达式，如

• Not documented in the spec, but should follow the the syntax of JSX, which is basically an expression like

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

或

<JSXElementName JSXAttributes(optional) />

这篇关于在Typescript中使用尖括号的规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！