TypeScript 环境搭建

TypeScript 编写的程序并不能直接通过浏览器运行，我们需要先通过 TypeScript 编译器把 TypeScript 代码编译成 JavaScript 代码

TypeScript 的编译器是基于 Node.js 的，所以我们需要先安装 Node.js

Node.js 安装

安装完成以后，通过终端或者 cmd 等命令行工具来调用 node

node -v

通过 NPM 包管理工具安装 TypeScript 编译器

www.npmjs.com/

www.typescriptlang.org/

npm install -g typescript

TypeScript 编译器安装成功以后，会提供一个 tsc 的命令，用于编译我们的 TypeScript 代码文件

tsc -v

如果大家对 node 和 npm 等知识点有疑问或者想深入了解的，我们其它课程中有针对它们的更详细更深入的内容，可以咨询我们开课吧的课程顾问进行了解

TypeScript 编译

TypeScript 代码

let str: string = '开课吧';

编译 TypeScript 代码

tsc <要编译的ts文件>

默认情况下会在当前文件所在目录下生成同名的 js 文件

编译选项

编译命令 tsc 还支持许多编译选项，我们先来了解其中几个，后续我们在具体有需求的时候再去了解更多的。

--outDir

指定编译文件输出目录

tsc --outDir ./dist ./src/HelloTypeScript.ts

--target

指定编译的代码版本目标，默认为 ES3

tsc --outDir ./dist --target ES6 ./src/HelloTypeScript.ts

--watch

在监听模式下运行，当文件发生改变的时候自动编译

tsc --outDir ./dist --target ES6 --watch ./src/HelloTypeScript.ts

通过上面几个例子，我们基本可以了解 tsc 的使用了，但是大家应该也发现了，如果每次编译都输入这么一大堆的选项是真的很繁琐。

其实，TypeScript 编译为我们提供了一个更加强大且方便的方式，编译配置文件：tsconfig.json，我们可以把上面的编译选项保存到这个配置文件中

编译配置文件

{
	"compilerOptions": {
		"outDir": "./dist",
		"target": "ES2015",
    "watch": true,
	},
  "include": ["./src/**/*"]
}

include

指定需要编译的 ts 文件目录，如果没有指定，则默认包含当前目录及子目录下的所有 ts 文件

默认配置

tsc 默认会从当前目录开始去查找 tsconfig.json 文件，如果没有找到，会逐级向上搜索父目录

tsc

指定配置文件

使用 --project 或 -p 也可以指定某个具体的配置文件

tsc -p ./c.json

指定配置文件目录

使用 -p 指定配置文件所在目录，tsc 会默认加载该目录下的 tsconfig.json 文件

tsc -p ./src

更多编译选项：

www.typescriptlang.org/docs/handbo…

www.typescriptlang.org/docs/handbo…

TypeScript - 类型系统

类型系统

简单来说类型系统包含：

类型标注（签名）
类型检测

类型标注

类型标注就是给数据（变量、函数、类等）添加类型说明

类型标注语法：

变量: 标注类型

let 变量: 数据类型;

类型检测

有了类型标注，编译器会在编译过程中根据标注的类型进行检测，使数据的使用更安全，帮助我们减少错误

同时配合编辑器/IDE ，类型标注还能提供更加强大和友好的智能提示

注意：类型系统检测的是类型，而不是具体值，即数据是否与标注的类型一致

标注类型有哪些？

基础类型
空和未定义类型
对象类型
数组类型
元组类型
枚举类型
无值类型
Never类型
任意类型
未知类型（Version3.0 Added）

基础类型

基础类型包含：string，number，boolean

标注语法

变量: string;
变量: number;
变量: boolean;

let title: string = '开课吧';
let n: number = 100;
let isOk: boolean = true;

title = 100;	//错误

空和未定义类型

因为在 Null 和 Undefined 这两种类型有且只有一个值，在标注一个变量为 Null 和 Undefined 类型，那就表示该变量不能修改了

默认情况下 null 和 undefined 是所有类型的子类型。就是说你可以把 null 和 undefined 其它类型的变量

如果一个变量声明了，但是未赋值，那么该变量的值为 undefined，但是如果它同时也没有标注类型的话，默认类型为 any，any 类型后面有详细说明

let un: undefined;
un = 1;	// 错误
let nul: null;
nul = 1; //错误
let a: string = '开课吧';
a = null; // 可以
a = undefined; // 可以

小技巧：指定 strictNullChecks 配置为 true，可以有效的检测 null 值数据，避免很多常见问题，建议对可能出现的 null 和 undefined 进行容错处理，使程序更加严谨
let ele = document.querySelector('#box');
if (ele) {
		ele.style.display = 'none';
}

对象类型

Object 类型表示非原始值类型

标注语法

变量: object

基于对象字面量的类型标注

let ot: {x: number, y: string} = {
    x: 1,
    y: 'zmouse'
};

针对对象这种特殊而有复杂的数据，TypeScript 有许多的方式来进行类型标注

内置对象类型

除了 Object 类型，在 JavaScript 中还有很多的内置对象，如：Date，标注如下：

变量: 内置对象构造函数名

let d1: Date = new Date();
let set1: Set = new Set();

包装对象

这里说的包装对象其实就是 JavaScript 中的 String、Number、Boolean，我们知道 string 类型和 String 类型并不一样，在 TypeScript 中也是一样

let a: string;
a = '1';
a = new String('1');	// 错误

let b: String;
b = new String('2');
b = '2';	// 正确

数组类型

TypeScript 中的数组存储的类型必须一致，所以在标注数组类型的时候，同时要标注数组中存储的数据类型

标注语法

变量: 类型[]

数组还有另外一种基于泛型的标注

变量: Array<类型>

let arr1: string[] = [];
arr1.push('开课吧'); // 正确
arr1.push(1); // 错误

let arr2: Array<number> = [];
arr2.push(100); // 正确
arr2.push('开课吧'); // 错误

元组类型

元组类似数组，但是存储的元素类型不必相同，但是需要注意：

初始化数据的个数以及对应位置标注类型必须一致

越界数据必须是元组标注中的类型之一（标注越界数据可以不用对应顺序 - 联合类型）

标注语法

变量: [类型一, 类型二,...]

let data1: [string, number] = ['开课吧', 100];
data1.push(100); // 正确
data1.push('100'); // 正确
data1.push(true); // 错误

注意：未开启 strictNullChecks: true 会使用 undefined 进行初始化

枚举类型

枚举的作用组织收集一组关联数据的方式

标注语法

enum 枚举名称 { key1=value, key2=value2 }

key 不能是数字
value 可以是数字，称为数字类型枚举，也可以是字符串，称为字符串类型枚举，但不能是其它值，默认为数字：0
第一个枚举值或者前一个枚举值为数字时，可以省略赋值，其值为前一个数字值 + 1

数字类型枚举

enum HTTP_CODE {
    OK = 200,
    NOT_FOUND = 404
};
HTTP_CODE.OK	//200

字符串类型枚举

enum URLS  {
    USER_REGISETER = '/user/register',
    USER_LOGIN = '/user/login'
}

无值类型

表示没有任何数据的类型，通常用于标注无返回值函数的返回值类型，函数默认标注类型位：void

标注语法

变量: void

function fn():void {
  	// 没有 return
}

Never类型

当一个函数永远不可能执行 return 的时候，返回的就是 never ，与 void 不同，void 是执行了 return，只是没有值，never 是不会执行 return，比如抛出错误，导致函数终止执行

function fn(): never {
  	throw new Error('error');
}

never 类型是所有其它类型的子类
其它不能赋值给 never 类型，即使是 any

任意类型

有的时候，我们并不确定这个值到底是什么类型或者不需要对该值进行类型检测，就可以标注为 any 类型

任何值都可以赋值给 any 类型
any 类型也可以赋值给任意类型
any 类型有任意属性和方法

标注语法

变量: any

注意：标注为 any 类型，也意味着放弃对该值的类型检测，同时放弃 IDE 的智能提示

小技巧：指定 noImplicitAny 配置为 true，当函数参数出现隐含的 any 类型时报错

未知类型

unknow，3.0 版本中新增，属于安全版的 any，但是与 any 不同的是：

unknow 仅能赋值给 unknow、any
unknow 没有任何属性和方法

标注语法

变量: unknow;

函数类型

在 JavaScript 中函数是一等公民的存在，在 TypeScript 也是如此，同样的，函数也有自己的类型标注格式

函数名称( 参数1: 类型, 参数2: 类型... ): 返回值类型;

function add(x: number, y: number): number {
  	return x + y;
}

TypeScript - 接口（ Interface）

接口

前面我们说到，TypeScript 的核心之一就是对值（数据）所具有的结构进行类型检查，除了一些前面说到基本类型标注，针对对象类型的数据，除了前面提到的一些方式意外，我们还可以通过： Interface （接口），来进行标注。

接口：对复杂的对象类型进行标注的一种方式，或者给其它代码定义一种契约（比如：类）

接口的基础语法定义结构特别简单

interface Point {
    x: number;
    y: number;
}

上面的代码定义了一个类型，该类型包含两个属性，一个 number 类型的 x 和一个 number 类型的 y，接口中多个属性之间可以使用逗号或者分号进行分隔

我们可以通过这个接口来给一个数据进行类型标注

let p1: Point = {
    x: 100,
    y: 100
};

注意：接口是一种类型，不能作为值使用

interface Point {
    x: number;
    y: number;
}

let p1 = Point;	//错误

当然，接口的定义规则远远不止这些

可选属性

接口也可以定义可选的属性，通过 ? 来进行标注

interface Point {
    x: number;
    y: number;
    color?: string;
}

其中的 color? 表示该属性是可选的

只读属性

我们还可以通过 readonly 来标注属性为只读

interface Point {
    readonly x: number;
    readonly y: number;
}

当我们标注了一个属性为只读，那么该属性除了初始化以外，是不能被再次赋值的

任意属性

有的时候，我们希望给一个接口添加任意属性，可以通过索引类型来实现

数字类型索引

interface Point {
    x: number;
    y: number;
    [prop: number]: number;
}

字符串类型索引

interface Point {
    x: number;
    y: number;
    [prop: string]: number;
}

数字索引是字符串索引的子类型

注意事项

索引签名参数类型必须为 string 或 number 之一，但两者可同时出现

interface Point {
    [prop1: string]: string;
    [prop2: number]: string;
}

当同时存在数字类型索引和字符串类型索引的时候，数字类型的值类型必须是字符串类型的值类型或子类型

interface Point1 {
    [prop1: string]: string;
    [prop2: number]: number;	// 错误
}
interface Point2 {
    [prop1: string]: Object;
    [prop2: number]: Date;	// 正确
}

TypeScript - 类型深入

联合类型

联合类型也可以称为多选类型，当我们希望标注一个变量为多个类型之一时可以选择联合类型标注，或的关系

标注语法

变量: 类型一 | 类型二

function css(ele: Element, attr: string, value: string|number) {
    // ...
}

let box = document.querySelector('.box');
// document.querySelector 方法返回值就是一个联合类型
if (box) {
    // ts 会提示有 null 的可能性，加上判断更严谨
    css(box, 'width', '100px');
    css(box, 'opacity', 1);
    css(box, 'opacity', [1,2]);  // 错误
}

交叉类型

交叉类型也可以称为合并类型，可以把多种类型合并到一起成为一种新的类型，并且的关系

标注语法

变量: 类型一 & 类型二

如，对一个对象进行扩展：

interface o1 {x: number, y: string};
interface o2 {z: number};

let o: o1 & o2 = Object.assign({}, {x:1,y:'2'}, {z: 100});

字面量类型

有的时候，我们希望标注的不是某个类型，而是一个固定值，就可以使用字面量类型，配合联合类型会更有用

function setPosition(ele: Element, direction: 'left' | 'top' | 'right' | 'bottom') {
  	// ...
}

box && setDirection(box, 'bottom');
box && setDirection(box, 'hehe');  // 错误

类型别名

有的时候类型标注比较复杂，这个时候我们可以类型标注起一个相对简单的名字

语法

type 新的类型名称 = 类型

如前面说到的对象字面类型标注

type dir = 'left' | 'top' | 'right' | 'bottom';
function setPosition(ele: Element, direction: dir) {
  	// ...
}

类型推导

每次都显式标注类型会比较麻烦，TypeScript 提供了一种更加方便的特性：类型推导。TypeScript 编译器会根据当前上下文自动的推导出对应的类型标注，这个过程发生在：

初始化变量
设置函数默认参数值
返回函数值

// 自动推断 x 为 number
let x = 1;
// 不能将类型“"a"”分配给类型“number”
x = 'a';

类型断言

有的时候，我们可能标注一个更加精确的类型（缩小类型标注范围），比如：

let img = document.querySelector('#img');

我们可以看到 img 的类型为 Element，而 Element 类型其实只是元素类型的通用类型，如果我们去访问 src 这个属性是有问题的，我们需要把它的类型标注得更为精确：HTMLImageElement 类型，这个时候，我们就可以使用类型断言，它类似于一种类型转换：

let img = <HTMLImageElement>document.querySelector('#img');

或者

let img = document.querySelector('#img') as HTMLImageElement;

注意：断言只是一种预判，并不会数据本身产生实际的作用，即：类似转换，但并非真的转换了

###类型操作符

typeof

获取值的类型，注：typeof 操作的是值

let colors = {
    color1: 'red',
    color2: 'blud'
};

type tColors = typeof colors;
/**
tColors 类型
type tColors = {
    color1: string;
    color2: string;
}
*/
let color2: tColors;

keyof

获取类型的所对应的类型的 key 的集合，返回值是 key 的联合类型，注：keyof 操作的是类型

interface Person {
   name: string;
   age: number;
};
type personKeys = keyof Person;
// 等同：type personKeys = "name" | "age"

let p1 = {
   name: 'zMouse',
   age: 35
}
function getPersonVal(k: personKeys) {
   return p1[k];
}
/**
等同：
function getPersonVal(k: 'name'|'age') {
   return p1[k];
}
*/
getPersonVal('name');	//正确
getPersonVal('gender');	//错误

in 操作符对值和类型都可以使用

针对值进行操作，用来判断值中是否包含指定的 key

console.log( 'name' in {name:'zmouse', age: 35} );
console.log( 'gender' in {name:'zmouse', age: 35} );

针对类型进行操作的话，内部使用的 for…in 对类型进行遍历

interface Person {
    name: string;
    age: number;
}
type personKeys = keyof Person;
type newPerson = {
    [k in personKeys]: number;
  	/**
  	等同 [k in 'name'|'age']: number;
  	也可以写成
  	[k in keyof Person]: number;
  	*/
}
/**
type newPerson = {
    name: number;
    age: number;
}
*/

注意：in 后面的类型值必须是 string 或者 number 或者 symbol

extends

类型继承操作符

interface type1 {
    x: number;
    y: number;
}
interface type2 extends type1 {}

或者

type type1 = {
    x: number;
    y: number;
}
function fn<T extends type1>(args: T) {}
fn({x:1, y: 2});

类型保护

有的时候，值的类型并不唯一，比如一个联合类型的参数，这个时候，在该参数使用过程中只能调用联合类型都有的属性和方法

function toUpperCase(arg: string|string[]) {
  	arg.length;	// 正确
  	arg.toUpperCase(1);	// 错误
  
  	// 即使作为条件判断也不行
  	if (arg.substring) {
        arg.substring(1);
    }
}

可以使用类型断言

if ((<string>arg).substring) {
		(<string>arg).substring(1);
}

但是这样做还是很麻烦的，其实在 TypeScript 中，提供了一个类型保护措施来帮助更加方便的处理这样的情况

typeof

if (typeof arg === 'string') {
    arg.substring(1);
} else {
  	arg.push('1');
}

typescript 能够把 typeof 识别为类型保护，作为类型检查的依据，不仅仅是在 if 中有效，在 else 中也是有效的

instanceof

typescript 中的 instanceof 也是类型保护的，针对细化的对象类型判断可以使用它来处理

if (arg instanceof Array) {
		arg.push('1');
}

自定义类型保护

有的时候，判断并不是基于数据类型或者构造函数来完成的，那么就可以自定义类型保护

function canEach(data: Element[]|NodeList|Element): data is Element[]|NodeList {
    return (<NodeList>data).forEach !== undefined;
}
function fn2(elements: Element[]|NodeList|Element) {
    if ( canEach(elements) ) {
        elements.forEach(_=>{});
    } else {
        elements.classList.add('box');
    }
}

data is Element[]|NodeList 是一种类型谓词，格式为：xx is type ，返回这种类型的函数就可以被 TypeScript 识别为类型保护

typescript基础知识

TypeScript 环境搭建

TypeScript 编译

编译选项

编译配置文件

TypeScript - 类型系统

类型系统

类型标注

类型检测

标注类型有哪些？

基础类型

空和未定义类型

对象类型

数组类型

元组类型

枚举类型

无值类型

Never类型

任意类型

未知类型

函数类型

TypeScript - 接口（ Interface）

接口

可选属性

只读属性

任意属性

TypeScript - 类型深入

联合类型

交叉类型

字面量类型

类型别名

类型推导

类型断言

类型保护