typescript编译混淆

Ⅰ 如何编译TypeScript

1）通过 File -> New-Project 新建项目
2）输入必要信息，点击 Ok 按钮，创建后项目模板如下
3）app.js 依赖于 app.ts，默认的 app.ts 文件包含类和构造函数等等
4）TypeScript 文件将会被编译为 javaScript (app.js)，下面是编译后的 JavaScript 代码
5）在页面中引用 JavaScript
6）构建或者重新构建项目时，你将看到提示是否重新编译 TypeScript 的信息
7）在 proj 文件中有如下内容将会被自动编译
8）运行此应用时会在页面上显示当前的日期和时间

Ⅱ typescript 怎么混淆加密，编译输出js文件

选择
configure
task
runner
自动创建
task.json
。该配置文件在工作空间的.vscode目录下，这个目录也是存放vscode配置的文件夹。
vscode默认的task配置文件中给出了执行tsc
和
gulp模板配置。简单介绍一下
task.json
的写法
{"version":
"0.1.0",//
要使用的命令或者可执行文件的路径"command":
"tsc",//
对应command参数，是否是一个命令，否则为执行文件路径"isshellcommand":
true,//
是否在执行task任务时显示控制台窗口"showoutput":
"always",//
对应command参数指定程序的参数"args":
["-p",
"src",
"--allowjs",
"-w"],//
不太明白这个，基本用不到"problemmatcher":
"$tsc",}

Ⅲ TypeScript 变量声明

一直以来我们都是通过 var 关键字定义JavaScript变量。

大家都能理解，这里定义了一个名为 a 值为 10 的变量。

我们也可以在函数内部定义变量：

并且我们也可以在其它函数内部访问相同的变量。

上面的例子里， g 可以获取到 f 函数里定义的 a 变量。 每当 g 被调用时，它都可以访问到 f 里的 a 变量。 即使当 g 在 f 已经执行完后才被调用，它仍然可以访问及修改 a 。

这里很容易看出一些问题，里层的 for 循环会覆盖变量 i ，因为所有 i 都引用相同的函数作用域内的变量。 有经验的开发者们很清楚，这些问题可能在代码审查时漏掉，引发无穷的麻烦。

快速的猜一下下面的代码会返回什么：

介绍一下， setTimeout 会在若干毫秒的延时后执行一个函数（等待其它代码执行完毕）。

好吧，看一下结果：

很多JavaScript程序员对这种行为已经很熟悉了，但如果你很不解，你并不是一个人。 大多数人期望输出结果是这样：

还记得我们上面提到的捕获变量吗？

让我们花点时间思考一下这是为什么。 setTimeout 在若干毫秒后执行一个函数，并且是在 for 循环结束后。 for 循环结束后， i 的值为 10 。 所以当函数被调用的时候，它会打印出 10 ！

一个通常的解决方法是使用立即执行的函数表达式（IIFE）来捕获每次迭代时 i 的值：

这种奇怪的形式我们已经司空见惯了。 参数 i 会覆盖 for 循环里的 i ，但是因为我们起了同样的名字，所以我们不用怎么改 for 循环体里的代码。

主要的区别不在语法上，而是语义，我们接下来会深入研究。

这里我们定义了2个变量 a 和 b 。 a 的作用域是 f 函数体内，而 b 的作用域是 if 语句块里。

关于 暂时性死区 的更多信息，查看这里Mozilla Developer Network.

在一个嵌套作用域里引入一个新名字的行为称做 屏蔽 。 它是一把双刃剑，它可能会不小心地引入新问题，同时也可能会解决一些错误。 例如，假设我们现在用 let 重写之前的 sumMatrix 函数。

这个版本的循环能得到正确的结果，因为内层循环的 i 可以屏蔽掉外层循环的 i 。

通常 来讲应该避免使用屏蔽，因为我们需要写出清晰的代码。 同时也有些场景适合利用它，你需要好好打算一下。

因为我们已经在 city 的环境里获取到了 city ，所以就算 if 语句执行结束后我们仍然可以访问它。

回想一下前面 setTimeout 的例子，我们最后需要使用立即执行的函数表达式来获取每次 for 循环迭代里的状态。 实际上，我们做的是为获取到的变量创建了一个新的变量环境。 这样做挺痛苦的，但是幸运的是，你不必在TypeScript里这样做了。

会输出与预料一致的结果：

这很好理解，它们引用的值是 不可变的 。

除非你使用特殊的方法去避免，实际上 const 变量的内部状态是可修改的。 幸运的是，TypeScript允许你将对象的成员设置成只读的。 接口一章有详细说明。

使用最小特权原则，所有变量除了你计划去修改的都应该使用 const 。 基本原则就是如果一个变量不需要对它写入，那么其它使用这些代码的人也不能够写入它们，并且要思考为什么会需要对这些变量重新赋值。 使用 const 也可以让我们更容易的推测数据的流动。

跟据你的自己判断，如果合适的话，与团队成员商议一下。

Another TypeScript已经可以解析其它 ECMAScript 2015 特性了。 完整列表请参见 the article on the Mozilla Developer Network。 本章，我们将给出一个简短的概述。

最简单的解构莫过于数组的解构赋值了：

这创建了2个命名变量 first 和 second 。 相当于使用了索引，但更为方便：

作用于函数参数：

你可以在数组里使用 ... 语法创建剩余变量：

当然，由于是JavaScript, 你可以忽略你不关心的尾随元素：

或其它元素：

你也可以解构对象：

这通过 o.a and o.b 创建了 a 和 b 。 注意，如果你不需要 c 你可以忽略它。

注意，我们需要用括号将它括起来，因为Javascript通常会将以 { 起始的语句解析为一个块。

你可以在对象里使用 ... 语法创建剩余变量：

你也可以给属性以不同的名字：

这里的语法开始变得混乱。 你可以将 a: newName1 读做 " a 作为 newName1 "。 方向是从左到右，好像你写成了以下样子：

令人困惑的是，这里的冒号 不是 指示类型的。 如果你想指定它的类型， 仍然需要在其后写上完整的模式。

默认值可以让你在属性为 undefined 时使用缺省值：

现在，即使 b 为 undefined ， keepWholeObject 函数的变量 wholeObject 的属性 a 和 b 都会有值。

但是，通常情况下更多的是指定默认值，解构默认值有些棘手。 首先，你需要在默认值之前设置其格式。

其次，你需要知道在解构属性上给予一个默认或可选的属性用来替换主初始化列表。 要知道 C 的定义有一个 b 可选属性：

要小心使用解构。 从前面的例子可以看出，就算是最简单的解构表达式也是难以理解的。 尤其当存在深层嵌套解构的时候，就算这时没有堆叠在一起的重命名，默认值和类型注解，也是令人难以理解的。 解构表达式要尽量保持小而简单。 你自己也可以直接使用解构将会生成的赋值表达式。

展开操作符正与解构相反。 它允许你将一个数组展开为另一个数组，或将一个对象展开为另一个对象。 例如：

这会令 bothPlus 的值为 [0, 1, 2, 3, 4, 5] 。 展开操作创建了 first 和 second 的一份浅拷贝。 它们不会被展开操作所改变。

你还可以展开对象：

search 的值为 { food: "rich", price: "$", ambiance: "noisy" } 。 对象的展开比数组的展开要复杂的多。 像数组展开一样，它是从左至右进行处理，但结果仍为对象。 这就意味着出现在展开对象后面的属性会覆盖前面的属性。 因此，如果我们修改上面的例子，在结尾处进行展开的话：

那么， defaults 里的 food 属性会重写 food: "rich" ，在这里这并不是我们想要的结果。

对象展开还有其它一些意想不到的限制。 首先，它仅包含对象 自身的可枚举属性。 大体上是说当你展开一个对象实例时，你会丢失其方法：

其次，TypeScript编译器不允许展开泛型函数上的类型参数。 这个特性会在TypeScript的未来版本中考虑实现。

Ⅳ 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 是 javascript 的类型超集，旨在简化大型 JavaScript 应用程序的开发。Typescript 加入了常见的概念例如 类（classes），泛型（generics），接口（interfaces）和静态类型（static types）并允许开发人员使用静态检查和代码重构等工具。

为什么在意 Typescript

现在问题仍然是为什么你应该优选使用 Typescript。这有一些关于为什么 javascript 开发者应该考虑学习 Typescript 的原因。

静态类型

Javascript 是动态类型的，这意味着直到在运行时实例化时，它不知道变量的类型，这可能导致项目中的问题和错误。Typescript 加入了对 Javascript 静态类型支持如果你正确的使用它处理由变量类型的错误设定引起的错误。您仍然可以完全控制输入代码的严格程度，或者甚至根本不使用类型。

更好的 IDE 支持

Typescript 相比 Javascript 一个更大的优势是更好的 IED 支持包括了来自 Typescript 编译器智能，实时的提示，调试以及更多功能。这里还有一大堆扩展进一步 提升你的 Typescript 开发体验。

应用新的 ECMAScript 特性

Typescript 使您可以使用最新的 ECMAScript 功能，并将它们转换到您选择的 ECMAScript 目标。这意味着您可以使用最新的工具开发应用程序，而无需担心浏览器支持。

什么时候你该使用它

到目前为止，我们应该知道为什么 Typescript 是有用的以及如何改善我们的开发体验。但它并不是解决所有问题的方法，当然也不能阻止你自己编写可怕的代码。那么让我们来看看你应该在哪里使用 Typescript。

当你拥有一个很大的代码库时

Typescript 是大型代码库的一个很好的补充，因为它可以帮助您防止许多常见错误。这尤其适用于多个开发人员工作在同一项目之中。

当你项目成员早已知道静态类型语言时

另一个明显使用 Typescript 的场景是当你和你的团队已经知道静态类型的语言像 Java 和 C# 不想改为编写 Javascript。

设置/建立

要设置 typescript，我们只需要使用 npm 包管理器安装它并创建一个新的 Typescript 文件。

安装完成之后我们可以继续探寻 Typescript 提供给我们的语法和功能特性。

类型

现在让我们来看看 Typescript 所提供的类型：

数值（Number）

Typescript 所有的值类型都是浮点数。所有的数字包括二进制和十六进制都是数值类型。

字符串（String）

与其他语言一样，Typescript 使用 String 数据类型来保存文本数据。

你还可以用反引号来应用多行字符串并嵌入表达式。

布尔类型（Boolean）

Typescript 支持所有的基本数据类型，布尔类型，值必须为 true 或者 false。

指定类型

现在我们已经有了基本的数据类型，我们可以看看你如何在 Typescript 中指定类型。基本上，您只需要在名称和冒号后面写出变量的类型。

单一类型

这里例子为我们如何为变量指定字符串数据类型

所有其他数据类型也是这样使用。

多类型

你仍然可以通过 | 操作符为你的变量指定多个数据类型：

这里我们使用|为变量分配两种类型。现在我们可以在其中存储字符串和数值。

类型检测

现在让我们看看我们如何检查我们的变量是否具有正确的类型。我们有多种选择，但在这里我只展示了两个最常用的选项。

Typeof

typeof 仅仅知道基本类型。这意味着它只能检查变量是否是我们上面定义的数据类型之一。

在此示例中，我们创建一个字符串类型变量并使用 typeof 命令检查 str 是否为 Number 类型（始终为 false）。然后我们打印是否是数值。

Instanceof

instanceof 运算符与 typeof 几乎相同，只是它还可以检查 javascript 尚未定义的自定义类型。

在这里，我们创建一个自定义类型，我们稍后将在本文中讨论，然后创建它的实例。之后，我们检查它是否真的是 Human 类型的变量，如果是，则在控制台中打印。

类型断言

有时我们还需要将变量转换为特定的数据类型。这经常发生在你已经指定了一个泛型类型像 any 并且你想使用它具体的类型的方法。

有很多选择可以解决这个问题，但在这里我只分享其中两个。

As 关键字

通过在变量名之后使用 as 关键字跟随具体的数据类型来转换变量的类型。

这里我们将 str 变量转换为字符串，以便我们可以使用 length 属性（如果您的 TSLINT 设置允许，甚至可以在没有转换的情况下工作）。

> 操作符

我们也可以使用 > 运算符，它与 as 关键字具有完全相同的效果，只有语法差异。

此代码块与上面的代码块具有完全相同的功能。它只是语法不同。

数组

Typescript 中的数组是相同对象的集合，可以用两种不同的方式创建。

创建数组

使用 []

我们可以通过指定类型后跟 [] 来定义数组对象，以表示它是一个数组。

在这个例子中，我们创建一个字符串数组，它包含三个不同的字符串值。

使用泛型数组

我们还可用指定 Array 定义泛型数组

这里我们创建一个数值数组，它包含 5 个不同的数字。

多（混合）类型数组

此外，我们还可以使用 | 操作符将多个类型分配给单个数组。

此例中我们创建了一个数值可以包含字符串和数值。

多维数组

Typescript 还允许我们定义多维数组，这意味着我们可以将数组保存在另一个数组中。我们可以通过使用多个[]运算符来创建一个多维数组。

这里我们创建一个包含另一个数字数组的数组。

元组（Tupels）

元组基本类似数组但有一点不同。我们可以定义每个位子上储存数据的类型。这意味着我们可以通过方括号内的枚举来限制固定索引位置的类型。

在此列中，我们定义了一个简单的元组，在索引 0 位置上指定为数值类型，在索引为 1 位置上指定为字符串类型。这意味着如果我们尝试在此索引上放置另一种数据类型，则会抛出错误。

以下是非法元组的示例：

枚举（Enums）

与大多数其他面向对象编程语言一样，Typescript 中的枚举允许我们定义一组命名常量。 Typescript 还提供基于数值和基于字符串的枚举。使用 enum 关键字定义 Typescript 中的枚举。

数值枚举

首先，我们将查看数值枚举，其中我们将键值与索引匹配。

上面，我们定义了数值枚举将 Playing 初始化为 0，Paused 为 1 等等。

我们也可以将初始化器留空，而 Typescript 会从零开始自动索引它。

字符串枚举

定义字符串枚举也十分简单，我们只需要在定义的每个枚举值后初始化字符串值。

这里我们通过使用字符串初始化我们的状态来定义字符串枚举。

对象（Objects）

Typescript 中的对象是包含一组键值对的实例。这些值可以是变量，数组甚至函数。它也被视为表示非基本类型的数据类型。

我们可以使用大括号创建一个对象：

这里我们创建了一个 human 对象包含三个不同的键值对。

我们可以为对象加入方法：

自定义类型

Typescript 还允许我们自定义类型，以便于我们后续重用。要创建自定义类型，我们只需要使用 type 关键字并定义我们的类型。

在此示例中，我们定义了一个名为 Human 包含三个属性的自定义类型。现在让我们看看如何创建这种类型的对象。

在这里，我们创建自定义类型的实例并设置所需的属性。

方法参数和返回类型

Typescript 允许我们为方法参数和返回值指定数据类型。现在让我们看一下使用 Typescript 定义函数的语法。

这里我们有两个示例函数，它们都具有定义类型的参数。我们还看到在结束括号后定义返回类型。

现在我们可以像普通的 javascript 一样调用我们的函数，但编译器会检查我们是否为函数提供了正确的参数。

可选属性

Typescript 允许我们为方法(注：接口等同样可以定义可选属性)定义可选属性。我们通过 ? 操作符定义。

在这个例子中，lastName 是一个可选参数，这意味着当我们不提供调用函数时，我们不会从编译器中获得错误。

这表示 2 个示例都被视为正确的。

默认值

我们使用可选属性的第二种方法是为它指定一个默认值。我们可以通过直接在函数头部赋值来实现。

在此例我中我们 lastName 赋予了默认值这意味着我们不必每次调用方法时提供它。

接口（Interfaces）

让我们看个例子让定义更加清晰：

可选属性

在 Typescript 中，有时并不是所有接口属性都是必需的。可以使用 ? 运算符在属性后面将其设置为可选。

在这里，我们创建一个具有一个普通和一个可选属性的接口，该属性是使用 ? 运算符。这就是我们两个人初始化都有效的原因。

只读属性

我们的接口中一些属性也应该只在首次创建对象时修改赋值。我们可以通过将 readonly 关键字放在我们的属性名称之前来指定此功能。

在此示例中，id 属性是只读的，在创建对象后无法更改。

模块（Barrels Moles）

Barrels 允许我们在一个更方便的模块中汇总多个导出模块。

我们仅需要创建一个新文件，它将导出我们项目中的多个模块 (译者注：根据 ECMAScript 定义一个文件定义一个模块，此处可能表示模块聚合(类似库等的入口文件))。

之后我们可以通过这个便利的单一导入语句引入这些模块。

泛型（Generics）

泛型允许我们创建兼容广泛类型而不是单一类型的组件。这使得我们的组件“ 开放”和复用。

现在您可能想知道为什么我们不只是使用任何（ any ）类型来使组件接受多种类型而不是单一类型。让我们看一个例子更好地了解。

我们想要一个简单的假函数（mmy function），它返回传入的参数：

然而 any 是通用的，某种程度它能接受所有类型参数但有一个很大的区别。我们丢失了我们传入的参数是什么类型以及返回值是什么类型。

所以让我们来看看，我们如何接受所有类型并知道它返回值的类型。

这里我们使用泛型参数 T，因此我们可以捕获变量类型并在以后使用它。我们还使用它作为返回参数类型，它允许我们在检查代码时看到相应的类型。

更多详细介绍你可以查看Charly Poly关于Generics and overloads的文章

访问修饰符（Access Modifiers）

访问修饰符控制我们类成员的可访问性。 Typescript 支持三种访问修饰符 - 公共的（public），私有的（private）和受保护的（protected）。

公共的

公共成员可以在任何地方访问，没有任何限制 这也是标准修饰符，这意味着您不需要使用 public 关键字为变量添加前缀。

私有的

私有成员只能在其定义的类中能访问。

受保护的

保护成员只能在其定义的类及其子类中访问。

TSLINT

TSLINT 是 Typescript 的标准 linter，可以帮助我们编写干净，可维护和可读的代码。它可以使用我们自己的 lint 规则，配置和格式化程序进行自定义。

设置

首先我们需要安装 Typescript 和 tslint，我们可以全局安装和局部安装：

之后，我们可以使用 TSLINT CLI 在我们的项目中初始化 TSLINT。

现在我们有了 tslint.json 文件，我们可以开始配置我们的规则了。

配置

TSLINT 允许使用配置我们自己的规则并自定义代码的外观。默认情况下，tslint.json 文件看起来像这样，只使用默认规则。

我们可以通过将它们放在 rules 对象中来添加其他规则。

有关所有可用规则的 概述，您可以查看官方文档。

结论

恭喜您一路走到最后！希望此篇文章帮助您理解 Typescript 的基础知识以及如何在项目中使用。

如果您发现这个有用，请考虑推荐并与其他开发人员共享。也可以访问我的网站学习更多。https://www.icoderoad.com

如果您有任何问题和反馈，在以下评论中让我知道。

Ⅵ TypeScript 入门指南

新系列 深入浅出TypeScript 来了，本系列至少20+篇。本文为第一篇，来介绍一下TypeScript 以及常见的类型。

TypeScript是一门由微软推出的开源的、跨平台的编程语言。它是JavaScript的超集，扩展了 JavaScript 的语法，最终会被编译为JavaScript代码。

TypeScript的主要特性：

TypeScript 主要是为了实现以下两个目标：

下面就来看看这两个目标是如何实现的。

为什么要给JavaScript加上类型呢？

我们知道，JavaScript是一种轻量级的解释性脚本语言。也是弱类型、动态类型语言，允许隐式转换，只有运行时才能确定变量的类型。正是因为在运行时才能确定变量的类型，JavaScript代码很多错误在运行时才能发现。TypeScript在JavaScript的基础上，包装了类型机制，使其变身成为 静态类型 语言。在 TypeScript 中，不仅可以轻易复用 JavaScript 的代码、最新特性，还能使用可选的静态类型进行检查报错，使得编写的代码更健壮、更易于维护。

下面是 JavaScript 项目中最常见的十大错误，如果使用 TypeScript，那么在 编写阶段 就可以发现并解决很多 JavaScript 错误了：

类型系统能够提高代码的质量和可维护性，经过不断的实践，以下两点尤其需要注意：

可以认为，在所有操作符之前，TypeScript 都能检测到接收的类型（在代码运行时，操作符接收的是实际数据；在静态检测时，操作符接收的则是类型）是否被当前操作符所支持。当 TypeScript 类型检测能力覆盖到所有代码后，任意破坏约定的改动都能被自动检测出来，并提出类型错误。因此，可以放心地修改、重构业务逻辑，而不用担忧因为考虑不周而犯下低级错误。

在一些语言中，类型总是有一些不必要的复杂的存在方式，而 TypeScript 尽可能地降低了使用门槛，它是通过如下方式来实现的。

TypeScript 与 JavaScript 本质并无区别，我们可以将 TypeScipt 理解为是一个添加了类型注解的 JavaScript，为JavaScript代码提供了编译时的类型安全。

实际上，TypeScript 是一门“ 中间语言 ”，因为它最终会转化为JavaScript，再交给浏览器解释、执行。不过 TypeScript 并不会破坏 JavaScript 原有的体系，只是在 JavaScript 的基础上进行了扩展。

准确的说，TypeScript 只是将JavaScript中的方法进行了标准化处理：

这段代码在TypeScript中就会报错，因为TS会知道a是一个数字类型，不能将其他类型的值赋值给a，这种类型的推断是很有必要的。

上面说了，TypeScript会尽可能安全的推断类型。我们也可以使用类型注释，以实现以下两件事：

在一些语言中，类型总是有一些不必要的复杂的存在方式，而 TypeScript 的类型是结构化的。比如下面的例子中，函数会接受它所期望的参数：

为了便于把 JavaScript 代码迁移至 TypeScript，即使存在编译错误，在默认的情况下，TypeScript 也会尽可能的被编译为 JavaScript 代码。因此，我们可以将JavaScript代码逐步迁移至 TypeScript。

虽然 TypeScript 是 JavaScript 的超集，但它始终紧跟ECMAScript标准，所以是支持ES6/7/8/9 等新语法标准的。并且，在语法层面上对一些语法进行了扩展。TypeScript 团队也正在积极的添加新功能的支持，这些功能会随着时间的推移而越来越多，越来越全面。

虽然 TypeScript 比较严谨，但是它并没有让 JavaScript 失去其灵活性。TypeScript 由于兼容 JavaScript 所以灵活度可以媲美 JavaScript，比如可以在任何地方将类型定义为 any（当然，并不推荐这样使用），毕竟 TypeScript 对类型的检查严格程度是可以通过 tsconfig.json 来配置的。

在搭建TypeScript环境之前，先来看看适合TypeScript的IDE，这里主要介绍Visual Studio Code，笔者就一直使用这款编辑器。

VS Code可以说是微软的亲儿子了，其具有以下优势：

因为 VS Code 中内置了特定版本的 TypeScript 语言服务，所以它天然支持 TypeScript 语法解析和类型检测，且这个内置的服务与手动安装的 TypeScript 完全隔离。因此， VS Code 支持在内置和手动安装版本之间动态切换语言服务，从而实现对不同版本的 TypeScript 的支持。

如果当前应用目录中安装了与内置服务不同版本的 TypeScript，我们就可以点击 VS Code 底部工具栏的版本号信息，从而实现 “use VS Code's Version” 和 “use Workspace's Version” 两者之间的随意切换。

除此之外，VS Code 也基于 TypeScript 语言服务提供了准确的代码自动补全功能，并显示详细的类型定义信息，大大的提升了我们的开发效率。

1）全局安装TypeScript：

2）初始化配置文件：

执行之后，项目根目录会出现一个 tsconfig.json 文件，里面包含ts的配置项（可能因为版本不同而配置略有不同）。

可以在 package.json 中加入script命令：

3）编译ts代码：

TSLint 是一个通过 tslint.json 进行配置的插件，在编写TypeScript代码时，可以对代码风格进行检查和提示。如果对代码风格有要求，就需要用到TSLint了。其使用步骤如下： （1）在全局安装TSLint：

（2）使用TSLint初始化配置文件：

执行之后，项目根目录下多了一个 tslint.json 文件，这就是TSLint的配置文件了，它会根据这个文件对代码进行检查，生成的 tslint.json 文件有下面几个字段：

这些字段的含义如下；

在说TypeScript数据类型之前，先来看看在TypeScript中定义数据类型的基本语法。

在语法层面，缺省类型注解的 TypeScript 与 JavaScript 完全一致。因此，可以把 TypeScript 代码的编写看作是为 JavaScript 代码添加类型注解。

在 TypeScript 语法中，类型的标注主要通过类型后置语法来实现：“ 变量: 类型 ”

在 JavaScript 中，原始类型指的是 非对象且没有方法 的数据类型，包括：number、boolean、string、null、undefined、symbol、bigInt。

它们对应的 TypeScript 类型如下：

JavaScript原始基础类型TypeScript类型 numbernumber booleanboolean stringstring nullnull undefinendefined symbolsymbol bigIntbigInt

需要注意 number 和 Number 的区别：TypeScript中指定类型的时候要用 number ，这是TypeScript的类型关键字。而 Number 是 JavaScript 的原生构造函数，用它来创建数值类型的值，这两个是不一样的。包括 string 、 boolean 等都是TypeScript的类型关键字，而不是JavaScript语法。

TypeScript 和 JavaScript 一样，所有数字都是 浮点数 ，所以只有一个 number 类型。

TypeScript 还支持 ES6 中新增的二进制和八进制字面量，所以 TypeScript 中共支持 2、8、10和16 这四种进制的数值：

字符串类型可以使用单引号和双引号来包裹内容，但是如果使用 Tslint 规则，会对引号进行检测，使用单引号还是双引号可以在 Tslint 规则中进行配置。除此之外，还可以使用 ES6 中的模板字符串来拼接变量和字符串会更为方便。

类型为布尔值类型的变量的值只能是true或者false。除此之外，赋值给布尔值的值也可以是一个计算之后结果为布尔值的表达式：

在 JavaScript 中，undefined和 null 是两个基本数据类型。在 TypeScript 中，这两者都有各自的类型，即 undefined 和 null，也就是说它们既是实际的值，也是类型。这两种类型的实际用处不是很大。

注意，第一行代码可能会报一个tslint的错误： Unnecessary initialization to 'undefined' ，就是不能给一个变量赋值为undefined。但实际上给变量赋值为undefined是完全可以的，所以如果想让代码合理化，可以配置tslint，将" no-unnecessary-initializer "设置为 false 即可。

默认情况下，undefined 和 null 是所有类型的子类型，可以赋值给任意类型的值，也就是说可以把 undefined 赋值给 void 类型，也可以赋值给 number 类型。当在 tsconfig.json 的"compilerOptions"里设置为 "strictNullChecks": true 时，就必须严格对待了。这时 undefined 和 null 将只能赋值给它们自身或者 void 类型。这样也可以规避一些错误。

BigInt是ES6中新引入的数据类型，它是一种内置对象，它提供了一种方法来表示大于 2- 1 的整数，BigInt可以表示任意大的整数。

使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了JavaScript构造函数 Number 能够表示的安全整数范围。

我们知道，在 JavaScript 中采用双精度浮点数，这导致精度有限，比如 Number.MAX_SAFE_INTEGER 给出了可以安全递增的最大可能整数，即 2- 1 ，来看一个例子:

可以看到，最终返回了true，这就是超过精读范围造成的问题，而 BigInt 正是解决这类问题而生的:

这里需要用 BigInt(number) 把 Number 转化为 BigInt ，同时如果类型是 BigInt ，那么数字后面需要加 n 。

在TypeScript中， number 类型虽然和 BigInt 都表示数字，但是实际上两者类型是完全不同的:

symbol我们平时用的比较少，所以可能了解也不是很多，这里就详细来说说symbol。

symbol 是 ES6 新增的一种基本数据类型，它用来表示独一无二的值，可以通过 Symbol 构造函数生成。

注意：Symbol 前面不能加 new关键字，直接调用即可创建一个独一无二的 symbol 类型的值。

可以在使用 Symbol 方法创建 symbol 类型值的时候传入一个参数，这个参数需要是一个字符串。如果传入的参数不是字符串，会先自动调用传入参数的 toString 方法转为字符串：

上面代码的第三行可能会报一个错误：This condition will always return 'false' since the types 'unique symbol' and 'unique symbol' have no overlap. 这是因为编译器检测到这里的 s1 === s2 始终是false，所以编译器提醒这代码写的多余，建议进行优化。

上面使用Symbol创建了两个symbol对象，方法中都传入了相同的字符串，但是两个symbol值仍然是false，这就说明了 Symbol 方法会返回一个独一无二的值。Symbol 方法传入的这个字符串，就是方便我们区分 symbol 值的。可以调用 symbol 值的 toString 方法将它转为字符串：

在TypeScript中使用symbol就是指定一个值的类型为symbol类型：

在ES6中，对象的属性是支持表达式的，可以使用于一个变量来作为属性名，这对于代码的简化有很多用处，表达式必须放在大括号内：

symbol 也可以作为属性名，因为symbol的值是独一无二的，所以当它作为属性名时，不会与其他任何属性名重复。当需要访问这个属性时，只能使用这个symbol值来访问（必须使用方括号形式来访问）：

在使用obj.name访问时，实际上是字符串name，这和访问普通字符串类型的属性名是一样的，要想访问属性名为symbol类型的属性时，必须使用方括号。方括号中的name才是我们定义的symbol类型的变量name。

使用 Symbol 类型值作为属性名，这个属性是不会被 for…in遍历到的，也不会被 Object.keys() 、 Object.getOwnPropertyNames() 、 JSON.stringify() 等方法获取到：

虽然这些方法都不能访问到Symbol类型的属性名，但是Symbol类型的属性并不是私有属性，可以使用 Object.getOwnPropertySymbols 方法获取对象的所有symbol类型的属性名：

除了这个方法，还可以使用ES6提供的 Reflect 对象的静态方法 Reflect.ownKeys ，它可以返回所有类型的属性名，Symbol 类型的也会返回：

Symbol 包含两个静态方法， for 和 keyFor 。 1）Symbol.for()

用Symbol创建的symbol类型的值都是独一无二的。使用 Symbol.for 方法传入字符串，会先检查有没有使用该字符串调用 Symbol.for 方法创建的 symbol 值。如果有，返回该值；如果没有，则使用该字符串新创建一个。使用该方法创建 symbol 值后会在全局范围进行注册。

上面代码中，创建了一个iframe节点并把它放在body中，通过这个 iframe 对象的 contentWindow 拿到这个 iframe 的 window 对象，在 iframe.contentWindow上添加一个值就相当于在当前页面定义一个全局变量一样。可以看到，在 iframe 中定义的键为 TypeScript 的 symbol 值在和在当前页面定义的键为'TypeScript'的symbol 值相等，说明它们是同一个值。

2）Symbol.keyFor() 该方法传入一个 symbol 值，返回该值在全局注册的键名：

看完简单的数据类型，下面就来看看比较复杂的数据类型，包括JavaScript中的数组和对象，以及TypeScript中新增的元组、枚举、Any、void、never、unknown。

在 TypeScript 中有两种定义数组的方式：

以上两种定义数组类型的方式虽然本质上没有任何区别，但是更推荐使用第一种形式来定义。一方面可以避免与 JSX 语法冲突，另一方面可以减少代码量。

注意，这两种写法中的 number 指定的是数组元素的类型，也可以在这里将数组的元素指定为其他任意类型。如果要指定一个数组里的元素既可以是数值也可以是字符串，那么可以使用这种方式： number|string[] 。

在JavaScript中，object是引用类型，它存储的是值的引用。在TypeScript中，当想让一个变量或者函数的参数的类型是一个对象的形式时，可以使用这个类型：

可以看到，当给一个对象类型的变量赋值一个对象时，就会报错。对象类型更适合以下场景:

在 JavaScript 中并没有元组的概念，作为一门动态类型语言，它的优势是支持多类型元素数组。但是出于较好的扩展性、可读性和稳定性考虑，我们通常会把不同类型的值通过键值对的形式塞到一个对象中，再返回这个对象，而不是使用没有任何限制的数组。TypeScript 的元组类型正好弥补了这个不足，使得定义包含固定个数元素、每个元素类型未必相同的数组成为可能。

元组可以看做是数组的扩展，它表示已知元素数量和类型的数组，它特别适合用来实现多值返回。确切的说，就是已知数组中每一个位置上的元素的类型，可以通过元组的索引为元素赋值：：

可以看到，定义的arr元组中，元素个数和元素类型都是确定的，当为arr赋值时，各个位置上的元素类型都要对应，元素个数也要一致。

当访问元组元素时，TypeScript也会对元素做类型检查，如果元素是一个字符串，那么它只能使用字符串方法，如果使用别的类型的方法，就会报错。

在TypeScript 新的版本中，TypeScript会对元组做越界判断。超出规定个数的元素称作越界元素，元素赋值必须类型和个数都对应，不能超出定义的元素个数。

这里定义了接口 Tuple ，它继承数组类型，并且数组元素的类型是 number 和 string 构成的联合类型，这样接口 Tuple 就拥有了数组类型所有的特性。并且指定索引为0的值为 string 类型，索引为1的值为 number 类型，同时指定 length 属性的类型字面量为 2，这样在指定一个类型为这个接口 Tuple 时，这个值必须是数组，而且如果元素个数超过2个时，它的length就不是2是大于2的数了，就不满足这个接口定义了，所以就会报错；当然，如果元素个数不够2个也会报错，因为索引为0或1的值缺失。

TypeScript 在 ES 原有类型基础上加入枚举类型，使得在 TypeScript 中也可以给一组数值赋予名字，这样对开发者比较友好。枚举类型使用enum来定义：

上面定义的枚举类型的Roles，它有三个值，TypeScript会为它们每个值分配编号，默认从0开始，在使用时，就可以使用名字而不需要记数字和名称的对应关系了：

除此之外，还可以修改这个数值，让SUPER_ADMIN = 1，这样后面的值就分别是2和3。当然还可以给每个值赋予不同的、不按顺序排列的值：

我们可以将一个值定义为any类型，也可以在定义数组类型时使用any来指定数组中的元素类型为任意类型：

any 类型会在对象的调用链中进行传导，即any 类型对象的任意属性的类型都是 any，如下代码所示：

需要注意：不要滥用any类型，如果代码中充满了any，那TypeScript和JavaScript就毫无区别了，所以除非有充足的理由，否则应该尽量避免使用 any ，并且开启禁用隐式 any 的设置。

void 和 any 相反，any 是表示任意类型，而 void 是表示没有类型，就是什么类型都不是。这在 定义函数，并且函数没有返回值时会用到 ：

需要注意： void 类型的变量只能赋值为 undefined 和 null ，其他类型不能赋值给 void 类型的变量。

never 类型指永远不存在值的类型，它是那些 总会抛出异常 或 根本不会有返回值的函数表达式的返回值 类型，当变量被永不为真的类型保护所约束时，该变量也是 never 类型。

下面的函数，总是会抛出异常，所以它的返回值类型是never，用来表明它的返回值是不存在的：

never 类型是任何类型的子类型，所以它可以赋值给任何类型；而没有类型是 never 的子类型，所以除了它自身以外，其他类型（包括 any 类型）都不能为 never 类型赋值。

上面代码定义了一个立即执行函数，函数体是一个死循环，这个函数调用后的返回值类型为 never，所以赋值之后 neverVariable 的类型是 never 类型，当给neverVariable 赋值 123 时，就会报错，因为除它自身外任何类型都不能赋值给 never 类型。

基于 never 的特性，我们可以把 never 作为接口类型下的属性类型，用来禁止操作接口下特定的属性：

可以看到，无论给 props.name 赋什么类型的值，它都会提示类型错误，这就相当于将 name 属性设置为了只读 。

unknown 是TypeScript在3.0版本新增的类型，主要用来描述类型并不确定的变量。它看起来和any很像，但是还是有区别的，unknown相对于any更安全。

对于any，来看一个例子：

上面这些语句都不会报错，因为value是any类型，所以后面三个操作都有合法的情况，当value是一个对象时，访问name属性是没问题的；当value是数值类型的时候，调用它的toFixed方法没问题；当value是字符串或数组时获取它的length属性是没问题的。

当指定值为unknown类型的时候，如果没有 缩小类型范围 的话，是不能对它进行任何操作的。总之，unknown类型的值不能随便操作。那什么是类型范围缩小呢？下面来看一个例子：

这里由于把value的类型缩小为Date实例的范围内，所以进行了value.toISOString()，也就是使用ISO标准将 Date 对象转换为字符串。

使用以下方式也可以缩小类型范围：

关于 unknown 类型，在使用时需要注意以下几点：

在实际使用中，如果有类型无法确定的情况，要尽量避免使用 any，因为 any 会丢失类型信息，一旦一个类型被指定为 any，那么在它上面进行任何操作都是合法的，所以会有意想不到的情况发生。因此如果遇到无法确定类型的情况，要先考虑使用 unknown。

Ⅶ typescript教程是什么

没有挂网公布

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

TypeScript添加了很多尚未正式发布的ECMAScript新特性（如装饰器）。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。当前最新版本为TypeScript 4.0。

Ⅷ 来做操吧！深入 TypeScript 高级类型和类型体操

TypeScript 给 JavaScript 扩展了类型的语法，我们可以给变量加上类型，在编译期间会做类型检查，配合编辑器还能做更准确的智能提示。此外，TypeScript 还支持了高级类型用于增加类型系统的灵活性。

就像 JavaScript 的高阶函数是生成函数的函数，React 的高阶组件是生成组件的组件一样，Typescript 的高级类型就是生成类型的类型。

TypeScript 高级类型是通过 type 定义的有类型参数（也叫泛型）的类型，它会对传入的类型参数做一系列的类型计算，产生新的类型。

type Pick = {

[P in K]: T[P];

};

比如，这个 Pick 就是一个高级类型，它有类型参数 T 和 K，类型参数经过一系列的类型计算逻辑，会返回新的类型。

TypeScript 高级类型会根据类型参数求出新的类型，这个过程会涉及一系列的类型计算逻辑，这些类型计算逻辑就叫做类型体操。当然，这并不是一个正式的概念，只是社区的戏称，因为有的类型计算逻辑是比较复杂的。

TypeScript 的类型系统是图灵完备的，也就是说它能描述任何可计算逻辑，简单点来说就是循环、条件判断等该有的语法都有。

既然 TypeScript 的类型系统这么强，那我们就做一些高级类型的类型体操来感受下吧。

我们会做这些体操：

用 ts 类型实现加法

用 ts 类型生成重复 N 次的字符串

用 ts 类型实现简易的 js parser（部分）

用 ts 类型实现对象属性按条件过滤

我把这些体操分为数字类的、字符串类的、对象类的，把这三种类型计算逻辑的规律掌握了，相信你的体操水平会提升一截。

TypeScript 类型语法基础

在做体操之前，要先过一下 TypeScript 的类型语法，也就是能做哪些类型计算逻辑。

既然说该有的语法都有，那我们来看下循环和判断都怎么做：

ts 类型的条件判断

图片

ts 类型的条件判断的语法是 条件 ? 分支1 : 分支2 。

extends 关键字是用于判断 A 是否是 B 类型的。例子中传入的类型参数 T 是 1，是 number 类型，所以最终返回的是 true。

ts 类型的循环

图片ts 类型没有循环，但可以用递归来实现循环。

我们要构造一个长度为 n 的数组，那么就要传入长度的类型参数 Len、元素的类型参数 Ele、以及构造出的数组的类型参数 Arr（用于递归）。

然后类型计算逻辑就是判断 Arr 的 length 是否是 Len，如果是的话，就返回构造出的 Arr，不是的话就往其中添加一个元素继续构造。

这样，我们就递归的创建了一个长度为 Len 的数组。

ts 类型的字符串操作

ts 支持构造新的字符串：

图片

也支持根据模式匹配来取字符串中的某一部分：

图片

ts 类型的对象操作

ts 支持对对象取属性、取值：

图片

也可以创建新的对象类型：

图片

通过 keyof 取出 obj 的所有属性名，通过 in 遍历属性名并取对应的属性值，通过这些来生成新的对象类型 newObj。

我们过了一下常用的 ts 类型的语法，包括条件判断、循环（用递归实现）、字符串操作（构造字符串、取某部分子串）、对象操作（构造对象、取属性值）。接下来就用这些来做操吧。

ts 类型体操练习

我们把体操分为 3 类来练习，之后再分别总结规律。

数字类的类型体操

体操 1：实现高级类型 Add，能够做数字加法。

ts 类型能做数字加法么？肯定可以的，因为它是图灵完备的，也就是各种可计算逻辑都可以做。

那怎么做呢？

数组类型可以取 length 属性，那不就是个数字么。可以通过构造一定长度的数组来实现加法。

上文我们实现了通过递归的方式实现了构造一定长度的新数组的高级类型：

type createArray = Arr['length'] extends Len ? Arr : createArray

那只要分别构造两个不同长度的数组，然后合并到一起，再取 length 就行了。

type Add = [...createArray, ...createArray ]['length']

我们测试下：

图片

我们通过构造数组的方式实现了加法！

小结下：ts 的高级类型想做数字的运算只能用构造不同长度的数组再取 length 的方式，因为没有类型的加减乘除运算符。

字符串类的体操

体操2：把字符串重复 n 次。

字符串的构造我们前面学过了，就是通过 ${A}${B} 的方式，那只要做下计数，判断下重复次数就行了。

计数涉及到了数字运算，要通过构造数组再取 length 的方式。

所以，我们要递归的构造数组来计数，并且递归的构造字符串，然后判断数组长度达到目标就返回构造的字符串。

所以有 Str（待重复的字符串）、Count（重复次数）、Arr（用于计数的数组）、ResStr（构造出的字符串）四个类型参数：

type RepeactStr<str p="" string,

Count,

Arr extends Str[] = [],

ResStr extends string = ''>

= Arr['length'] extends Count

? ResStr

: RepeactStr ;

我们递归的构造了数组和字符串，判断构造的数组的 length 如果到了 Count，就返回构造的字符串 ResStr，否则继续递归构造。

测试一下：

图片

小结：递归构造字符串的时候要通过递归构造数组来做计数，直到计数满足条件，就生成了目标的字符串。

这个体操只用到了构造字符串，没用到字符串通过模式匹配取子串，我们再做一个体操。

体操3: 实现简易的 JS Parser，能解析字符串 add(11,22) 的函数名和参数

字符串的解析需要根据模式匹配取子串。这里要分别解析函数名（functionName）、括号（brackets）、数字（num）、逗号（comma），我们分别实现相应的高级类型。

解析函数名

函数名是由字母构成，我们只要一个个字符一个字符的取，判断是否为字母，是的话就记录下该字符，然后对剩下的字符串递归进行同样的处理，直到不为字母的字符，通过这样的方式就能取出函数名。

我们先定义字母的类型：

type alphaChars = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm'

| 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z'

| 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M'

| 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';

还有保存中间结果的类型：

type TempParseResult = {

token: Token,

rest: Rest

}

然后就一个个取字符来判断，把取到的字符构造成字符串存入中间结果：

type parseFunctionName

= SourceStr extends `${infer PrefixChar}${infer RestStr}`

? PrefixChar extends alphaChars

? parseFunctionName

: TempParseResult

: never;

我们取了单个字符，然后判断是否是字母，是的话就把取到的字符构造成新的字符串，然后继续递归取剩余的字符串。

测试一下：

图片

图片

符合我们的需求，我们通过模式匹配取子串的方式解析出了函数名。

然后继续解析剩下的。

解析括号

括号的匹配也是同样的方式，而且括号只有一个字符，不需要递归的取，取一次就行。

type brackets = '(' | ')';

type parseBrackets

= SourceStr extends `${infer PrefixChar}${infer RestStr}`

? PrefixChar extends brackets

? TempParseResult

: never

: never;

测试一下：

图片

继续解析剩下的：

解析数字

数字的解析也是一个字符一个字符的取，判断是否匹配，匹配的话就递归取下一个字符，直到不匹配：

type numChars = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';

type parseNum

= SourceStr extends `${infer PrefixChar}${infer RestStr}`

? PrefixChar extends numChars

? parseNum

: TempParseResult

: never;

测试一下：

图片

继续解析剩下的：

解析逗号

逗号和括号一样，只需要取一个字符判断即可，不需要递归。

type parseComma

= SourceStr extends `${infer PrefixChar}${infer RestStr}`

? PrefixChar extends ','

? TempParseResult

: never

: never;

测试一下：

图片

至此，我们完成了所有的字符的解析，解析来按照顺序组织起来就行。

整体解析

单个 token 的解析都做完了，整体解析就是组织下顺序，每次解析完拿到剩余的字符串传入下一个解析逻辑，全部解析完，就可以拿到各种信息。

type parse

= parseFunctionName extends TempParseResult

? parseBrackets extends TempParseResult

? parseNum extends TempParseResult

? parseComma extends TempParseResult

? parseNum extends TempParseResult

? parseBrackets extends TempParseResult

? {

functionName: FunctionName,

params: [Num1, Num2],

}: never: never: never: never : never : never;

测试一下：

图片

大功告成，我们用 ts 类型实现了简易的 parser！

小结：ts 类型可以通过模式匹配的方式取出子串，我们通过一个字符一个字符的取然后判断的方式，递归的拆分 token，然后按照顺序拆分出 token，就能实现字符串的解析。

完整代码如下：

type numChars = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';

type alphaChars = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm'

| 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z'

| 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M'

| 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';

type TempParseResult = {

token: Token,

rest: Rest

}

type parseFunctionName =

SourceStr extends `${infer PrefixChar}${infer RestStr}`

? PrefixChar extends alphaChars

? parseFunctionName

: TempParseResult

: never;

type brackets = '(' | ')';

type parseBrackets

= SourceStr extends `${infer PrefixChar}${infer RestStr}`

? PrefixChar extends brackets

? TempParseResult

: never

: never;

type parseNum

= SourceStr extends `${infer PrefixChar}${infer RestStr}`

? PrefixChar extends numChars

? parseNum

: TempParseResult

: never;

type parseComma

= SourceStr extends `${infer PrefixChar}${infer RestStr}`

? PrefixChar extends ','

? TempParseResult

: never

: never;

type parse

= parseFunctionName extends TempParseResult

? parseBrackets extends TempParseResult

? parseNum extends TempParseResult

? parseComma extends TempParseResult

? parseNum extends TempParseResult

? parseBrackets extends TempParseResult

? {

functionName: FunctionName,

params: [Num1, Num2],

}: never: never: never: never : never : never;

type res = parse;

对象类的体操

体操4：实现高级类型，取出对象类型中的数字属性值

构造对象、取属性名、取属性值的语法上文学过了，这里组合下就行：

type filterNumberProp = {

[Key in keyof T] : T[Key] extends number ? T[Key] : never

}[keyof T];

我们构造一个新的对象类型，通过 keyof 遍历对象的属性名，然后对属性值做判断，如果不是数字就返回 never，然后再取属性值。

属性值返回 never 就代表这个属性不存在，就能达到过滤的效果。

测试一下：

图片

小结：对象类型可以通过 {} 构造新对象，通过 [] 取属性值，通过 keyof 遍历属性名，综合这些语法就可以实现各种对象类型的逻辑。

总结

TypeScript 给 JavaScript 扩展了类型的语法，而且还支持了高级类型来生成类型。

TypeScript 的类型系统是图灵完备的，可以描述任何可计算逻辑：

有 ? : 可以做条件判断，常配合 extends 使用

通过递归可以实现循环

可以做对象的构造 {}、取属性名 keyof、取属性值 T[Key]

可以做字符串的构造 ${a}${b}，字符串的模式匹配来取子串 str extends ${infer x}${infer y}

我们分别做了这些类型体操：

ts 实现加法：通过递归构造数组再取长度

ts 实现重复字符串：递归构造数组来计数，然后递归构造字符串

ts 实现 parser：通过字符串模式匹配取子串的方式来解析每一部分，最后组合调用

ts 实现对象属性过滤：通过构造对象、取属性名、取值的语法组合调用

其中要注意的就是数字类的要通过构造数组取长度的方式来计算，再就是字符串的模式匹配结合 infer 保存中间结果来取子串，这两个是相对难度大一些的。

其实各种高级类型，只要熟悉了 ts 类型语法，想清楚了逻辑就能一步步写出来，和写 JS 逻辑没啥本质区别，只不过它是用于生成类型的逻辑。

读到这里，是不是感觉高级类型的类型体操也没有啥难度了呢？

Ⅸ 如何评价 TypeScript

现在的Javascript遵循ECMA5的规范，TypeScript是语法上对ECMA6的实现。但现在的TypeScript需要编译（不是真正的编译，其实就是语法处理）后转换成Javascript才能执行。

对于Javascript来说TypeScript就像来自未来的自己。

TypeScript可以做Javascript能做到的所有事，并且还能做Javascript不能做到的事。
比如：
1：搞面向对象巨方便
2：可选的强类型可以让你在程序运行之前多发现一些错误
3：为IDE给javascript弹智能提示打下了良好的基础