TypeScript笔记 | 青训营笔记

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

TypeScript简介

TypeScript是一种静态类型语言：

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

TypeScript是JS的超集：

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

TypeScript类型

TypeScript内置类型

TypeScript中有八种内置类型

let srt: string = 'string';
let num: number = 1;
let bool: boolean = true;
let und: undefined = undefined;
let nu: null = null;
let obj: object = {};
let big: bigint = 100n;
let sym: symbol = Symbol('sym');

定义数组

定义数组有两种方式

let array: number[] = [1, 2, 3];
let array2: Array<number> = [1, 2, 3];

定义联合类型数组

let arr:(number|string)[] = [1, '2'];

定义指定对象成员的数组

interface IArray {
	name: string;
	num: number;
}
let arr: IArray[] = [{name: 'Tom', age: 18}];

函数

函数声明

function sum(a: number, b: number): number {
	return a + b;
}

函数表达式

注意第一个=>后是函数的返回类型

const mult: (x: number, y: number) => number = (x, y) => x * y;

用接口定义函数类型

为了方便直观定义函数的参数和返回值类型，可以通过interface的方式进行定义

interface IGetDate {
	(type: 'string', timestamp?: string): string;
}

const getDate: IGetDate = function (type, timestamp) {
	return type;
}

函数重载

函数重载或方法重载是使用相同名称和不同参数数量或类型创建多个方法的一种能力。

function add(a:number, b:number):number;
function add(a:string, b:string):string;

泛型

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

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

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

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

泛型约束

type IGet = <T extends string>(target: T) => T[];
const getArr: IGet = target => new Array(100).fill(target); 
getArr(123) // 报错number不能赋值给string类型

泛型参数默认类型

type IGet = <T = number> = (target: T) => T[];
const getArr: IGet = target => new Array(100).fill(target); 
getArr('123') // 报错：string类型不能赋值给number

类型别名&&类型断言

通过type关键字定义别名类型 通过as关键字断言类型为正确类型

联合类型

interface IHistoryBook {
	author: string;
	type: string;
	range: string;
}

interface IStroyBook {
	author: string;
	type: string;
	theme: string;
}

type IBookList = Array<IHistoryBook | IStoryBook>

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

类型保护和类型守卫

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

类型守卫

定义一个函数，他的返回值是一个谓词类型，生效范围为子作用域

TypeScript工程应用

webpack

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

相关loader 6. awesome-typescript-loader 7. babel-loader

node

使用tsc编译

1. 安装node与npm
2. 使用npm安装tsc
3. 配置tsconfig.js文件
4. 使用tsc运行编译得到js文件