typescriptplayground

如何在TypeScript中创建自定义类型

介绍

TypeScript是JavaScript语言的扩展，它使用JavaScript运行时和编译时类型检查器。

这种组合允许开发人员使用完整的JavaScript生态系统和语言功能，同时还添加可选的静态类型检查、枚举数据类型、类和接口。这些特性为开发人员提供了JavaScript动态特性的灵活性，但也允许更可靠的代码库，其中可以在编译时使用类型信息来检测可能在运行时导致错误或其他意外行为的问题。

额外的类型信息还提供了更好的代码库文档，并在文本编辑器中改进了IntelliSense（代码完成、参数信息和类似的内容辅助功能）。队友可以准确地确定任何变量或函数参数的预期类型，而无需通过实现本身。

准备工作

要遵循本教程，我们将需要：

1)、一个环境，我们可以在其中执行TypeScript程序以跟随示例。要在本地计算机上进行设置，我们将需要以下内容。

2）、如果你不想在本地机器上创建TypeScript环境，你可以使用官方的TypeScriptPlayground来跟随。

3）、我们将需要足够的JavaScript知识，尤其是ES6+语法，例如解构、rest运算符和导入/导出。有关JavaScript的更多主题信息，建议阅读我们的JavaScript系列教程。

4）、本教程将参考支持TypeScript并显示内联错误的文本编辑器的各个方面。这不是使用TypeScript所必需的，但确实可以更多地利用TypeScript功能。为了获得这些好处，我们可以使用像VisualStudioCode这样的文本编辑器，它完全支持开箱即用的TypeScript。我们也可以在TypeScriptPlayground中尝试这些好处。

本教程中显示的所有示例都是使用TypeScript4.2.2版创建的。

创建自定义类型

自定义类型语法

在TypeScript中，创建自定义类型的语法是使用type关键字，后跟类型名称，然后使用类型属性分配给{}块。采取以下措施：

语法类似于对象文字，其中键是属性的名称，值是该属性应亩敬具有的类型。这定义了一个Programmer类型，迅迟慎它必须是一个对象，其name键保存一个字符串值，并且knownFor键保存一个字符串数组。

如前面的示例所示，我们可以使用;作为每个属性之间的分隔符。也可以使用逗号、,或完全省略分隔符，如下所示：

使用自定义类型与使用任何基本类型相同。添加一个双冒号，然后添加我们的类型名称：

ada常量现在将通过类型检查器而不会引发错误。

如果我们在任何完全支持TypeScript的编辑器中编写此示例，例如在TypeScriptPlayground中，编辑器将建议该对象期望的字段及其类型，如下面的动画所示：

如果我们使用TSDoc格式（一种流行的TypeScript注释文档样式）向字段添加注释，则在代码完旦哗成中也建议使用它们。使用以下代码并在注释中进行解释：

注释描述现在将与字段建议一起出现：

TypeScript编译器(tsc)将显示错误2322：

如果我们省略了我们的类型所需的任何属性，如下所示：

TypeScript编译器将给出错误2741：

添加原始类型中未指定的新属性也会导致错误：

在这种情况下，显示的错误是2322：

嵌套自定义类型

我们还可以将自定义类型嵌套在一起。想象一下，我们有一个Company类型，它有一个符合Person类型的manager字段。我们可以像这样创建这些类型：

然后，我们可以像这样创建一个Company类型的值：

我们可以省略manager常量中的类型，因为它与Person类型具有相同的形状。当我们使用与manager属性类型所期望的形状相同的对象时，TypeScript不会引发错误，即使它没有明确设置为Person类型。

以下不会引发错误：

我们甚至可以更进一步，直接在company对象字面量中设置manager：

所有这些场景都是有效的。

如果在支持TypeScript的编辑器中编写这些示例，我们会发现编辑器将使用可用的类型信息来记录自己。对于前面的示例，只要我们打开manager的{}对象文字，编辑器就会期望一个name类型的字符串属性：

现在，我们已经完成了一些使用固定数量的属性创建我们自己的自定义类型的示例，接下来，我们将尝试向我们的类型添加可选属性。

可选属性

要将可选属性添加到类型，请添加?属性的修饰符。使用前面部分中的Programmer类型，通过添加以下突出显示的字符将knownFor属性转换为可选属性：

在这里我们要添加?属性名称后的修饰符。这使得TypeScript将此属性视为可选的，并且在我们省略该属性时不会引发错误：

这将毫无错误地通过。

既然，我们已经知道如何向类型添加可选属性，那么，现在该学习如何创建一个可以容纳无限数量的字段的类型了。

可索引类型

在这里，我们使用大括号({})中的类型定义块创建一个普通类型，然后以[key:typeOfKeys]:typeOfValues的格式添加一个特殊属性，其中typeOfKeys是该对象的键应具有的类型，typeOfValues是这些键的值应该具有的类型。

然后，我们可以像任何其他类型一样正常使用它：

使用可索引类型，我们可以分配无限数量的属性，只要它们与索引签名匹配，索引签名是用于描述可索引类型的键和值的类型的名称。在这种情况下，键具有字符串类型，值具有任何类型。

还可以将始终需要的特定属性添加到可索引类型中，就像使用普通类型一样。在以下突出显示的代码中，我们将状态属性添加到我们的数据类型：

这意味着数据类型对象必须有一个带有布尔值的状态键才能通过类型检查器。

现在，我们可以创建具有不同数量元素的对象，我们可以继续学习TypeScript中的数组，它可以具有自定义数量的元素或更多。

创建元素数量或更多的数组

使用TypeScript中可用的数组和元组基本类型，我们可以为应该具有最少元素的数组创建自定义类型。在本节中，我们将使用TypeScript剩余运算符...来执行此操作。

想象一下，我们有一个负责合并多个字符串的函数。此函数将采用单个数组参数。这个数组必须至少有两个元素，每个元素都应该是字符串。我们可以使用以下内容创建这样的类型：

MergeStringsArray类型利用了这样一个事实，即我们可以将rest运算符与数组类型一起使用，并将其结果用作元组的第三个元素。这意味着前两个字符串是必需的，但之后的其他字符串元素不是必需的。

如果一个数组的字符串元素少于两个，它将是无效的，如下所示：

TypeScript编译器在检查此数组时将给出错误2322：

到目前为止，我们已经从基本类型的组合中创建了自己的自定义类型。在下一节中，我们将通过将两个或多个自定义类型组合在一起来创建一个新类型。

组合类型

在这里我们将介绍两种组合类型的方法。这些将使用联合运算符传递符合一种或另一种类型的任何数据，并使用交集运算符传递满足两种类型中所有条件的数据。

Unions

unions是使用|创建的(pipe)运算符，它表示可以具有联合中任何类型的值。举个例子：

在此代码中，ProctCode可以是字符串或数字。以下代码将通过类型检查器：

unions类型可以从任何有效TypeScript类型的联合中创建。

Intersections

我们可以使用相交类型来创建一个全新的类型，该类型具有相交在一起的所有类型的所有属性。

例如，假设我们有一些公共字段始终出现在API调用的响应中，然后是某些端点的特定字段：

在这种情况下，所有响应都将具有status和isValid属性，但只有用户响应将具有附加的用户字段。要使用交集类型创建特定API用户调用的结果响应，请结合使用StatusResponse和GetUserResponse类型：

ApiGetUserResponse类型将具有StatusResponse中可用的所有属性以及GetUserResponse中可用的属性。这意味着数据只有在满足两种类型的所有条件时才会通过类型检查器。以下示例将起作用：

另一个示例是数据库客户端为包含连接的查询返回的行类型。我们将能够使用交集类型来指定此类查询的结果：

稍后，如果我们使用fetchRowsFromDatabase()函数，如下所示：

生成的常量joinedRows必须有一个role属性和一个name属性，它们都保存字符串值，以便通过类型检查器。

使用模板字符串类型

从TypeScript4.1开始，可以使用模板字符串类型创建类型。这将允许我们创建检查特定字符串格式的类型，并为我们的TypeScript项目添加更多自定义。

要创建模板字符串类型，我们使用的语法与创建模板字符串文字时使用的语法几乎相同。但是，我们将在字符串模板中使用其他类型而不是值。

想象一下，我们想创建一个传递所有以get开头的字符串的类型。我们可以使用模板字符串类型来做到这一点：

myString将在此处通过类型检查器，因为字符串以get开头，然后是一个附加字符串。

如果我们将无效值传递给我们的类型，例如以下invalidStringValue：

TypeScript编译器会给我们错误2322：

使用模板字符串创建类型可帮助我们根据项目的特定需求自定义类型。在下一节中，我们将尝试类型断言，它为其他无类型数据添加类型。

UsingTypeAssertions

如果我们想让我们的代码在这些场景中是类型安全的，我们可以使用类型断言，这是一种将变量类型更改为另一种类型的方法。通过在变量后添加asNewType可以实现类型断言。这会将变量的类型更改为as关键字之后指定的类型。

举个例子：

value的类型为any，但是，使用as关键字，此代码将value强制为string类型。

注意：要断言TypeA的变量具有TypeB类型，TypeB必须是TypeA的子类型。几乎所有的TypeScript类型，除了never，都是any的子类型，包括unknown。

实用程序类型

在前面的部分中，我们查看了从基本类型创建自定义类型的多种方法。但有时我们不想从头开始创建一个全新的类型。有时最好使用现有类型的一些属性，甚至创建一个与另一种类型具有相同形状但所有属性都设置为可选的新类型。

使用TypeScript提供的现有实用程序类型，所有这些都是可能的。本节将介绍其中一些实用程序类型；有关所有可用的完整列表，请查看TypeScript手册的实用程序类型部分。

所有实用程序类型都是通用类型，我们可以将其视为接受其他类型作为参数的类型。可以通过使用语法向其传递类型参数来识别通用类型。

Record

Record实用程序类型可用于以比使用之前介绍的索引签名更简洁的方式创建可索引类型。

在我们的可索引类型示例中，我们具有以下类型：

我们可以使用Record实用程序类型而不是像这样的可索引类型：

Record泛型的第一个类型参数是每个键的类型。在以下示例中，所有键都必须是字符串：

第二个类型参数是这些键的每个值的类型。以下将允许值是任何值：

Omit

Omit实用程序类型可用于基于另一种类型创建新类型，同时排除结果类型中不需要的一些属性。

假设我们有以下类型来表示数据库中用户行的类型：

如果在我们的代码中，我们要检索除addressId之外的所有字段，则可以使用Omit创建没有该字段的新类型：

Omit的第一个参数是新类型所基于的类型。第二个是我们要省略的字段。

如果我们在代码编辑器中将鼠标悬停在UserRowWithoutAddressId上，我们会发现它具有UserRow类型的所有属性，但我们省略了这些属性。

我们可以使用字符串联合将多个字段传递给第二个类型参数。假设我们还想省略id字段，我们可以这样做：

Pick

Pick实用程序类型与Omit类型完全相反。我们无需说出要省略的字段，而是指定要从其他类型使用的字段。

使用我们之前使用的相同UserRow：

假设我们只需要从数据库行中选择电子邮件键。我们可以像这样使用Pick创建这样的类型：

Pick这里的第一个参数指定了新类型所基于的类型。第二个是我们想要包含的键。

这将等同于以下内容：

我们还可以使用字符串联合来选择多个字段：

Partial

使用相同的UserRow示例，假设我们想创建一个新类型，该类型与我们的数据库客户端可以用来将新数据插入用户表中的对象相匹配，但有一个小细节：我们的数据库具有所有字段的默认值，所以，我们是不需要通过其中任何一个。

为此，我们可以使用Partial实用程序类型来选择性地包括基本类型的所有字段。

我们现有的类型UserRow具有所需的所有属性：

要创建所有属性都是可选的新类型，我们可以使用Partial实用程序类型，如下所示：

这与拥有这样的UserRowInsert完全相同：

实用程序类型是一个很好的资源，因为它们提供了一种比从TypeScript中的基本类型创建类型更快的方法来构建类型。

总结

创建我们自己的自定义类型来表示我们自己的代码中使用的数据结构，可以为我们的项目提供灵活且有用的TypeScript解决方案。除了从整体上提高我们自己代码的类型安全性之外，将我们自己的业务对象类型化为代码中的数据结构将增加代码库的整体文档，并在与团队成员一起工作时改善我们自己的开发人员体验相同的代码库。

互联网真是个神奇的地方，它不仅哪余闹教你如何写代码，还提供了很多有用的工具，在开发的各个阶段帮你节约宝贵时间。本文将列出9个有用的在线工具，对任何开发人员而言，它们都会是得力助手（排名不分先后）。

1.EnjoyCSS

老实说，尽管我做了很多前端开发工作，但还是不太擅长使用CSS。EnjoyCSS是一款非常简单的工具，是我在困难时期的救星。它为用户提供了简单的UI，让用户可以设计元素，并提供对应的CSS输出。

2.PrettierPlayground

Prettier是一种代码格式化程序，支李罩持JavaScript，包括ES2017、JSX、Angular、Vue、Flow和TypeScript等。它会用符合标准并遵循最佳实践的样式替换掉你原来的样式。这个方便的工具在我们的IDE中非常流行，但是它也有自己的在线版本，你可以在里面优化你的代码。

3.Postman

从我踏入前端开发起，Postman就一直是我的必备开发工具之一。它能在后端检查我的端点，非常好用。它的出色表现让我把它放到了这里。它包含的端点包括GET、POST、DELETE、OPTIONS和PUT之类。可以称之为绝对不能错过的一款工具。

4.StackBlitz

据ChimeNnamdi称，这是所有用户最喜欢的在线IDE工具。主要原因是它将我们最喜欢和最常用的IDE——也就是VisualStudioCode，引入了Web端。

StackBlitz允许你一键设置Angular、React、Ionic、TypeScript、RxJS、Svelte和其他JavaScript框架。一键设置这个功能意味着开发者可以在极短的时间内开始编码。我发现这款工具非常有用，尤其是在线上尝试示例代码段或库时。你可能没有时间从头开始创建一个新项目来尝试一项新功能。有了StackBlitz，你只需不到几分钟的时间就可以试用新的NPM软件包，而无需从头开始在本地创建项目。

5.Bit.dev

软件开发的一项基本原则是代码可重用性。这可以减少你的开发工作，因为你无需从头开始构建每个组件。

这正是Bit.dev所做的。它使你可以共享可重用的代码组件和代码片段，从而减少开销并加快开发流程。

它还允许在团队之间共享组件，这使你的团队可以与其他团队更好地协作。

“组件是你的设计系统。共同打造更好的产品。”—Bit.dev

正如Bit.dev所提到的，这一组件平台也适合用作毁闷设计系统构建器。它能让你的开发人员和设计师团队共同工作，是从头开始构建设计系统的理想工具。

Bit.dev现在支持React、Vue、Angular、Node等JavaScript框架。

6.CanIUse

CanIUse是一款在线工具，使用起来非常方便，因为它让你可以了解所实现的特性是否与你希望使用的浏览器目标相兼容。

很多开发者都会遇到一个很闹心的问题，那就是开发的应用程序中的某些特性在浏览器上的支持与兼容问题，明明在这个浏览器可以正常使用，换了一个浏览器之后就不支持了。我同样有这样的困扰，在遇到过很多次这个问题之后，我开始牢记检查浏览器兼容性的必要步骤。举一个例子：我的投资组合项目中的某项特性在Safari浏览器上并不受支持。直到项目部署几个月后我才知道这件事。

为了看看这款工具是怎么工作的，我们来检查一下哪些浏览器支持WebP图片格式。

如你所见，目前Safari和IE不支持。这意味着你应该为不兼容的浏览器提供一个后备选项。

热心网友 时间：2024-09-20 04:06

求助，vscode插件无法运行

方法1.Ctrl/Cmd+P(或Ctrl/Cmd+E)输入extinstall[插件关键字/名称]

方法2.Ctrl/庆大仿Cmd+Shift+P(或F1)输入Extensions,选中InstallExtension然后输入插件名称/关键字。

不在插件商店的插件,则可以放置到用仿陪户目录下的.vscode/extensions文件夹中~重启VSCode即可生效。

刚刚写完自己第一个VSCode插件的同学来啦。

Code的插件将在0.10版中正式提供(应该快啦),目前0.9中其实已经支持,但是仅提供给有申请的同学.截止0.9.1,插件管理等感觉完成度尚且不高,但核心及调试体验应该都已经做得差不多了.期待正式发布~。誉纤

另外再次澄清一个容易被误解的事情,Code使用了和Atom一样的壳(Electron),但是本身实现完全不同,没有直接关系.

Code背后对应的项目Monaco其实早于Atom很久就已经出现在了VisualStudioOnline和TypeScriptPlayground上,所以插件自然也是自成体系。