超细致的TypeScript入门与实战

 

本文是向大家介绍TypeScript基础知识及用法，帮助大家快速了解，在前端项目中使用这门技术。TypeScript的类型推断跟 VS Code 的良好搭配让代码效率有了极大提升。静态类型检测，会提示一些潜在的问题，使得开发者代码更严谨，低级错误早发现早解决。同时TypeScript类型定义使得代码的可读性增强，统一规范，可有效降低项目维护成本。

---

1.TypeScript简介

什么是TypeScript？

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

1.1 TypeScript类型系统

从TypeScript的名字就可以看出来，「类型」是其最核心的特性。 我们知道，JavaScript是一门非常灵活的编程语言：

• 它没有类型约束，一个变量可能初始化时是字符串，过一会儿又被赋值为数字。
• 由于隐式类型转换的存在，有的变量的类型很难在运行前就确定。
• 基于原型的面向对象编程，使得原型上的属性或方法可以在运行时被修改。
• 函数可以赋值给变量，也可以当作参数或返回值。

这种灵活性就像一把双刃剑，一方面使得JavaScript蓬勃发展，无所不能。另一方面也使得它的代码质量参差不齐， 维护成本高，运行时错误多。而TypeScript的类型系统，在很大程度上弥补了JavaScript的缺点。

1.2 TypeScript 是静态类型

类型系统按照「类型检查的时机」来分类，可以分为动态类型和静态类型。

• 动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。JavaScript 是一门解释型语言，没有编译阶段，所以它是动态类型。

• 静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。TypeScript 在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查，所以 TypeScript 是静态类型。

1.3 TypeScript 是弱类型

类型系统按照「是否允许隐式类型转换」来分类，可以分为强类型和弱类型。

TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性，所以它们都是弱类型。

在完整保留 JavaScript 运行时行为的基础上，通过引入静态类型系统来提高代码的可维护性，减少可能出现的 bug。以下这段代码不管是在 JavaScript 中还是在 TypeScript 中都是可以正常运行的：

console.log(1 + '1'); // 打印出字符串 '11'

1.4 适用于任何规模

TypeScript 非常适用于大型项目——这是显而易见的，类型系统可以为大型项目带来更高的可维护性，以及更少的 bug。

在中小型项目中推行 TypeScript 的最大障碍就是认为使用 TypeScript 需要写额外的代码，降低开发效率。但事实上，由于有[类型推论][]，大部分类型都不需要手动声明了。相反，TypeScript 增强了编辑器（IDE）的功能，包括代码补全、接口提示、跳转到定义、代码重构等，这在很大程度上提高了开发效率。而且 TypeScript 有近百个[编译选项][]，如果你认为类型检查过于严格，那么可以通过修改编译选项来降低类型检查的标准。

TypeScript 还可以和 JavaScript 共存。这意味着如果你有一个使用 JavaScript 开发的旧项目，又想使用 TypeScript 的特性，那么你不需要急着把整个项目都迁移到 TypeScript，你可以使用 TypeScript 编写新文件，然后在后续更迭中逐步迁移旧文件。如果一些 JavaScript 文件的迁移成本太高，TypeScript 也提供了一个方案，可以让你在不修改 JavaScript 文件的前提下，编写一个[类型声明文件][]，实现旧项目的渐进式迁移。

1.5 安装TypeScript

TypeScript 的命令行工具安装方法如下：

npm install -g typescript

编译文件：

tsc hello.ts

TypeScript 最大的优势之一便是增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等。主流的编辑器都支持 TypeScript，就连VS Code也是基于TypeScript开发的。所以VS Code对TypeScript的支持也是非常好的，强烈推荐大家使用起来。

---

2.TypeScript类型

2.1 基本类型

2.1.1 原始数据类型

原始数据类型包括布尔值boolean、数值number、字符串string、undefined、null、void。

还有ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt