typescript Typescript中尖括号的使用规则

Question

提问by Andrew Willems

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

什么是决定何时、何地、如何以及为什么"<...>"应该在 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.

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

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.

我对 TypeScript 基础知识有相当好的理解：总的来说，我研究了 TypeScript 主页教程，浏览了 TypeScript 规范的重要部分，阅读了“Definitive TypeScript Guide”网站，并观看了“Mastering TypeScript”视频教程。关于这个特定主题，我还搜索了 Google 和 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'tbe used, etc.

我的问题不是太了解尖括号的任何一种特定用法。相反，我想对括号的含义、它们的确切语法、何时应该使用、何时不应该使用等进行简洁但详尽/通用的解释。

UPDATE:

更新：

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.

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

Let me illustrate my request by giving an example of something I doknow 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'.

让我说明给予的东西，我的例子我的要求做知道的一般规则：在香草的JavaScript花括号。花括号总是以一对围绕实体的左括号和右括号出现。该实体可以是两个主要“事物”之一。

First, curly braces can surround a grouping of statementsin:

首先，花括号可以将一组语句包围在：

the body of a function, method, constructor, or generator,
the body an ifstatement/clause or elseclause,
the body of a for, for/of, for/in, whileor do/whileloop,
the body of a try, catchor finallyblock, or
an anonymous block of statements.

函数、方法、构造函数或生成器的主体，
正文if语句/子句或else子句，
的主体for，for/ of，for/ in，while或do/while循环，
a 的主体try，catch或finally块，或
匿名语句块。

Second, curly braces can also surround a listof:

其次，花括号还可以包含以下列表：

properties of an object literal,
constructors, properties, and/or methods of a classdeclaration,
functions and/or constants to be exported or imported from a module,
cases following a switchcriterion, or
enums.

对象字面量的属性，
声明的构造函数、属性和/或方法class，
要从模块中export编辑或import编辑的函数和/或常量，
cases 遵循switch标准，或
enums。

(Whether or not this list is complete and/or correct is not the point.)

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

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.

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

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?

所以，再次，我的问题如下：有人可以为我描述一些一般原则和/或特定规则，它们详尽地描述了 TypeScript 中尖括号的使用，就像我在上面描述的 JavaScript 中大括号的使用一样？

Answer 1

回答by noppa

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

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

Type Parameters

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

Type Arguments

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

Update 2018-07-01:As of version 2.9, generic type arguments can also be used in JSX elementsand 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 Assertions

Defined and used as < Type > UnaryExpressionwhere UnaryExpression comes from EcmaScript standardin section 4.16

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

JSX expressions (when enabled)
- 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>
```
  or
```
<JSXElementName JSXAttributes(optional) />
```

类型参数

< TypeParameterList >在第 3.6.1 节中定义

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

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 >在第 3.6.2 节中定义

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

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

2018 年 7 月 1 日更新：从 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

类型断言

定义和使用作为< Type > UnaryExpression其中UnaryExpression来自ECMAScript标准在第4.16节

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

JSX 表达式（启用时）

规范中没有记录，但应该遵循JSX 的语法，它基本上是一个表达式

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

或者

<JSXElementName JSXAttributes(optional) />

Answer 2

回答by John Weisz

They are used for multiple, far too semantically distinct expressions for one to formulate a common use case over them. It also depends on context, much like curly brackets. As you probably know, angle brackets in pairs are used:

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

As a deprecated syntax for type-assertions
For manually specifying generic type parameters
For declaring elements in .tsx

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

When not in a .tsxfile, angle brackets in pairs are virtually always the indication of the presence of a generic type parameter. One might formulate a system of expressions as such (which is probably the closest you can get):

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

When in the context of a type definition, type annotation, method invocation, or class declaration, angle brackets denote a generic type parameter
When in the context of a TSX element, angle brackets denote an element as transpiled by a TSX/JSX compiler

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

typescript Typescript中尖括号的使用规则

提问by Andrew Willems

回答by noppa

回答by John Weisz

相关推荐

最近更新

标签

typescript Typescript中尖括号的使用规则

提问by Andrew Willems

回答by noppa

回答by John Weisz

相关推荐

将 Typescript 与 React-Redux 一起使用时出现类型错误

typescript 如何冒泡 angular2 自定义事件

typescript 既然非 beta Angular 2 被打包为@angular，angular2-polyfills 在哪里？

typescript 将 aws-sdk 与 angular2 一起使用

相关推荐

最近更新

标签