这是我参与「第四届青训营」笔记创作活动的的第14天。

基本语法

TypeScript补充类型

空类型，表示无赋值

type IEmptyFunction = () => void;
复制代码

任意类型，是所有类型的子类型
```
type IAnyType = any;
复制代码
```

枚举类型，支持枚举值到枚举名的正、反映射

enum EnumExample {
	add = '+',
	mult = '*',
}
复制代码

泛型

tyep INumArr = Array<number>;
复制代码

TypeScript泛型

泛型：不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

type IGetRepeatArrR = <T>(target: T) => T[];
复制代码

泛型接口&多泛型

interface IX<T, U> {
	key: T;
	val: U;
}
复制代码

泛型类

class IMan<T> {
	instance: T;
}
复制代码

泛型别名

type ITypeArr<T> = Array<T>;
复制代码

泛型约束：限制泛型必须符合字符串。

type IGetRepeatStringArr - <T extends string>(target: T) => T[];
const getStrArr: IGetRepeatStringArr = target => new Array(100).fill(target);
// 报错：类型“number”的参数不能赋给类型“string”的参数
getStrArr(123);
复制代码

泛型参数默认类型：

type IGetRepeatArr<T = number> = (target: T) => T[];
const getRepeatArr: IGetRepeatArr = target => Array(100).fill(target);
// 报错：类型“number”的参数不能赋给类型“string”的参数
getRepeatArr('123');
复制代码

类型别名&类型断言

类型别名：通过type关键字定义类型别名。

type IObjArr = Array<{
	key: string;
	[objKey: string]:any;
}>
复制代码

类型断言：

function keyBy<T extends IObjArr>(objArr: Array<T>) {
// 未指定类型时，result类型为{}
	const result = objArr.reduce((res, val, key) => {
	res[key] = val;
	return res;
	}, {})
// 通过as关键字，断言result类型为正确类型
	return result as Record<string, T>;
}
复制代码

字符串/数字/字面量

允许指定字符串/数字必须的固定值

IDomTag必须为html、body、div、span中的其一

type IDomTag = 'html'|'body'|'div'|'span';
复制代码

IOddNumber必须为1、3、5、7、9中的其一
```
type IOddNumber = 1|3|5|7|9;
复制代码
```

高级类型

联合/交叉类型

联合类型：IA|IB；表示一个值可以是几种类型之一。
交叉类型：IA&IB；多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

const bookList = [{
	author: 'xiaoming',
	type: 'history',
	range: '2001-2021',
}, {
	author: 'xiaoli',
	type: 'story',
	theme: 'love',
}]

type IBookList = Array<{
	author: string;
}&({
	type: 'history';
	range: string;
}|{
	type: 'story';
	theme: string;
})>
复制代码

类型保护与类型守卫

访问联合类型时，出于程序安全，仅能访问联合类型中的交集部分。

类型守卫：定义一个函数，它的返回值时一个类型谓词，生效范围为子作用域。

interface IA {a: 1, a1: 2}
interafce IB {b: 1, b2: 2}

function getIsIA(arg: IA|IB): arg is IA {
	return !!(arg as IA).a;
}

function log2(arg: IA|IB) {
	if(getIsIA(arg)) {
		console.log(arg.a1)
	}else{
		console.log(arg.b1)
	}
}
复制代码

两个类型无任何重合点时才需写类型守卫。

使用类型保护，实现函数reverse，其可将数组或字符串进行反转：

function reverse(target: string|Array<any>){
// typeof类型保护
	if（typeof target === 'string'){
		return targrt.split('').reverse().join('');
	}
// instance类型保护
	if(target instanceof Object){
		return target.reverse();
	}
}
复制代码

typeof和instance是TypeScript自带的类型保护。

上文IBookList类型中，实现函数logBook类型，函数接受书本类型，并logger出相关特征。TypeScript通过联合类型+类型保护可以进行自动类型推断。

工程应用

Web

webpack：

配置webpack loader相关配置
配置tsconfig.js文件
运行webpack启动/打包
loader处理ts文件时，会进行编译与类型检查

Node

使用TSC编译：

安装Node与npm
配置tsconfig.js文件
使用npm安装tsc
使用tsc运行编译得到js文件

TypeScript入门（下）|青训营笔记