pdf打字机功能_打字稿4 0和更多中有什么新功能

最新推荐文章于 2024-11-05 15:28:12 发布

郝ren

最新推荐文章于 2024-11-05 15:28:12 发布

阅读量156

点赞数

文章标签： python java javascript ViewUI

原文链接：https://itnext.io/what-is-new-in-typescript-4-0-and-more-6c5fa72fa1db

版权

pdf打字机功能

Whether you are using Typescript in 2020 or not, there is one undeniable fact and that is that the language is growing steadily and evolving fast, bringing more convenience and solid ground for our apps to grow and scale, without having to sacrifice from their maintainability. At the time this article is written the language has 12,125,535 weekly downloads from npmjs.com. To give you some perspective over those numbers React has 7,671,193 weekly downloads.

无论您是否在2020年使用Typescript，都有一个不可否认的事实，那就是该语言正在稳步增长且发展Swift，为我们的应用增长和扩展提供了更多便利和坚实的基础，而不必牺牲其可维护性。在撰写本文时，该语言每周从npmjs.com下载12125535 。为了给您一些了解，React每周有7,671,193个下载。

Moreover the yearly survey of Stack Overflow about the most beloved languages shows that this year Typescript grows up with one position, replacing Python and taking over the silver medal, giving way only to Rust in this category. Again for comparison purposes in the same survey JavaScript takes the 10th position this year.

此外，针对最受喜爱的语言的Stack Overflow年度调查显示，今年Typescript成长为一个职位，取代了Python并获得了银牌，仅让Rust成为了这一类。在同一次调查中，出于比较目的，JavaScript再次在今年排名第十。

I hope that if you are still wondering if you should go and dig deeper into Typescript, these few lines already convinced you into it.Enough small talk, let me give you an overview of what you can expect from this article:

我希望如果您仍然想知道是否应该进一步深入研究Typescript，以下几行内容已经使您深信不疑：闲聊无几，让我概述一下您对本文的期望：

What is new and upcoming in the language.
语言中的新内容和即将发布的内容。
A few examples of helpful patterns and utilities from the recent past, that might not be that well known but sure enough, very handy.
近期的一些有用模式和实用程序的示例可能并不为人所熟知，但可以肯定，非常方便。

让我们开始吧，Typescript有什么新功能？ (Let’s get started, what is new in Typescript?)

Lately, there is a lot going on in the Typescript land. Just a few days back the Typescript homepage got a new fresher look with more extensive and better-structured documentation, updated TS playground, as well as (my favourite part) dedicated section for all the flags that you can use in your tsconfig file with detailed explanation and examples reference you can find here.

最近，打字稿领域发生了很多事情。几天前，Typescript 主页有了新的面貌，具有更广泛，结构更好的文档，更新的TS游乐场以及(我最喜欢的部分)专用部分，您可以在tsconfig文件中使用的所有标志都带有详细信息。您可以在此处找到说明和示例参考。

If you are using Typescript, I would strongly recommend to take a few minutes and get yourself familiar with the new website. If you are thinking about whether or not to start out with the language that is an even better reason to take a quick look at the docs.

如果您使用的是Typescript，我强烈建议您花几分钟时间，以熟悉新网站。如果您正在考虑是否要开始使用该语言，那是快速浏览文档的更好理由。

Apart from the polished website, the release candidate of version 4.0 was announced as well. The full list of new features and additions you can find here. I will try to cover the most interesting parts of it in the next few lines.

除了完善的网站外，还宣布了4.0版的候选版本。您可以在此处找到新功能和附加功能的完整列表。在接下来的几行中，我将尝试涵盖其中最有趣的部分。

元组不再必须怪异且繁琐地键入 (Tuples no longer have to be weird and cumbersome to type)

Tuples can be represented with a generic element that can now be spread and this is way more convenient to type because we no longer need to know the actual type structure in advance.

元组可以用现在可以扩展的通用元素表示，这使键入更为方便，因为我们不再需要提前知道实际的类型结构。

This will be a valid syntax:

这将是有效的语法：

const returnTuple = (arg: Array<unknown>):[string, ...T]

Moreover, we can now spread elements and place them anywhere in the tuple for example:

此外，我们现在可以散布元素并将其放置在元组中的任何位置，例如：

const returnTuple = (arg: Array<unknown>):[...T, string, ...R]

or in other words the element to spread doesn’t have to be in the last position anymore. Before this addition, if we tried to spread an element that was not last in the tuple, we would see this compile error message

换句话说，要散布的元素不必再位于最后一个位置了。在此添加之前，如果我们尝试传播不在元组中最后一个元素，则会看到此编译错误消息

A rest element must be last in a tuple type.

Another great addition to the tuple type experience is that we can now label tuple elements on every position. One thing to keep in mind here is that if we decide to attach a label to a tuple element, then all members of the tuple should have labels as well.

元组类型体验的另一个重要补充是，我们现在可以在每个位置上标记元组元素。这里要记住的一件事是，如果我们决定将标签附加到元组元素，则该元组的所有成员也应具有标签。

type UserInput = [email: string, password: string]

With Typescript 4.0 are coming a few nice text editor improvements with a focus on VS Code. Here is a complete list of the additions that are coming out with the new version. The one that caught my eye in particular is the refactoring option for optional chaining, a rather new addition to Typescript as well.

随着Typescript 4.0的到来，文本编辑器有了一些不错的改进，重点是VS Code。这是新版本随附的新增功能的完整列表。特别引起我注意的是可选链的重构选项，这也是Typescript的一个相当新的功能。

This example comes straight from Typescript docs:

此示例直接来自Typescript文档：

Cool right? 😊 For another basket of VS Code goodies check out my article:

酷吧？ 😊有关VS Code的其他东西，请查看我的文章：

您之前承诺的那些有用的实用程序和模式如何？ (What about those helpful utilities and patterns you promised earlier ?)

Apart from the new and upcoming improvements in the language, let me share some utility type helpers and patterns that you might find interesting and useful.

除了对语言的新的和即将到来的改进之外，让我分享一些实用程序类型的帮助程序和模式，您可能会发现它们有趣且有用。

`Record<Keys,Type>` (`Record<Keys,Type>`)

Constructs a type with a set of properties Keys of type Type. This utility can be used to map the properties of a type to another type.

构造具有类型的属性类型Type Keys 。该实用程序可用于将一个类型的属性映射到另一个类型。

Or in other words, the Record utility type is especially useful when we want to type more strictly the keys in any object like data structure.

换句话说，当我们想更严格地在任何对象(如数据结构)中键入键时，Record实用程序类型特别有用。

Here is a simple example of how we may take advantage of it:

这是我们如何利用它的简单示例：

Image for post — Record Type simple example

And of course we can take advantage of the second parameter in Record utility to expand further our type signature if necessary:

当然，如果需要，我们可以利用Record实用程序中的第二个参数进一步扩展类型签名：

部分<类型> (Partial<Type>)

Constructs a type with all properties of Type set to optional. This utility will return a type that represents all subsets of a given type.

构造一个类型，将Type所有属性设置为可选。该实用程序将返回一个表示给定类型的所有子集的类型。

Very useful when you deal with dynamic data and the response contains partial information from a type dataset that you expect or you just want to use a given type partially (as the name of the utility suggests). Here is an example to showcase the second scenario:

当您处理动态数据并且响应包含您期望的类型数据集的部分信息，或者您只想部分使用给定类型时(如实用程序的名称所示)，此功能非常有用。这是展示第二种情况的示例：

In this example, we have a UserDataType interface which holds the treeproperties — name, email, and password. Next we assign the interface to the argument that is expected from the getUser function.Usually, if we omit the use of Partial, the Typescript compiler will complain that we are not passing enough properties, but since we are taking advantage of the Partial<Type> type utility Typescript is happy and thus we are as well.

在此示例中，我们有一个UserDataType接口，其中包含树属性-名称，电子邮件和密码。接下来，我们将接口分配给getUser函数期望的参数。通常，如果我们省略Partial的使用，Typescript编译器会抱怨我们没有传递足够的属性，但是由于我们利用了Partial <Type >类型实用程序Typescript很高兴，因此我们也很高兴。

Another approach to this use case would be to transform the UserDataType with yet another utility type that is available globally within Typescript.

此用例的另一种方法是用Typescript全局可用的另一种实用程序类型转换UserDataType。

`Pick<Type, Keys>` (`Pick<Type, Keys>`)

Constructs a type by picking the set of properties Keys from Type.

通过从Type选择属性Keys的集合来构造Type 。

Using this feature provided by the language, our earlier example will look like this:

使用该语言提供的此功能，我们之前的示例将如下所示：

Here we are defining a new type UserPublicDataType which we now use to define the shape of the user argument data type.

在这里，我们定义了一个新的UserPublicDataType类型，我们现在使用它来定义用户参数数据类型的形状。

Another very similar approach we might take to fulfil the type needs of the variable that we are passing to the user argument is with the utility type:

我们可以采用另一种非常相似的方法来满足传递给用户参数的变量的类型需求：实用程序类型：

`Omit<Type, Keys>` (`Omit<Type, Keys>`)

Constructs a type by picking all properties from Type and then removing Keys.

通过从Type选择所有属性，然后删除Keys构造一个类型。

There are more utility helpers that are available to make our life easier to transform and shape our data types.Checkout out the docs and find out more if you are interested here.

还有更多实用程序帮助程序可以使我们的生活更轻松地转换和塑造我们的数据类型。请查看文档，并在此处查找更多内容。

In the last section of this article i want to highlight a particularly smart way that Typescript can detect and pickup the correct type structure from type guard check.

在本文的最后一节中，我想强调一种特别聪明的方式，即Typescript可以从类型保护检查中检测并获取正确的类型结构。

类型防护 (Type Guards)

A type guard is some expression that performs a runtime check that guarantees the type in some scope.

类型防护是一个表达式，它执行运行时检查以确保该类型在一定范围内。

Usually type guards are being used within a predicate expression to help us determine whether or not our expression meets a certain criteria.There are a few different type of guard checks that are available for us out of the box with Typescript, find about all of them here.

通常在谓词表达式中使用类型保护措施来帮助我们确定表达式是否满足特定条件。Typescript提供了几种不同类型的保护措施检查，可与我们一起使用，找到所有它们在这里。

The example that will follow will hopefully clear the waters around what exactly is a type guard and how we may take advantage of this pattern.

后面的示例有望清除究竟是什么类型防护以及如何利用这种模式的麻烦。

Let’s take it step by step this time to make everything dead simple.

这次让我们逐步进行，使所有事情变得简单。

First let’s assume that we have to work with two sets of data types that are really close to each other, but yet we need a way to differentiate between them.

首先，我们假设必须使用两组非常接近的数据类型，但是我们需要一种区分它们的方法。

Let’s imagine also that we are fetching a data from an external source,and for some reason the data set could be either of type User or type Person.After we have fetched the data we need to pass it down to a child component that have to print out the data received.

还要想象一下，我们正在从一个外部源获取数据，由于某种原因，该数据集可能是User类型或Person类型。获取数据之后，我们需要将其传递给子组件，该子组件必须打印接收到的数据。

The issue here should be quite visible now, how can we determine which data type we actually received and print out the correct property? Type guard comes to the rescue and using the in operator in our if check will solve our type issue.

现在，这里的问题应该很明显，我们如何确定实际收到的数据类型并打印出正确的属性？类型防护人员来救援，并在我们的if检查中使用in运算符将解决我们的类型问题。

Typescript is smart enough to detect if the data we are passing to the function contains the name property from the User type or firstname property from Person type, so the function can always return the correct greeting message.

Typescript非常聪明，可以检测我们传递给函数的数据中是否包含User类型的name属性或Person类型的firstname属性，因此该函数始终可以返回正确的问候消息。