聊一聊TypeScript中的泛型与断言~

思考：后端接口给前端返回数据时，一般会遵循一定的规律，例如：都有code, msg, data三个属性，而不同的接口返回的具体数据保存在data中，它的格式是不同的。

随便定义一个数据

// 请求得到用户信息
const res1 = {
    code: 200, msg: 'success',
    data: {
        name: 'jack', age: 18
    }
}

这种情况怎么注解呢？这个时候就延伸了三个概念interface-接口 断言 泛型

interface-接口

作用: 用interface来描述对象数据的类型（常用于给对象的属性和方法添加类型约束）

// 请求得到用户信息
interface data {
    code: number,
    msg: string,
    data: {
        name: string,
        age: number
    }
}

一旦注解接口类型之后对象的属性和方法类型都需要满足要求，属性不能多也不能少

同样，某些数据是没有的，也可以用之前讲过的 ?可选操作符

类型断言

const myVariable: any = 'Hello World';
const length: number = (myVariable as string).length; // 使用 as 关键字将 myVariable 断言为 string 类型

console.log(length); // 11

在上述示例中，myVariable 被声明为 any 类型，这意味着它可以是任意类型的值。然而，在实际编码中，我们可能会明确地知道它是一个字符串类型。通过使用 as 关键字，我们将 myVariable 断言为 string 类型，以便在后续的代码中使用字符串的特定方法和属性。

type Res = {
    total: number,
    list: object[]
}

// 我们确定当ajax数据回来之后，result的数据就是上面的Res格式
// 但是，它的初值为 {} 会报错
const result:Res = {}

这个时候可以通过使用 as Res 将空对象 {} 断言为 Res 类型
const result: Res = {} as Res

非空断言

当遇到这种情况时，你明确知道它是有值的，就可以使用非空断言 !
const aLink = document.getElementById('link')!
大白话讲就是我担保它是有值的

泛型

后端接口给前端返回数据时，一般会遵循一定的规律，例如：都有code, msg, data三个属性，而不同的接口返回的具体数据保存在data中，它的格式是不同的。怎么处理？

interface Res1  {
  code: number,
  msg: string,
  data: {
    name: string,
    age: number
  }
}

泛型别名
语法：在接口类型的名称后面使用即可声明一个泛型参数列表，接口里的其他成员都能使用该参数的类型。

// interface 用来定义对象的形状或类的契约的,使用{}描述
interface ref<T> {
	name:string,
	age:'string'
	data:T
}

//type 是用 = 号来定义类型别名的，它可以为任何类型创建一个别名
type ref<T> = {
	name:string,
	age:'string'
	data:T
}

const res:ref<{name:number,goodsName:string}> = {
    name: 'hh',
    age: '18',
    data: {
        id: 1001,
        goodsName: '衬衫'
    }
}

泛型-函数

语法：在函数名称的后面使用即可声明泛型参数，整个函数中（参数、返回值、函数体）的变量都可以使用该参数的类型

function printArray<T>(arr: T[]): void {
  for (let item of arr) {
    console.log(item);
  }
}

// 使用泛型函数
const numbers: number[] = [1, 2, 3, 4, 5];
const strings: string[] = ['hello', 'world'];

printArray(numbers); // 打印数组中的数字
// 输出:
// 1
// 2
// 3
// 4
// 5

printArray(strings); // 打印数组中的字符串
// 输出:
// hello
// world

上述示例定义了一个名为 printArray 的泛型函数。它接受一个类型为 T[] 的参数 arr，其中 T 是一个类型变量。使用 T[] 表示泛型数组类型，即可以接受不同类型的数组作为参数
在调用 printArray 函数时，我们可以传入不同类型的数组，这样可以使我们的代码更加通用和灵活。