1.学习TypeScript 类型

TS的基本使用

使用 npm i -g typescript安装ts包，安装完成后可以通过tsc 命令进行ts文件的编译编译成功后会获得对应的js文件。ts文件需要编译为js文件才可以使用。

tsc 文件名

在ts文件中我们可以给变量规定类型。

javascript 复制代码

// 声明一个类型a 指定他的类型为number
let a: number;

// a 的类型设置了number 在以后使用中 a只能为数字

a = 10;

如果给a意外的类型在执行tsc 编译命令时则会报错

如果变量的声明和赋值是同时进行的 ts会自动对变量进行类型检查

javascript 复制代码

let c = true;

// let c = true;

c = 222;

以上代码 c的类型推断为boolean 所以给c赋值依然会报错误

我们在使用函数的时候同样可以给参数和返回值规定类型

javascript 复制代码

// 函数参数 函数返回值都可以指定类型
function sumHandler(a: number, b: number): number {
  return a + b;
}

在传入其他类型的值进入的时候编译都会报错。

我们也可以使用字面量进行类型声明下面意思为给a确定为10 所以重新赋值a=11 会编译报错

javascript 复制代码

// 也可以直接使用字面量进行类型声明
let a: 10;

a = 11;

ts文件编译由于是转化为js文件虽然报错了但最后结果是编译成功了，这点后面可以通过配置解决让他报错的时候编译不成功
如果不进行配置的话会发现以let定义的变量编译为变为了var 因为ts可以编译为任意版本的js代码，可以配置，所以可以兼容很多浏览器。

TS类型

|---------|-----------------|
| number | 任意数字 |
| string | 字符串 |
| boolean | true,false |
| 字面量 | 限制变量的值 |
| any | 任意类型 |
| unknown | 类型安全的any |
| void | 没有值(或undefined) |
| never | 没有值(不能为任何值) |
| object | 任意的js对象 |
| array | 数组 |
| tuple | 元素固定长度数组 |
| enum | 枚举 |

联合类型

在使用字面量进行类型声明的时候，我们多数会用到或逻辑以约束一个变量可以为多个值之一

javascript 复制代码

let a: 10 | 11 | 12 | 13;
// 表示a可以为10-13任何一个值
a = 11;
a = 13;

所以，在进行类型声明的时候，我们同样也可以给一个变量赋予多个类型形成联合类型！！！

javascript 复制代码

let b: number | string;
b = 100;
b = "二百";

当然也可以用&表示两种必然的联合，

javascript 复制代码

let b: { name: string } & { age: number };
b = { name: "aa", age: 20 };

any类型

any表示的是任意类型 (不建议使用或使用过多) 一个变量设置为any后相当于对这个变量关闭了TS的类型检测(显式的any)

any类型的变量可以随意赋值给任何变量

javascript 复制代码

// any表示的是任意类型 (不建议使用或使用过多) 一个变量设置为any后 相当于对这个变量关闭了TS的类型检测(显式的any)
// any类型的变量可以随意赋值给任何变量
let d: any;
d = 10;
d = false;
d = "aaa";

let d_1: number
d_1 = d;

// 声明变量如果不规定类型 TS解析器会自动判断变量的类型为any (隐式的any)

javascript 复制代码

let e;
e = 222;
e = "3";

在开发工程中我们应该尽量少用any作为类型约束。

unknown类型

// unknowm 表示未知类型的值 unknown类型的值不能赋值给其他类型的变量会报错

javascript 复制代码

let f: unknown;
f = 22; //✅
f = "hello"; //✅

let f_1: string;
f_1 = f; // ❌ unknown类型不能赋值给其他类型

类型断言

我们在使用unknown的时候碰到此类问题可以使用类型检查来规避

javascript 复制代码

let f: unknown;
f = 22; //✅
f = "hello"; //✅

let f_1: string;
// f_1 = f; // ❌ unknown类型不能赋值给其他类型

if (typeof f === "string") {
  f_1 = f; // ✅
}

TS也提供了对应的工具来直接断言类型

javascript 复制代码

let f: unknown;
f = 22; //✅
f = "hello"; //✅

let f_1: string;
// f_1 = f; // ❌ unknown类型不能赋值给其他类型

if (typeof f === "string") {
  f_1 = f; // ✅
}

// 类型断言 等于告诉解析器变量的实际类型
/**
 * 语法:
 *     变量 as 类型
 *     <类型>变量
 */
f_1 = f as string;
f_1 = <string>f;

对象类型

// object 一般不去使用限制对象一般都限制其中的属性而不是其本身

// 语法 {属性名:属性值,可选属性?:属性值} 当然我们可以在属性名后面加一个问号表示他为可选属性

javascript 复制代码

let b: { name: string; age?: number };

// b = {}; ❌没有age属性
b = { name: "小明" };
b = { name: "小红", age: 20 };

语法 {属性名:属性值,[propName: string]:any} 我们也可以用这种方式允许多个不同的未知属性存在

javascript 复制代码

let c: { name: string; [anyType: string]: any };

c = { name: "小王", age: 11, adress: "北京" };

函数类型

/**

* 设置函数结构的类型声明

* 语法:(形参:类型,......) => 返回值

*/

javascript 复制代码

let d: (a: number, b: number) => number;

d = function (n1: number, n2: number): number {
  return n1 + n2;
};

数组类型

/**

* 数组的类型声明

* 语法: 类型[]

* Array<类型>

*

*/

// string[] 表示字符串数组

javascript 复制代码

// string[] 表示字符串数组
let e: string[];
e = ["a", "b", "c"];

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

let g: Array<number>; //同样也表示number数组

元组类型

/**

* 元组固定长度的数组

* 语法: [类型，类型]

*/

javascript 复制代码

let h: [string, string, number];
h = ["abc", "efg", 111];

枚举类型

枚举一般使用于，固定选项，字典等。

javascript 复制代码

enum Gender {
  Male = 0,
  Female = 1,
}

let i: { name: string; gender: Gender };
i = {
  name: "小明",
  gender: Gender.Male,
};

类型别名

我们有时候会遇到多个变量使用同一个复杂的类型，这时候我们可以定义一个类型别名，用来给多个变量使用

javascript 复制代码

type myType = 1 | 2 | 3 | 4 | 5;

let j: myType;
let k: myType;
k = 2;
j = 5;