TypeScript 简明教程：认识 TypeScript

本文为系列文章《TypeScript 简明教程》中的一篇。

1. 认识 TypeScript
2. 安装 TypeScript

做为一名 JavaScript 开发者，若是你总在担忧代码上线后会不会冷不丁报个 undefined，若是你写代码时总须要在文件间来回跳转查阅接口，若是你正准备接手一个大型 JS 项目，那么，该是时候考虑使用 TypeScript 了。

TypeScript 是什么

根据 TS 官网 的介绍：TypeScript 是 JavaScript 类型的超集，它能够编译成纯 JavaScript。换句话说，TypeScript 就是加强版的 JavaScript。这一点，从 TypeScript 的名字也能够看出，TypeScript = Type（类型） + JavaScript。

那么，为何要给 JavaScript 来这么个『加强』了？这就要从 JavaScript 的发展史提及了。

最初，JavaScript 是专为浏览器而设计的语言。起初只是用于处理基本的用户交互，好比表单处理、显示弹窗等。JS 自己做为一门动态语言，并无类型系统，由于它压根就不是为了建造大型应用而设计的。

但是最近几年，JavaScript 飞速发展。Node.js 的出现，使得 JS 再也不局限于浏览器中；而 SPA（单页应用）的流行，使得前端逐渐迈向工程化，项目的代码量急速膨胀。随之而来的问题就是，与 C#、Java 等更成熟的语言不一样，JS 并不具有这样的规模化能力。松散的代码、纷乱的类型为项目带来了更多的不可控性和不肯定性。

为了解决这个问题，大公司们开始寻求解决方案。而 TypeScript 就是 Microsoft 给出的回答，而且由 C# 之父 Anders Hejlsberg 领衔打造。

TypeScript 为 JavaScript 补全了构建大型应用时不可或缺的一块：类型系统，为开发者架上了一张安全网。同时，做为 JS 的加强版，TS 仍然存在于 JS 的生态中，你依然可使用 JS 社区提供的各类库，只须要加上一份声明文件便可（多数状况下社区都有现成的）。

事实证实，TypeScript 是成功的。近两年来，TypeScript 的发展势头很猛。就拿前端三大框架来讲，根据 Evan You 发布的 Vue 3.0 计划，Vue 3.0 将彻底使用 TypeScript 重写；React 及其周边生态都在积极拥抱 TypeScript，知名的 React 组件库 Ant Design 就是使用 TypeScript 编写；Angular 就更不用说了，Angular 自身就是用 TypeScript 编写的，默认使用的开发语言也是 TypeScript。TypeScript 流行程度可见一斑。

值得一提的是，根据 StateOfJS 2018 报告，TypeScript 的使用满意率高达 90%。

什么是类型系统

咱们都知道，JavaScript 中的数据能够分为基础数据类型和引用数据类型。基础数据类型包括：undefined、null、boolean、number、string、symbol（ES6 新增）。除了基础数据类型之外的，就是引用类型，包括：Object、Array、Date、Function、RegExp 等等。这里说的类型其实就是 TypeScript 中的 Type。只不过在 JavaScript 中，咱们不须要把变量的类型明确写出来，并且，同一个变量能够赋值为不一样类型的数据。可是在 TypeScript 中，每个变量的类型都是肯定的，不一样类型的数据之间不能赋值。

举个例子：

// JavaScript
let name = 'Hopsken'
name = 5 // 没啥问题

// TypeScript
let name: string = 'Hopsken'
name = 5    // Error: Type '5' is not assignable to type 'string'.
复制代码

除此之外，TS 中，咱们还能够指明函数的类型。经过声明函数应该接收什么类型的数据，返回什么类型的数据，能够有效地避免许多低级错误的出现。

// TypeScript
function sayHi(person: string) {
    return 'Hi, '![5f17444dc4b93c0801dbc95c2b215d81.gif](evernotecid://CBBD808E-8BA9-4E6F-8C37-654C8A05B11E/appyinxiangcom/10452354/ENResource/p2337)
    + person
}

sayHi(42) // Error: Argument of type '42' is not assignable to parameter of type 'string'.
复制代码

强调：TypeScript 使用静态类型系统，只在编译时进行类型分析，最终编译出的 JS 源码中 **不含任何类型检查的代码**（自行添加的除外）。这一点要与运行时检查加以区分。

总而言之，类型系统就是定义如何将数值和表达式归类为许多不一样的类型，如何操做这些类型，这些类型又该如何互相做用。经过类型，咱们能够确认一个值或者一组值特定的意义和目的。

类型系统的益处

提早检测错误。

静态类型系统的首要优势就是，能尽早发现逻辑错误，而不是到真正上线执行的时候才发现。JavaScript 松散的语法，在带来方便的同时，也让它变得很脆弱。经过上面的两个例子，能够感觉到静态类型分析带来的优点。举个例子，相信很多人在 JavaScript 开发中，都遇到过『强制类型转换』的坑，而使用 TypeScript 则能够有效地避免这种问题，缘由天然是不言而喻。

温馨的开发体验。

首先，类型系统的存在为不少辅助开发的工具提供了可能。好比说，当你调用函数时，现代的编辑器能够清楚地告诉你该函数须要几个参数、参数是什么类型的、哪些参数是可选的。这样能够省去大量查阅 API 的时间，提升开发效率。

其次，类型具备必定的自解释（self-explain）能力。而类型就像是对程序自身的注释。毕竟，代码写出来是让人读的。不少时候，光是看类型自己，咱们就能理解某段程序的意图。与纯人工注释不一样，随着项目的不断迭代，人工注释可能会愈来愈词不达意，但类型标注却能够始终忠实地反映程序自己的意义。

更强大的是，借助某些工具，能够根据类型标注自动生成文档。详情请参阅 typedoc。

更高的抽象性。

类型系统容许程序设计者对程序以较高层次的方式思考，将设计者从烦人的低层次实现中解脱出来，有一种提纲挈领的感受。设计者能够经过设计子系统间的接口，来表达程序的逻辑。也就是说，让设计脱离实现，体现出一种 IDL（接口定义语言）的感受，让程序设计回归本质。

总结

本文主要回答了三个问题：TypeScript 是什么、什么是类型系统、类型系统能够带来什么好处。如今咱们知道，TypeScript 其实是对 JavaScript 的一个补充，让使用 JavaScript 开发大规模应用成为了可能。

TypeScript 是个很是强大的工具，它引入了一系列咱们之前在 JavaScript 程序中没有考虑过的技术概念。TS 为咱们带来的不仅是语法上的变化，更多地是思想上的变化。相信我，随着学习的深刻，对于这一点的感觉会愈来愈深。

下期预告

与 TypeScript 的火爆造成对比，国内围绕 TypeScript 的教程却比较缺少。《TypeScript 简明教程》旨在弥补这一缺失，帮助新手快速上手 TypeScript。下期咱们将讲解 TypeScript 中的基本类型，敬请关注。 (￣▽￣)~