类型即正义：TypeScript 从入门到实践（一）

> 作者：一只图雀

仓库：Github 、Gitee

图雀社区主站（首发）：图雀社区

博客：掘金、知乎、慕课

公众号：图雀社区

联系我：关注公众号后可以加图雀酱微信哦

原创不易，❤️点赞+评论+收藏 ❤️三连，鼓励作者写出更好的教程。

欢迎阅读 类型即正义，TypeScript 从入门到实践系列：

• 《类型即正义：TypeScript 从入门到实践（序章）》
• 《类型即正义：TypeScript 从入门到实践（一）》
• 《类型即正义：TypeScript 从入门到实践（二）》

源起

JavaScript 已经占领了世界上的每一个角落，能访问网页的地方，基本上就有 JavaScript 在运作，然而 JavaScript 因为其动态、弱类型、解释型语言的特性、出错的调用栈隐蔽，使得开发者不仅在调试错误上花费大把时间，在团队协作开发时理解队友编写代码也极其困难。TypeScript 的出现极大的解决了上面的问题，TypeScript – 一个 JavaScript 的超集，它作为一门编译型语言，提供了对类型系统和最新 ES 语法的支持，使得我们可以在享受使用 ES 最新语法的编写代码的同时，还能在写代码的过程中就规避很多潜在的语法、语义错误；并且其提供的类型系统使得我们可以在团队协作编写代码时可以很容易的了解队友代码的含义：输入和输出，大大提高了团队协作编写大型业务应用的效率。在现代 JavaScript 世界中，已经有很多大型库在使用 TypeScript 重构，包括前端三大框架：React、Vue、Angular，还有知名的组件库 antd，material，在很多公司内部的大型业务应用也在用 TypeScript 开发甚至重写现有的应用，所以如果你想编写大型业务应用或库，或者想写出更利于团队协作的代码，那么 TypeScript 有十足的理由值得你学习！本文是 TypeScript 系列教程的第一篇，主要通过使用 antd 组件库实战演练一个 TypeScript 版本 React TodoList 应用来讲解 TypeScript 的语法，使得你能在学会语法的同时还能完成一个实际可运行的项目。

本文所涉及的源代码都放在了 Github 或者 Gitee 上，如果您觉得我们写得还不错，希望您能给❤️这篇文章点赞+Github 或 Gitee仓库加星❤️哦~

此教程属于 React 前端工程师学习路线的一部分，欢迎来 Star 一波，鼓励我们继续创作出更好的教程，持续更新中~

代码准备

我们接下来要讲解的整个 **类型即正义：TypeScript 从入门到实践 **系列是基于一个实战项目的，这个实战项目会贯穿整个系列教程的讲解周期，所以我们要尽可能全且精炼的讲解 TypeScript 语法知识的同时，还我们需要一个恰到好处的实战项目，因为准备项目代码的过程不是系列教程讲解的主线，所以如果你有兴趣学习如何搭建 TypeScript React 的开发环境，那么可以学习一下我们的序言教程：

类型即正义：TypeScript 从入门到实践（序章）
**
如果你已经对 TypeScript 如何搭建 React 开发环境，配置 Ant Design 组件库等很熟悉，或者不太感兴趣，那么你也可以直接克隆我们为你准备好的代码：

如果你偏爱 码云，那么你可以运行如下命令来获取初始代码：

git clone -b initial-code https://gitee.com/tuture/typescript-tea.git
cd typescript-tea && npm install && npm start

如果你偏爱 Github，那么你可以运行如下命令来获取初始代码：

git clone -b initial-code git@github.com:tuture-dev/typescript-tea.git
cd typescript-tea && npm install && npm start

通过上面的命令克隆初始代码之后，然后把项目跑起来，你应该可以看到如下效果：





Boom！！！一个暗黑模式的 TodoList，心动了嘛？不管心不心动，你都可以愉快的开始接下来的 TypeScript 学习了✌️。

TypeScript 初探

正式 TS 时间☕️，TS 是一门静态编程语言，它是 JavaScript 的超集。首先我们先来解释一下什么是编程语言，然后我们再来引出 TypeScript 是什么。

编程语言是什么？

那么什么是编程语言了？编程语言是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧，用来向计算机发出指令。


我们拿 JS 来举例，一门标准的编程语言一般包含如下几个部分：

• 数据结构：如原始数据类型 string/number/void 等，非原始数据类型 array/object/enum 等
• 控制结构：如 if/else 、 switch 、while、for 循环等
• 组织结构：如 函数、类
• 特性：如 JS 的原型链
• 常用的 API：如 isNaN 判断是不是非数字，toFixed 将小数进行四舍五入操作
• 运行环境：如 浏览器端的 JavaScript、服务器端的 Node

其中前五种又称为语言内核，也就是我们常常喊的 ECMAScript 2015，或者 ES6；最后一个运行环境在浏览器端结合 BOM/DOM 即成为 JavaScript，在服务器端结合一些文件/网络的操作即成为 Node。

TypeScript 是什么？

而 TS，作为 JavaScript 的超集，包含着两类属性：

• 属于 JavaScript 端的编程语言特性，使得我们可以执行各种 JavaScript 相关的操作：变量声明、编写 if/else 控制流、使用循环处理重复任务、使用函数执行特定的任务块、使用类来组织和复用代码和模拟真实世界的操作等，还有新特性比如：装饰器、Iterator、Generator 这些。这类特性在此篇文章中，我们默认你已经很清楚了，不会做过多的讲解。
• 属于 TypeScript 端独有的特性：类型，它也具有一套编程语言的特性，比如标志一个变量是 string 类型，一个函数的参数有三个，它们的类型分别是 string/number/boolean，返回类型为 never等，这是基础类型，我们甚至可以基于类型进行编程，使用类型版本的控制、组织结构来完成高级类型的编写，进而将类型附着在 JavaScript 对应的编程语言特性上，将 JS 静态化，使得我们可以在编译期间就能发现类型上的错误，这一特性是我们本篇文章的重点。

好的，读到这里，相比很多读者已经清楚了，其实 TS 没什么神秘的，主要就是设计了一套类似编程语言的类型语言，然后将这些类型附着在原 JavaScript 的语言之上，给其加上类型限制使得其静态化，进而可以快速的在编写时发现很多潜在的问题，帮助我们编写错误率更低，更适合团队协作的代码，这也是 TypeScript 适合编写大型的业务应用的原因。

类型语言之数据结构

其中 TS 数据结构又包含原始类型、非原始类型、特殊类型和高级类型等几类。我们将结合在 TS 类型侧的定义，以及附着在 JS 上进行实战来讲解。

原始类型

TS 类型侧的定义

和 JS 中的原始数据类型一样，TS 对应着一致的类型定义，包括下面八种：

• number
• string
• boolean
• null
• undefined
• void
• symbol
• bigint

提示
其中前六种是 ES5 中就有的，symbol 从 ES6 开始引入，bigint 是 ES2020 新引进的。

上面是 TS 的原始类型，我们之前提到 TS 就是将类型附着在 JS 上，将其类型化，那么我们来看看上面的原始类型如何附着在 JS 上，将其类型化。

附着在 JS 上的实战

TS 通过独特的冒号语法来将其类型侧定义的类型附着在 JS 上，我们来看几个例子：


用 JS 语言来写图雀社区的 Slogan，我们一般会这么写：

const tutureSlogan = '图雀社区，汇聚精彩的免费实战教程';

我们可以确定，这句 Slogan 是一个 string 类型的，所以我们用对应的 TS 类型附着在其变量定义上如下：

const tutureSlogan: string = '图雀社区，汇聚精彩的免费实战教程';

这样我们就给原 JS 的 tutureSlogan 变量加上了类型定义，它是一个 string 类型的变量，通过这样的操作，原 JS 变量的类型就被静态化了，在初始化时，就不能再赋值其他的类型给这个 tutureSlogan 变量了，比如我们将 number 类型的字面量赋值给 tutureSlogan ，就会报错：