一、关于 TS
TS => TypeScript：2012/10 由微软开发，是一个开源的、跨平台且带有类型系统的 JS（ES6/7）超集，它可以编译为纯 JS，然后运行在任意的浏览器和其他环境。
TS 是为大型应用之开发而设计，它添加了可选的静态类型、类和模块，让大型 JS 应用可以使用更好的工具并拥有更清晰的结构，目前最新版本：3.1。
类似的语言 flow，facebook 出品，react/vue2 源码在使用，vue3 小尤也规划用 TS 重构。
vue2 部分源码，摘自：vuesrccoreobserverwatcher.js：
/* @flow */
export default class Watcher {
vm: Component;
expression: string;
cb: Function;
id: number;
deep: boolean;
…
deps: Array<Dep>;
newDeps: Array<Dep>;
depIds: SimpleSet;
newDepIds: SimpleSet;
getter: Function;
value: any;
constructor (
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: ?Object,
isRenderWatcher?: boolean
)
…
1、TS 的优势
JS 的痛点：
弱类型 没有面向对象的接口规范 没有命名空间 没有跨文件逻辑预编译能力
TS 的收益：
a.) 更多的规则和类型限制 => 让代码预测性更高，可控性更高，易于维护和调试。
b.) 对模块、命名空间和面向对象的支持 => 更容易组织代码开发大型复杂程序。
c.) 更多的语法糖：类，接口，枚举，泛型，方法重载 => 用简洁的语法丰富了 JavaScript 的使用。
d.) TS 强大的静态编译 /IDE 支持 => 类型检测、语法提示，可以捕获运行之前的错误。
2、安装与运行
全局安装
$ npm i -g typescript
$ tsc -v
运行编译
$ tsc test.ts // 逐个编译
$ tsc *.tsx // 批量编译, tsx 是 jsx 类型的文件
$ tsc test.ts –watch // 实时监控，自动编译
二、基础知识
1、类型声明
基本类型
let name: string = ‘tom’
let age: number = 8
let success: boolean = true
// 联合类型
let x: number | string
x = 1
x = ‘ok’
数组
let arr: number[] = [1, 2]
let arr: Array<number> = [1, 2] // 范型写法
// 只读数组，所有可变方法都被移除了
let arr: ReadonlyArray<number> = [1, 2]
arr.splice(1, ‘x’) // Error
// 元组 Tuple
let arr: [number, string] = [1, ‘ok’]
枚举
enum 类型是对 JS 标准数据类型的一个补充
enum Direction{
Up = 1,
Down,
Left,
Right
}
let c: Color = Direction.Left // 3
数字枚举有自增长的特性，字符串枚举需初始化字面量
Any
不指定类型，任意类型，类似 js 弱类型
let arg: any = 1
let arr: any[] = [1, ‘ok’, false]
Void
void 类型像是与 any 类型相反，表示没有任何类型
function test(arg: string): void {
// …
}
Null/Undefined
默认情况下 null 和 undefined 是所有类型的子类型
let u: undefined = undefined
let n: null = null // 对象？引用类型？堆？
Never
never 类型表示的是那些永不存在的值的类型，常用定义报错回调和无限循环的返回值 never 类型也是任何类型的子类型，也可以赋值给任何类型
function fail(msg: string): never {
throw new Error(msg);
}
泛型
简单的讲就是用户传一个类型的参数，期望得到相同类型的返回值
function identity<T>(arg: T): T {
return arg
}
let idx1: number = identity(11)
let idx2: string = identity(11) // Error
交叉类型
交叉类型，就是将多个类型合并为一个新的类型，类似于继承
function extend<T, U>(first: T, second: U): T & U {
let result = <T & U>{}
for (let key in first) {
(<any>result)[key] = (<any>first)[key]
}
for (let key in second) {
if (!result.hasOwnProperty(key)) {
(<any>result)[key] = (<any>second)[key]
}
}
return result
}
2、Interface（接口）
TS 的核心原则之一是对值所具有的结构进行类型检查，与外界规范化对象参数
interface Animal {
name: string
age?: number // 可选属性
readonly sex: string // 只读属性
}
function test(arg: Animal) {
arg.sex = ‘female’ // Error，不能赋值
}
test({name: ‘tom’, sex: ‘male’}})
接口继承
可以继承多个接口
interface Cat extends Animal1, Animal2 {
friend: string
}
函数类型
接口中定义了类似一个只有形数列表和返回值类型的函数
interface Cat {
(name: string, age: number): void
}
let cat: Cat = function(n: string, a: number) {
console.log(…arguments)
}
类类型
显式地强制一个类满足一个特定的契约。关键字 implements
interface ClockInterface {
current: Date
setTime(d: Date)
}
class Clock implements ClockInterface {
current: Date
setTime(d: Date) {
this.current = d
}
constructor(h: number, m: number) {}
}
接口描述了类的公共的部分，而不是公共和私有两部分。这会阻止你使用它们来检查一个类的实例的私有部分也有特定的类型。
3、类
修饰符
ts 增加了四种修饰符：public、private、protected、readonly
private：仅自己用，不能被继承，外部不可用 protected：派生类可继承，外部不可用 readonly：只读
class Animal {
public name: string
private age: number
protected sex: string
readonly family: string
constructor(arg: any) {
this.name = arg.name
}
}
class Cat extends Animal {
constructor(arg: any) {
super(arg)
this.name = arg.name
this.age = arg.age // 派生类不能继承私有属性
this.sex = arg.sex // OK
this.family = ‘cat’ // Err，只读
}
}
let cat = new Cat({name: ‘tom’, age: 8, sex: ‘male’})
console.log(cat.age) // Err，私有属性不外放
console.log(cat.sex) // Err，保护属性不能在类外访问
抽象类
抽象类做为派生类的基类使用，一般不会直接被实例化，抽象类中的抽象方法也需在派生类中实现
abstract class Animal {
public name: string
abstract setName(name: string): void // 必须在派生类中实现
}
class Cat extends Animal {
constructor(name: string) {
super()
}
setName(name: string) {
this.name = name
}
}
let cat = new Cat(‘tom’)
4、模块与命名空间
命名空间
传统的模块是指外部模块（文件），“内部模块”称作命名空间，使用 namespace 关键字
// namespace1.js
namespace ValidSpace {
const name = ‘tom’
export const sex = ‘male’
export interface ValidCat {
(s: string): boolean
}
}
interface myValid extends ValidSpace.ValidCat {
name: string
}
console.log(ValidSpace.name) // Error
console.log(ValidSpace.sex)
一个命名空间可以分散到多个文件中，访问时如同一个文件，所有内容共享。通过三斜线指令 ///，告诉编译器在编译过程中要引入的额外的文件
/// <reference path=”./namespace1.ts” />
namespace ValidSpace {
export interface Cat extends ValidCat {} // 另一个文件同名空间的接口
console.log(sex) // OK
}
别名引用
命名空间可以嵌套，当引用目录很深时可以使用关键字 import 简化别名，如：import q = x.y.z
namespace Shapes {
export namespace Polygons {
export class Triangle {}
export class Square {}
}
}
import polygons = Shapes.Polygons;
let sq = new polygons.Square()
import 会生成与原始符号不同的引用，所以改变别名的值并不会影响原始变量的值。
5、环境声明
当一些全局的公共的环境变量不被认识时，可以用 declare 操作符创建一个环境声明。声明变量文件一般以 x.d.ts 结尾的文件。
interface CustomConsole {
log(arg : string) : void
}
declare let customConsole : CustomConsole
customConsole.log(‘ 试试 ’) // 成功
TS 默认包含一个名为 lib.d.ts 的文件，声明了 DOM（文档对象模型），还有 BOM（浏览器对象模型）全局变量，无须自己声明了。
三、项目应用
1、配置
webpack 配置：
webpack 需要添加 ts 相关的 loader，webpack3.x 最大支持 ts-loader@3.5.0
$ npm i typescript ts-loader@3.5.0 -D
项目依赖类型库：
如果是 react 项目还需要一些必要的类型库
$ npm i @types/react @types/react-dom @types/styled-components
eslint 的 ts 支持：
eslint 添加 typescript 插件安装
$ npm i typescript-eslint-parser eslint-plugin-typescript -D
.eslint.js 配置
module.exports = {
“root”: true,
“parser”: “typescript-eslint-parser”,
“plugins”: [
“typescript”
],
“parserOptions”: {
“ecmaVersion”: 6,
“ecmaFeatures”: {
“jsx”: true // 启用 JSX
}
},
…
tsconfig 生成与配置：
$ tsc –init
ts 相关配置：
{
“compilerOptions”: {
“target”: “es6”,
“module”: “commonjs”,
“allowJs”: true, // 可以混合开发
“jsx”: “react”,
“sourceMap”: true,
“strict”: true,
“baseUrl”: “./”,
“paths”: {
“@/*”: [“./src/*”],
“assets/*”: [“./src/assets/*”],
“components/*”: [“./src/components/*”],
“config/*”: [“./src/config/*”],
“libs/*”: [“./src/libs/*”],
“module/*”: [“./src/module/*”],
“store/*”: [“./src/store/*”]
},
// “typeRoots”: [],
// “types”: [],
“esModuleInterop”: true,
“experimentalDecorators”: true
},
“exclude”: [
“node_modules”
]
}