typescript官方(typescript官网)

发布网友 发布时间：2024-09-26 17:49

我来回答

共1个回答

热心网友 时间：2024-10-04 10:45

TypeScript——函数的重载

官方解释：方法根据传入参数的不同会返回两种不同的类型。如果传入的是代表纸牌的对象，函数作用是从中抓一张牌。如果用户想抓牌，我们告诉他抓到了什么牌。但是这怎么在类型系统里表示呢。

比如我们有一个函数是这样的，当第一个参数是字符的时候，第二个参数是数字。当第一个参数是数字的时候，第二个参数是字符。但在ts里面我们该怎么表示这个重载，我们看一下下面的这个例子：

当我们传入错误的参数类型的时候,ts会给我们检测出一个错误，说没有与此调用匹配的重载。（因为我们没有定义第一个参数为字符，第二个字符为字符，这样的重载，所以ts会检测出异常）

下面我们来增加一个重载，支持这种参数的传递

然后我们看一下执行结果

ok，没报错了

string和String是有效的TypeScript类型。以下声明有效：

string是指JavaScript的基本类型，可以使用文本（单引号或双引号）或String函数（不使用new关键字）创建。

以下三个声明创建相同的字符串：

我们经常使用typeofvariable==='string'来检查给定变量是否为原始字符串。

另一方面，String是一个基本包装字符串的对象，用于操纵字符串。我们可以从构造函数中创建String的实例，例如newString(…)：

为了检查变量是否为String对象的实例，我们必须使用instanceof运算符：

将String对象分配给基本string变量：

在编写时，String被声明为interface，以便将该string被视为String的子类型。因此，分配foo=bar不会导致任何问题。

但执行相反的赋值将抛出错误：

根据官方TypeScript的注意事项，建议不要使用Number、String、Boolean、Symbol或Object。

介绍

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)运算符，它表示可以具有联合中任何类型的值。举个例子：

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

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解决方案。除了从整体上提高我们自己代码的类型安全性之外，将我们自己的业务对象类型化为代码中的数据结构将增加代码库的整体文档，并在与团队成员一起工作时改善我们自己的开发人员体验相同的代码库。

Typescript依赖于一些软件包，因此在脚本运行后运行软件包管理器npminstall

您还可以在此处了解有关Svelte的Typescript支持的更多信息，它还描述了如何为现有项目手动进行设置

添加依赖

在App.svelte中引入

router.js

具体跳转可参照如下写法：

添加tailwindcss包并生成tailwind.config.js配置文件

Typescript设置已经附带了svelte-preprocess，所以大多数设置已经为我们完成了，

但是我们仍然需要告诉它使用postcss和其他一些软件包。

创建一个postcss.config.js文件，注意这里的名称很重要，因为postcss-load-config将在寻找该文件。

目前为止，svelte稍微成熟点的ui应该就是这个了

ts的项目一般不会直接运行，需要编译成js文件去运行，但是编译后的js文件与我们直接输出的ts文件有出入，这对于我们调试造成很大的麻烦。

官方参考文档：

注意事项：

官方参考文档：

注意事项：