TS的基本使用
使用 npm i -g typescript安装ts包，安装完成后 可以通过tsc 命令进行ts文件的编译 编译成功后会获得对应的js文件。ts文件需要编译为js文件才可以使用。
tsc 文件名
在ts文件中 我们可以给变量规定类型。
// 声明一个类型a 指定他的类型为number
let a: number;// a 的类型设置了number 在以后使用中 a只能为数字a = 10;如果给a意外的类型 在执行tsc 编译命令时 则会报错
如果变量的声明 和赋值是同时进行的 ts会自动对变量进行类型检查
let c = true;// let c = true;c = 222;以上代码 c的类型推断为boolean 所以给c赋值依然会报错误
我们在使用函数的时候 同样可以给参数和返回值规定类型
// 函数参数 函数返回值都可以指定类型
function sumHandler(a: number, b: number): number {return a + b;
}在传入其他类型的值进入的时候 编译都会报错。
我们也可以使用字面量进行类型声明 下面意思为给a确定为10 所以重新赋值a=11 会编译报错
// 也可以直接使用字面量进行类型声明
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 | 枚举 |
联合类型
在使用字面量进行类型声明的时候，我们多数会用到或逻辑以约束一个变量可以为多个值之一
let a: 10 | 11 | 12 | 13;
// 表示a可以为10-13任何一个值
a = 11;
a = 13;所以，在进行类型声明的时候，我们同样也可以给一个变量赋予多个类型形成联合类型！！！
let b: number | string;
b = 100;
b = "二百";
当然也可以用&表示两种必然的联合，
let b: { name: string } & { age: number };
b = { name: "aa", age: 20 };
any类型
any表示的是任意类型 (不建议使用或使用过多) 一个变量设置为any后 相当于对这个变量关闭了TS的类型检测(显式的any)
any类型的变量可以随意赋值给任何变量
// any表示的是任意类型 (不建议使用或使用过多) 一个变量设置为any后 相当于对这个变量关闭了TS的类型检测(显式的any)
// any类型的变量可以随意赋值给任何变量
let d: any;
d = 10;
d = false;
d = "aaa";let d_1: number
d_1 = d;// 声明变量如果不规定类型 TS解析器会自动判断变量的类型为any (隐式的any)
let e;
e = 222;
e = "3";在开发工程中 我们应该尽量少用any作为类型约束。
unknown类型
// unknowm 表示未知类型的值 unknown类型的值不能赋值给其他类型的变量 会报错
let f: unknown;
f = 22; //✅
f = "hello"; //✅let f_1: string;
f_1 = f; // ❌ unknown类型不能赋值给其他类型
类型断言
我们在使用unknown的时候 碰到此类问题 可以使用类型检查来规避
let f: unknown;
f = 22; //✅
f = "hello"; //✅let f_1: string;
// f_1 = f; // ❌ unknown类型不能赋值给其他类型if (typeof f === "string") {f_1 = f; // ✅
}TS也提供了对应的工具来直接断言类型
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 一般不去使用 限制对象 一般都限制其中的属性 而不是其本身
// 语法 {属性名:属性值,可选属性?:属性值} 当然 我们可以在属性名后面加一个问号 表示他为可选属性
let b: { name: string; age?: number };// b = {}; ❌没有age属性
b = { name: "小明" };
b = { name: "小红", age: 20 };语法 {属性名:属性值,[propName: string]:any} 我们也可以用这种方式允许多个不同的未知属性存在
let c: { name: string; [anyType: string]: any };c = { name: "小王", age: 11, adress: "北京" };函数类型
/**
* 设置函数结构的类型声明
* 语法:(形参:类型,......) => 返回值
*/
let d: (a: number, b: number) => number;d = function (n1: number, n2: number): number {return n1 + n2;
};数组类型
/**
* 数组的类型声明
* 语法: 类型[]
* Array<类型>
*
*/
// string[] 表示字符串数组
// string[] 表示字符串数组
let e: string[];
e = ["a", "b", "c"];let f: number[];
f = [1, 2, 3];let g: Array<number>; //同样也表示number数组元组类型
/**
* 元组 固定长度的数组
* 语法: [类型，类型]
*/
let h: [string, string, number];
h = ["abc", "efg", 111];枚举类型
枚举一般使用于，固定选项，字典等。
enum Gender {Male = 0,Female = 1,
}let i: { name: string; gender: Gender };
i = {name: "小明",gender: Gender.Male,
};类型别名
我们有时候会遇到多个变量使用同一个复杂的类型，这时候我们可以定义一个类型别名，用来给多个变量使用
type myType = 1 | 2 | 3 | 4 | 5;let j: myType;
let k: myType;
k = 2;
j = 5;