TypeScript

npm i typescript -g
tsc -v

一、基础类型

tsc --init  // 会生成 tsconfig.json
tsc -w

打开另一个终端

node index.js

let num: number = 123;
let str: string = "小满";
let b: boolean = true;
let n: null = null;
let u: undefined = undefined;
// let v1: void = null;
let v2: void = undefined;// 函数没有返回值
function myFn(): void {// 不能 return 任何值
}

二、任意类型

npm i ts-node -g

生成 package.json

npm init -y

声明文件

npm i @types/node -D

现在可以只开一个控制台，执行

ts-node index.ts

any 任意类型；unknown 不知道类型

1. top type：顶级类型 any unknown，可以包含下面所以类型
2. Object
3. 自身实例：Number String Boolean
4. number string boolean
5. 1 '小满' false
6. never

let a: any = [];
let a: unknown = [];
a = 1;
a = "123";
a = false;
a = Symbol(1);// unknown 和 any 也是有一定区别的：
let a: any = 1;
let b: number = 5;a = b;
b = a;

（1）unknown 不可以赋值给别的类型的，只能赋值给自身或者 any

let a: unknown = 1;
let b: number = 5;a = b;
b = a; // 报错

（2）unknown 没有办法读取任何属性，方法也不可以调用

let xiaoman: unknown = { shuai: true, open: () => 123 };
xiaoman.shuai; // 报错
xiaoman.open; // 报错// any 类型则不报错

三、Object、object 以及 {}

1. Object

所有原始类型以及对象类型都指向 Object

在 ts 中，Object 表示包含所有类型

let a: Object = 123;
let a1: Object = "123";
let a2: Object = [];
let a3: Object = {};
let a4: Object = () => 123;

2. object

 常用于泛型约束，代表非原始类型的一种类型，不支持 原始类型，支持所有 引用类型

let a: object = 123; // 错误 原始类型
let a1: object = "123"; // 错误 原始类型
let a2: object = false; // 错误 原始类型
let a3: object = []; // 正确
let a4: object = {}; // 正确
let a5: object = () => 123; // 正确

3. {}

 可以理解成 new Object，和第一个一样，原始类型 和 引用类型 都可以

let a: {} = 123;
let a1: {} = "123";
let a2: {} = [];
let a3: {} = {};
let a4: {} = () => 123;

 虽然字面量模式可以赋值任意类型，但是赋值之后无法修改

let a: {} = { name: 1 };// 无法对变量进行任何操作
a.age = 2; // 报错，没有办法 增加

 最好少用

四、接口和对象类型

使用 interface 来定义一种约束，让数据的结构满足约束的格式

不能多属性，也不能少属性

1. 重名，重合

interface Axx {name: string;age: number;
}interface Axx {Ikun: string;
}

等同于

interface Axx {name: string;age: number;Ikun: string;
}

2. 定义任意 key

索引签名

interface Axx {name: string;age: number;[propName: string]: any;
}let a: Axx = {name: "小满",age: 88,a: 1,b: 2,c: 3,
};

3. 可选操作符 & readonly

interface Axx {name: string;age?: number; // 可选操作符readonly id: number;readonly callback: () => boolean;
}let a: Axx = {name: "小满",id: 1,callback: () => {return false;},
};a.callback();// 以下报错
a.callback = () => {return true;
};

 一般函数或者 id 会写 readonly，不能随便改

4. 接口继承

interface Axx extends B {name: string;age?: number; // 可选操作符readonly id: number;readonly callback: () => boolean;
}interface B {xxx: string;
}let a: Axx = {xxx: "xxx",name: "小满",id: 1,callback: () => {return false;},
};

 A 继承 B，A 与 B 合并，a 必须具备 xxx 属性

5. 定义函数类型

interface Fn {(name: string): number[];
}const fn: Fn = function (name: string) {return [1];
};

五、数组类型

1. 数组普通类型

let arr: number[] = [1, 2, 3, 4, 5];
let arr1: boolean[] = [true, false];

泛型方式

let arr2: Array<boolean> = [true, false];

2. 定义对象数组，使用 interface

interface X {name: string;age?: number;
}let arr: X[] = [{ name: "小满" }, { name: "胡萝卜" }];

 3. 二维数组

let arr: number[][] = [[1], [2], [3]];

泛型方式

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

4. 大杂烩数组

let arr: any = [1, "sadsad", true, {}];

5. 数组在函数中的用法

// ... 是拓展运算符，可用于将函数参数收集后转为一个数组实例
function a(...args: string[]) {console.log(args); // ['1','2']
}a("1", "2");

  arguments 是类数组，但是没有数组上的方法

function b(...args: string[]) {console.log(arguments); // {'0':'1','1':'2'}let b: IArguments = arguments;
}b("1", "2");// IArguments 原理
interface A {callee: Function;length: number;[index: number]: any;
}

六、函数类型

1. 函数定义类型和返回值

function add(a: number, b: number): number {return a + b;
}console.log(add(1, 1)); // 2

箭头函数定义类型和返回值

const add = (a: number, b: number): number => a + b;console.log(add(1, 1)); // 2

2. 函数默认的参数

function add(a: number = 10, b: number = 20): number {return a + b;
}console.log(add()); // 30

函数可选参数

function add(a: number = 10, b?: number): number {return a + b;
}console.log(add()); // NaN

3. 参数是一个对象如何定义

interface User {name: string;age: number;
}function add(user: User): User {return user;
}console.log(add({ name: "小满", age: 24 })); // { name: '小满', age: 24 }

4. 函数 this 类型

interface Obj {user: number[];add: (this: Obj, num: number) => void;
}// ts 可以定义 this 的类型，必须是第一个参数定义 this 的类型
// js 种无法使用
let obj: Obj = {user: [1, 2, 3],add(this: Obj, num: number) {this.user.push(num);},
};obj.add(4);
console.log(obj); // { user: [ 1, 2, 3, 4 ], add: [Function: add] }

5. 函数重载

let user: number[] = [1, 2, 3];
function findNum(add: number[]): number[]; // 如果传的是一个 number 类型的数组，那就做添加
function findNum(id: number): number[]; // 如果传入了 id， 就是单个查询
function findNum(): number[]; // 如果没有传入东西就是查询全部function findNum(ids?: number | number[]): number[] {if (typeof ids == "number") {return user.filter((v) => v == ids);} else if (Array.isArray(ids)) {user.push(...ids);return user;} else {return user;}
}console.log(findNum()); // [ 1, 2, 3 ]
console.log(findNum(3)); // [ 3 ]
console.log(findNum([4, 5, 6])); //[ 1, 2, 3, 4, 5, 6 ]

七、联合类型 | 类型断言 | 交叉类型