前言

TS 现在使用地越来越多，而且在vue3出来后越来越重要，就开始学习起来TS，在这从中记录，如果有出错的地方且需要改进的点，欢迎大佬指明。

一、类型声明

1.1 含义和作用

类型声明是ts的重要特性，通过类型声明可以指定TS中变量（参数、形参）的类型。
类型声明给变量指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错；
简单来说：类型声明是对变量的一种约束。

1.2 语法

单纯的变量声明

let 变量: 类型;

变量的声明和赋值，同时进行

let 变量: 类型 = 值；
// 可简化为：
let 变量 = 值;
// 因为当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型，所以可以省略类型声明

函数中类型声明

function fn(参数: 类型, 参数: 类型): 类型{
    ...
}

二、基础类型

1.1 boolean类型

let isDool: boolean = false;
isDool = true

1.2 number类型

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;

1.3 string类型

let name: string = 'lily';
let age: number = 16;
let speak: string;
speak = `我的名字叫${name}， 我今年${age}`;

1.4 字面量类型

通过字面量可以确定变量的取值范围

限制变量的值

let num: 1;
// 相当于 const num = 1; 设置固定值，赋其他的值会报错
// num = 2; (报错)
let val: 2 | 3 | 4;
// 限制val后面的取值只能在这个范围
// val = 5; (报错)

使用字面量去指定变量的类型

let a: boolean | string;
a = false;
a = '123'
// a = 1 ; (报错)

1.5 any类型

属于任意类型注意：声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

let b: any = 'hello';
b = 1;
b = true;

变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型注意：未声明类型的变量虽然一开始被识别为 any 类型，但是经过赋值后，TS 会根据赋值类型来标识变量的类型

let value; 
value = 'seven'; 
let val = value - 1;
value = 7;
let val1 = value - 1;

1.6 unknown类型

表示未知类型的值，赋任意类型的值，跟any 类型相似
any类型与unknown不同点是什么？

// 当any类型时，可赋值给任意变量，且不会报错
    let a:any;
    let b:string;
    b = a
// 当unknown类型时，赋值任意变量时，会出现报错
    let c: unknown;
    b = c; (报错)

unknown 实际上就是一个类型安全的any， unknown类型的变量，不能直接赋值给其他变量

1.7 void类型

表示空值，以函数为例，就表示没有返回值的函数

function fn(): void{
}
简化：当函数不写return时，TS编译器会自动判断函数返回值为void类型
function fn(){
}

申明为 void 类型的变量，只能赋予 undefined 和 null

let unusable: void = undefined;

1.8 never类型

表示不会返回结果
声明返回值为never的函数，就函数必须中途必定中断,无法到达的终点，即这个函数永远不能执行结束

// 函数必须中途必定中断,无法到达的终点
function error(message: string): never {
  throw new Error(message);
}

// 函数永不结束，陷入死循环
function cycle(): never{
    while(true){
        console.log('循环')
    }
}

1.9 object类型

一般不会这么用

let obj: object = {};

在对象中一般限制对象中属性的类型和方法
{} 用来指定对象中可以包含哪些属性
语法： {属性名：属性值，属性名?：属性值, [propName: string]: any }

let d: {name: string, age: number}
d = {name: 'tom', age: 18}

// 注意：当d对象中少了name或者age会报错，多了一个属性也会报错
// 当属性赋值是可有可无时，在属性名后面加上?， 表示属性是可选的

let e: {name: string, age?: number}
e = {name: 'tom'}

//当对象中多个属性是不固定时，可使用[propName: string]: any 表示任意类型的属性
let f: {name: string, [propName: string]:any};
f = {name: 'jery', age: 16, sex: '男'}

设置函数结构的类型声明: 语法: (形参: 类型, 形参: 类型...) => 返回值类型

let g: (a:number, b:number) => number

1.10 array类型

限制数组中内容的类型
语法：类型 [] Array<类型>

let h: string[];
let i: Array<string>;

1.11 tuple类型

元组，就是固定长度的数组
语法： [类型，类型]

let x: [string, number];
x = ["hello", 10];

1.12 enum类型

枚举，TS中新增类型
枚举用于表示固定的几个取值

    enum Color {
      Red,
      Green,
      Blue,
    }
    let c: Color = Color.Green;
    
    // 注意点: TS中的枚举类型的取值, 默认是从上至下从0开始递增的
    //虽然默认是从0开始递增的, 但是我们也可以手动的指定枚举的取值的值

    enum Color {
      Red = 1,
      Green,
      Blue,
    }
    let c: Color = Color.Green;
    //注意点: 如果手动指定了前面枚举值的取值, 那么后面枚举值的取值会根据前面的值来递增
    //注意点: 如果手动指定了后面枚举值的取值, 那么前面枚举值的取值不会受到影响

    enum Color {
      Red = 1,
      Green = 2,
      Blue = 4,
    }
    let c: Color = Color.Green;

三、类型断言

1.1 是什么？

有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型

1.2 作用

告诉解析器变量的实际类型,通常解决unknown声明变量的赋值

1.3 语法

变量 as 类型

    let c: unknown;
    b = c as string;

<类型>变量

   let c: unknown;
   b = <string>c;

四、类型别名

type （可以给一个类型定义一个名字）多用于符合类型

type myType = 1 | 2 | 3 | 4 | 5;
let n: myType;
n = 1;

五、 | 与 & 符号

| 表示或语法：类型 | 类型

let k : 1 | 2 ;
k = 1;
k = 2;

let l : string | number;
l = 'hello';
l = 100

& 表示且，连接两个对象，同时满足语法： {属性名: 类型} & {属性名: 类型}

let j: {name: string} & {age: string}
j = {name: 'j', age: 18}

typeScript学习之基础类型

前言