typescript基本语法(typescript type用法)

本文目录：

• 1、如何在 TypeScript 中创建自定义类型
• 2、TypeScript中的怪语法（转载）
• 3、typescript和js的区别是什么？
• 4、TypeScript简单入门（三）:TypeScript原始数据类型表达
• 5、TypeScript 系统入门到项目实战
• 6、typescript语言中如何直接读取excel中的数据到一个实例对象中？

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

介绍

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

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

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

准备工作

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

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

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

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

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

本教程中显示的所有示例都是使用 TypeScript 4.2.2 版创建的。

创建自定义类型

自定义类型语法

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

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

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

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

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

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

如果我们使用 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 属性，它们都保存字符串值，以便通过类型检查器。

使用模板字符串类型

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

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

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

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

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

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

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

Using Type Assertions

如果我们想让我们的代码在这些场景中是类型安全的，我们可以使用类型断言，这是一种将变量类型更改为另一种类型的方法。通过在变量后添加 as NewType 可以实现类型断言。这会将变量的类型更改为 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中的怪语法（转载）

原文链接：

undefined的含义是：一个变量没有初始化。

null的含义是：一个变量的值是空。

要避免这个问题，我们需要做到：

keyof 定义了一个Type, 这个Type的值来自于指定的类。

{new(): T} 的主要功能是让通用方法可以创建通用类型的对象。

但是，这个故事有点长。

{new(): T} 的类型是一个 Type，因此可以用于定义变量和参数。

new() 是描述构造函数的签名。所以在 new() 中，也定义参数。比如： {new(name: string): T} 。

{new(): T} 定义了一个返回类型为 T 的构造函数的Type 。

非常感谢阅读！如有不足之处，请留下您的评价和问题。

typescript和js的区别是什么？

typescript和js的区别如下：

一：产生背景不同

1、TypeScript起源于使用JavaScript开发的大型项目。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript，使得其能够胜任开发大型项目。

2、JavaScript在1995年由Netscape公司的BrendanEich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。

二：功能不同

1、TypeScript是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

2、JavaScript是一种基于对象的语言，可以创建对象同时使用现有对象。但是Javascript并不支持其它面向对象语言所具有的继承和重载功能。

三：局限性不同

1、TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。

TypeScript支持为已存在的JavaScript库添加类型信息的头文件，扩展了它对于流行库的支持，如jQuery，MongoDB，Node.js和D3.js等。

2、由于JavaScript语言发展的较早，也较为成熟，所以仍有一大批开发人员坚持使用他们熟悉的脚本语言JavaScript，而不是学习TypeScript。

TypeScript代码需要被编译（输出JavaScript代码），这是TypeScript代码执行时的一个额外的步骤。

TypeScript简单入门（三）:TypeScript原始数据类型表达

原始数据类型包括：布尔值、数值、字符串、 null 、 undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt 。

TypeScript声明变量时需要指定数据类型具体表达式

以构造函数方式：

编译后

其中 0b1010 和 0o744 是 ES6 中的二进制和八进制表示法，它们会被编译为十进制数字。

模板字符串

其中 ` 用来定义 ES6 中的模板字符串，${expr} 用来在模板字符串中嵌入表达式。

JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void 表示没有任何返回值的函数：

声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null

在 TypeScript 中，可以使用 null 和 undefined 来定义这两个原始数据类型：

与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量：

而 void 类型的变量不能赋值给 number 类型的变量：

Symbols是ES6新增的原始数据类型，ts中使用时需要先配置

1、配置tsconfig.json

“lib”: [“es6”], 需要dom时还要将”dom”添加进lib,如:console.log语句

2、特性

(1)不能和其他值计算,如加键、字符串拼接等

(2)可以调用.toString()返回字符串

(3)本身作为true类型存在

(4)类似for in遍历时,不会遍历symbol属性

可通过Object.getOwnPropertySymbols(对象)/Reflect.ownKeys(obj)获取symbol属性

3、语法

bigint 数据类型是用来表示那些已经超出了 number 类型最大值的整数值，对于总是被诟病的整数溢出问题，使用了 bigint 后将完美解决。

bigint 是一种基本数据类型（primitive data type）。

JavaScript 中可以用 Number 表示的最大整数为 2^53 – 1，可以写为 Number.MAX_SAFE_INTEGER。如果超过了这个界限，可以用 BigInt来表示，它可以表示任意大的整数。

在一个整数字面量后加 n 的方式定义一个 BigInt，如：10n 或者调用函数 BigInt()：

BigInt 与 Number 的不同点：

BigInt 不能用于 Math 对象中的方法。

BigInt 不能和任何 Number 实例混合运算，两者必须转换成同一种类型。

BigInt 变量在转换为 Number 变量时可能会丢失精度。

参考

原始数据类型

TypeScript BigInt

TypeScript Symbol

TypeScript 系统入门到项目实战

课程介绍

TS在构建大型应用上的优势，以及与JS的完美互通，让TS未来一片光明，从0到1系统学习，把TS真正应用到框架和项目中。

在迷你“全栈”项目中学习TypeScript，以TypeScript完整串联前后端

基础与实战“融合”，将知识讲解融于项目开发中，让你更快的掌握TS工程开发所必须的知识点

目录

第1章 课程导学

本章主要介绍课程的知识大纲，学习前提，讲授方式及预期收获。

1-1 都2020了，还不抓紧学TypeScript?

第2章 TypeScript 基础语法入门

本章主要帮助大家理解 TypeScript 可以解决的问题和所带来的优势，帮助大家理解 TS 中的各种静态类型，包括：函数，数组，元组，类，抽象类接口等，迅速帮助大家理解 TS 的基础使用方式和语法。

2-1 安装 VsCode 编辑器

2-2 TypeScript的定义

2-3 TypeScript带来了什么优势

2-4 TypeScript基础环境搭建

2-5 静态类型的深度理解

2-6 基础类型和对象类型

2-7 类型注解和类型推断

2-8 函数相关类型

2-9 基础语法复习

2-10 数组和元组

2-11 Interface接口

2-12 类的定义与继承

2-13 类中的访问类型和构造器

2-14 静态属性，Setter和Getter

2-15 抽象类

2-16 作业节

第3章 使用 TypeScript 编写爬虫工具

本章将带大家使用 TypeScript 编写一个获取网站课程销量的爬虫工具，过程中对上一章节学习的 TypeScript 基础知识进行实践巩固，同时借助 TypeScript 中的 OOP 编程方式，给大家讲解部分面向对象开发中的设计模式。

3-1 爬虫概述及正版密钥获取 (04:48)

3-2 使用SuperAgent和类型定义文件获取页面内容 (18:43)

3-3 使用cheerio进行数据提取 (12:32)

3-4 爬取数据的结构设计和存储 (18:00)

3-5 使用组合设计模式优化代码 (21:21)

3-6 单例模式实战复习 (07:24)

3-7 TypeScript的编译运转过程的进一步理解 (21:04)

3-8 作业节

第4章 TypeScript 语法进阶

本章将给大家讲解更多的 TypeScript 进阶语法以及原理性知识。包括如何进行 TypeScript 编译过程的配置，联合类型，类型保护，枚举类型，泛型等知识点。同时也给大家扩展讲解了类型定义文件的使用及编写方式等内容。通过本章的学习，大家基本可以掌握 TypeScript 中绝大部分的语法知识点。

4-1 TypeScript中的配置文件（上）

4-2 TypeScript中的配置文件（下）

4-3 作业节

4-4 联合类型和类型保护

4-5 Enum 枚举类型

4-6 函数泛型

4-7 类中的泛型以及泛型类型

4-8 命名空间-namespace（上）

4-9 命名空间-namespace（下）

4-10 import对应的模块化-缺代码

4-11 使用 Parcel 打包 TS 代码

4-12 描述文件中的全局类型（上）

4-13 描述文件中的全局类型（下）

4-14 模块代码的类型描述文件

4-15 作业节

4-16 泛型中keyof语法的使用

第5章 使用 Express 框架开发数据爬取及展示接口

本章将在 Express 框架中使用 TypeScript 的语法进行登陆，数据爬取和展示接口的开发，过程中对之前的基础语法进行实践巩固，同时讲解以 JavaScript 作为开发语言的框架中使用 TypeScript 会遇到的问题以及解决方案。

5-1 Express 基础项目结构搭建

5-2 使用TS编写常规express代码遇到的问题

5-3 扩展解决 Express 的类型定义文件问题

5-4 登陆功能的开发

5-5 统一接口数据结构，优化代码

第6章 TypeScript 高级语法

本章主要讲解 TypeScript 中，装饰器和元数据的语法知识，包括类装饰器，方法装饰器，属性装饰器和参数装饰器在本章中都会详细讲解，通过本章的学习，大家基本上完成了对 TypeScript 所有重点语法的学习。

6-1 类的装饰器（1）

6-2 类的装饰器（2）

6-3 方法装饰器

6-4 访问器的装饰器

6-5 属性的装饰器

6-6 参数装饰器

6-7 装饰器实际使用的小例子

6-8 reflect-metadata

6-9 装饰器的执行顺序

6-10 作业节

第7章 Express 项目代码改良

结合上一章学习的装饰器和元数据的语法知识，本章将通过面向对象的方式，对之前的接口代码进行全面重构，最终帮大家编写出和当前主流 Node 框架风格一致的后端应用代码，对上一章的知识点进行实战巩固，同时帮助大家理解 Node 框架设计背后的原理性知识。

7-1 创建控制器和装饰器

7-2 通过装饰器实现项目路由功能

7-3 多种请求方法装饰器的生成

7-4 .中间件装饰器的编写

7-5 .代码结构优化

7-6 .练习题：如何在一个方法上使用多个装饰器

第8章 使用 React 编写爬取数据的展示页面

本章将带大家使用TS的语法进行前端 React 代码的开发，过程中会给大家讲解在 React 和 Redux 等前端核心框架上如何正确巧妙的使用TypeScript。本章的最后，我们将产出一个完整的爬虫项目，并通过可视化的方式，对爬取到的数据进行展示。

8-1 初始化 React 项目

8-2 编写登陆表单

8-3 类型及路由的使用

8-4 前后端代码联调及登陆跳转逻辑开发

8-5 登陆退出功能完整优化

8-6 数据爬取功能打通及 Echarts 的使用

8-7 折线图数据处理及展示

8-8 接口数据类型的冗余定义问题

8-9 通过 Typescript 简化前后端协作模式

第9章 课程总结

本章将对整个项目所学习到的知识点进行总结，并给出大家进一步深入学习 TS 的方法和技巧。

9-1 课程总结及后续学习方法推荐

获取方式：TypeScript 系统入门到项目实战

typescript语言中如何直接读取excel中的数据到一个实例对象中？

VLOOKUP是一个查找函数，给定一个查找的目标，它就能从指定的查找区域中查找返回想要查找到的值。它的基本语法为：

VLOOKUP（查找目标，查找范围，返回值的列数，精确OR模糊查找)

下面以一个实例来介绍一下这四个参数的使用

例1：如下图所示，要求根据表二中的姓名，查找姓名所对应的年龄。

公式：B13 =VLOOKUP(A13,$B$2:$D$8,3,0)

参数说明：

1 查找目标：就是你指定的查找的内容或单元格引用。本例中表二A列的姓名就是查找目标。我们要根据表二的“姓名”在表一中A列进行查找。

公式：B13 =VLOOKUP(A13,$B$2:$D$8,3,0)

2 查找范围（VLOOKUP(A13,$B$2:$D$8,3,0) ）：指定了查找目标，如果没有说从哪里查找，EXCEL肯定会很为难。所以下一步我们就要指定从哪个范围中进行查找。VLOOKUP的这第二个参数可以从一个单元格区域中查找，也可以从一个常量数组或内存数组中查找。本例中要从表一中进行查找，那么范围我们要怎么指定呢？这里也是极易出错的地方。大家一定要注意，给定的第二个参数查找范围要符合以下条件才不会出错：

本文来源：https://www.yuntue.com/post/144738.html | 云服务器网，转载请注明出处！