深入浅出TypeScript（1）- 概述
- 2019 年 10 月 3 日
- 筆記
前言
在学习TypeScript过程中，我也是遇到了很多的阻力，因为并未有太多深入挖掘的场景，之前做IONIC的时候，也只是用TS，现如今，这一个系列也是记录自己学习和收获，同时希望自己的这系列教程对想要学习TypeScript的同学有一定的帮助，我尽量以简洁的语言以及代码来将我的东西阐述清楚。
如果，在文章中有错误和疏漏，希望大家多多指出和包涵，大家可以通过邮箱来联系我：869345843@qq.com
什么是TypeScript
关于TypeScript有一种很有趣的说法，说TypeScript = Typed + JavaScript，仔细想来，确切的说TypeScript应该是对JavaScript的扩展 + 类型系统，所以这个公式应该是Typed + JavaScript + Extends
而官方文档也说明了一件事情，那就是TypeScript是JavaScript的超集，为了让我们可以无缝从JavaScript切换到TypeScript，微软的TypeScript只是提供了TypeScript到JavaScript的编译，并不包含运行时，它的运行时也就是JavaScript的运行时，所以TypeScript可以说是一种JavaScript的新的编码实现。
TypeScript和JavaScript的类型
先让我们来看一下JavaScript的基本类型系统：Boolean、Null、Undefined、String、Number，以及ES6之后，新增的Symbol类型。
TypeScript有哪些类型呢？下面让我们来看一下TypeScript的基本类型：Boolean、Null、Undefined、String、Number、Symbol + TypeScript扩展的类型。
上方TypeScript的基本类型正是JavaScript的基础类型 + 自行扩展的类型系统。
TypeScript对于JavaScript的扩展类型借鉴了强类型语言的类型系统，有Void、Never、泛型等以及高阶类型。
TypeScript的表达形式
明确了TypeScript和JavaScript类型方面的差异化，我们来看看如何将JavaScript改写成为TypeScript呢？
先上一段JavaScript代码：
let str = 'Hello JavaScript' let num = 10 let arr = [1, 2, 3] const htmlStr = `${str}_${num}_${arr.join()}` document.querySelectorAll('.app')[0].innerHTML = str
对于上述一段代码，如果运行在TypeScript环境下，也是可以正常运行，因为TypeScript是JavaScript的超集，兼容这种写法。
那么，上面的代码，对应TypeScript又是如何的呢？下面我们用代码描述：
let str: string = 'Hello JavaScript' let num: number = 10 let arr[] = [1, 2, 3] //Array<number> const htmlStr = `${str}_${num}_${arr.join()}` document.querySelectorAll('.app')[0].innerHTML = str
由此可见，TypeScript是更规范化的将变量类型声明化，他的格式如下：
let variable: Type = value
TypeScript中的数据类型
说道TypeScript的数据类型，我们就可以用一段代码来展示：
// 原始类型 let bool: boolean = true let num: number = 13 let str: string = 'abc' // 数组 let arr1: number[] = [1, 2, 3] let arr2: Array<number> = [1, 2, 3] let arr3: Array<number | string> = [1, '2'] // 元组 let tuple: [number, string] = [0, '2'] // 特殊数组，限定数组元组类型和个数 tuple.push(2) // [0 , '2', 2] // tuple[2] //不允许越界访问 // 函数 let add = (x: number, y: number): number => x + y let func: (x: number, y: number) => number func = (a, b) => a + b //对象 let obj: object = { x: 1, y: 2 } // obj.x = 100 // wrong let obj2: { x:number, y:number } = { x: 1, y: 2 } obj2.x = 100 //void let noReturn = () => {} void 0 === undefined // any let x // 可以任意赋值 // never 永远不会有返回值 let error = () => { throw new Error() } // 枚举 enum Role { // 数字 或者声明字符串 Teacher, // 默认0开始以下依次+1 Student, // 1 }
TypeScript的类型推断
当然，我们在书写代码的过程中，如果忘记加类型，写出纯JavaScript代码，那么TypeScript也会通过类型推断，帮助我们推断出大部分类型。
比如我们最初的JavaScript代码，类型推断依照代码做出如下说明：
let str = 'Hello JavaScript' str = 100 // error因为赋值操作，已经将str推断为string类型，这样赋值在TypeScript会报错 let num = 10 num = 'some string' // error，此时num已经推断为number类型，不可以将string类型赋值给它 let arr = [1, 2, 3] arr = true // error， 类型推断为数组类型Array<number>，不能赋值Boolen arr = ['1', '2', '3'] // error，类型推断为Array<number>，不能赋值为Array<string>类型 const htmlStr = `${str}_${num}_${arr.join()}` document.querySelectorAll('.app')[0].innerHTML = str
为什么要有类型
由上面代码可以知道，TypeScript对代码进行了比较严格的类型判断，那么我们肯定想问，为什么要这样做？
其实，这样做最大的好处，就可以让代码简单的文档化，并且规范我们的代码操作，避免一些不必要的边界值问题，这对于开发大型应用和写测试用例都有极大的帮助。
而TypeScript却也并未限制我们编码的自由，就像是骑马，如果单纯用JavaScript书写代码，就好像是没有缰绳的骑马，会让我们陷入到危险和抓狂之中，但是有了TypeScript，我们就相当于是有了缰绳，可以使得我们的代码更优雅，也更容易控制和理解。
总结
本篇文章探讨了TypeScript和JavaScript中的类型系统，以及在TypeScript中如何处理类型声明和赋值。同时也暴露了一些灵活性的问题，比如不能将一个字符串数组赋值给数字数组。所以我们如果单一的想要定义一个多类型的数组就会遇到麻烦，但这些不是问题，TypeScript中也存在着解决方案。
在下一篇，我们将会看看TypeScript是如何处理这些要求，以及如何给予相应的类型限制和定义的。
参考资料：
TypeScript手册：TypeScript
极客时间TypeScript开发实战专栏：TypeScript开发实战
参考书：TypeScript实战指南
参考书：Leaning TypeScript中文版（这本书讲解的TypeScript的版本为1.5+，不是最新版本，如果买书，不建议买，可以购买上本参考书TypeScript实战指南）
