这是我参与「第五届青训营」伴学笔记创作活动的第 4 天。

一、本堂课重点内容：

本节课程主要分为四个方面：

Typescript 见解
Typescript 基础语法，包括类型、泛型、类型别名、类型字面量等
Typescript 高级类型讲解及实例
Typescript 工程应用介绍

二、详细知识点介绍：

Typescript 见解

静态类型：

可读性增强:基于语法解析TSDoc，ide增强静态类型
可维护性增强:在编译阶段暴露大部分错误

=>多人合作的大型项目中，获得更好的稳定性和开发效率

JS的超集：

包含于兼容所有Js特性，支持共存
支持渐进式引入与升级

Typescript 基础语法

包括类型、泛型、类型别名、类型字面量等

基础数据类型

/*字符串*/
const q: string = 'string';
/*数字*/
const w: number = 1;
/*布尔值*/
const e: boolean = true;
/*null*/
const r: null = null;
/*undefined*/
const t: undefined = undefined;

对象类型

//定义接口类型
interface IBytedancer {
	/*只读属性:约束属性不可在对象初始化外赋值*/
	readonly jobId: number;
	name: string;
	sex: 'man'|'woman'|'other';
	age: number;
	/*可选属性:定义该属性可以不存在*/
	hobby? : string;
	/*任意属性:约束所有对象属性都必须是该属性的子类型*/
	[key: string]: any; //表示key为string类型，value为任意类型
}

const bytedancer: IBytedancer = {
	ijobId: 9303245,
	name: 'Lin',
	sex: 'man',
	age: 28,
	hobby: 'swimming' ,
}

函数类型

/*普通函数*/
function add(x: number, y: number): number {
	return x + y;
}
/*箭头函数*/
interface IMult {
	(x: number, y: number): number; //(参数：参数类型): 返回值类型
}
const mult: IMult = (x,y) => x * y;

函数重载

/*对getDate函数进行重载, timestamp为可缺省参数*/
interface IGetDate {
	(type: 'string', timestamp?: string): string;
	(type: 'date', timestamp?: string): Date;
	(type: 'string' | 'date', timestamp?: string): Date | string;
}

const getDate: IGetDate = (type: 'string', timestamp?: string) => {
	const date = new Date(timestamp) ;
	return type === 'string' ? date.toLocaleString() : date;
}

数组类型

本质是扩展类型的对象；

/*「类型+方括号」表示*/
type IArr1 = number[];
const arr1: IArr1 = [1，2，3，4，5，6];

/*泛型表示*/
type IArr2 = Array<string | number | Record<string,number>>;
const arr2: IArr2 = [1，2,'3','4', { a: 1 }];

/*元祖表示*/
type IArr3 = [number,number,string,string];
const arr3: IArr3 = [1，2，'3','4'];

/*接口表示*/
interface IArr4 {[key: number]: any;}
const arr4: IArr4 = [ 'string' , ()=> null, {}, [];

Typescript补充类型

/*空类型，表示无赋值*/
type IEmptyFunction = () => void;
/*任意类型，是所有类型的子类型*/
type IAnyType = any;
/*枚举类型:支持枚举值到枚举名的正、反向映射*/
enum EnumExample {
	add = '+',
	mult = '*',
}
EnumExample['add'] === '+';
EnumExample['+'] === 'add';
enum ECorlor { Mon,Tue,ed,Thu,Fri,Sat,Sun };
ECorlor['Mon'] === 0;
ECorlor[0] === 'Mon' ;

泛型

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

/*泛型函数类型*/
type IGetRepeatArrR = <T>(target: T) => T[];

/*泛型接口&多泛型*/
interface IX<T, U> {
	key: T;
	val: U;
}

/*泛型类*/
class IMan<T> {
	instance: T;
}

/*泛型别名*/
type ITypeArr<T>= Array<T>;

泛型约束< T extends 默认类型>

泛型默认值< 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;

Typescript 高级类型讲解及实例

联合类型： IA | IB 几种类型之一

交叉类型： IA & IB 几种类型的结合

类型守卫：

interface IA { a: 1, a1: 2 }
interface IB { b: 1, b1: 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);}
}

可以加上公共属性type: string存储联合类型名称，通过访问type属性判断联合类型；

索引类型：

关键字【keyof】,其相当于取值对象中的所有key组成的字符串字面量，如

type IKeys = keyof { a: string; b: number }; //等价于 type IKeys = "a"|"b"

Typescript 工程应用介绍

webpack：

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

使用TSC编译：

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

三、课后个人总结：

使用TS时要注意写明变量、函数的类型；
使用TS时也可以照常使用JS的语法；

TypeScript入门 ｜ 青训营笔记