ts：泛型接口、泛型类

一、主要内容说明

泛型一类我们常用T、U、V、W等这些字母表示，其实泛型参数不限制特定字母，我们可以使用任何有效的标识符，包括其他大写字母，如A、B、C、D。如果把后面的泛型字母T、U、V、W，更改为A、B、C、D也不会影响程序运行。可以说，泛型包含了其它类。A包含其它类，B也包含其它类，分别设置A、B只是区分它们是分开的两个类型参数罢了，它们自己本身便包含其它各种类。开发者常用T的原因，可以如此说明，如t可以是type的头字母，让参数有内容指向标符。K可以是key键值，U可以是ualue值，等。ts变量通常需要固定设置好参数类型，不然会发生语法错误，泛型其实用得很少。
除了泛型函数，还有泛型接口、泛型类、泛型约束等 。本文的内容主要为泛型接口和泛型类。后边源码我们建立泛型接口的同时，也另外建立一个正常情况下的接口，用以对泛型接口的效果。泛型类也另外设置了正常创建类的对比组。

二、例子

（一）、泛型接口

下方源码1我们正常设置的接口Message，有三参数，名字、年龄、身高，对应参数分别为string、number、number类型。则在使用Message接口时，三参数只能固定设置为stirng、number、number类型。其中原年龄的参数类型为number，若是年龄参数想设置为“ "十六岁"”这样string字符串类型是无法创建的。与之对比的使用泛型接口，则可以将age设置为num或string类型都可以。泛型使用起来比较灵活。

1.源码1 （泛型接口）

// 定义一个基础的消息接口
interface Message {
    name: string; // 姓名，类型为字符串
    age: number;  // 年龄，类型为数字
    height: number; // 身高，类型为数字
}

// 定义一个泛型接口，T、U、V分别为第1、2、3个泛型类型
interface FX_Message<T, U, V> {
    name_fx: T;  // 姓名，类型为泛型T
    age_fx: U;   // 年龄，类型为泛型U
    height_fx: V; // 身高，类型为泛型V
}

// 创建一个符合Message接口的对象
let mes: Message = { name: "小蒲", age: 20, height: 160 };

// 下面这行代码会报错，因为年龄应该是数字类型，不能是字符串
// let mes2: Message = { name: "小蒲", age: "20", height: 160 }; // 报错: 不能将string字符串类型分配给number数值类型

console.log(mes);

console.log("\n分隔行--------------------------------------------\n")

// 创建符合FX_Message接口的对象
let mes_fx1: FX_Message<string, string, string> = {
    name_fx: "小葵", 
    age_fx: "十六岁",  // 年龄使用字符串类型
    height_fx: "1.7米" // 身高使用字符串类型
};

let mes_fx2: FX_Message<string, number, number> = {
    name_fx: "小葵",
    age_fx: 16, // 年龄使用数字类型
    height_fx: 170 // 身高使用数字类型
};

console.log(mes_fx1);
console.log(mes_fx2);

2.源码1运行效果

（二）、泛型类

在使用泛型类中，实例化时尖括号“<>”里要设置好对应参数的类型，以便代码规范化，也方便后期维护和修改。不添加参数类型，它也会判断参数为某一类，而输出参数内容。但有时候，机子判断的类型不一定是自己所想要的。所有为了自己的源码能把握在自己手中，尖括号还是需要添加对应的参数类型。如：

let mes_fx2 = new FX_Message("芽儿", 15, 140, new Date(2024, 9, 29));

虽未设置尖括号，没有对参数设置对应的参数类型，但并不影响程序的输出。电脑会自行判断输入和输出参数的类型。为了代码规范化和后期维护考虑的可能，以及为了能把代码把握在自己手中，应对参数设置对应的类型，如下：

let mes_fx1 = new FX_Message<string, number, number, Date>("芽儿", 15, 140, new Date(2024, 9, 29));

下方源码2中，实例化部分，我们正常设置的类固定有4参数，所以这个类只能固定设置4参数对应类型的参数。而泛型比较灵活，不用固定设置4参数的类型，电脑会自行判断输出。为了对比，我们泛型设置与正常创建类型的设置相似，也为4个参数。通过对比观察，泛型的参数可以自由设置参数的类型。举例如年龄的参数，泛型可以设置number类的“16”，也可以设置string类的“十六岁”。如日期，可以设置date类的“2024-6-8”，也可以设置string类的“ "2024-10-29" ”。总的来说，正常类，设置age类为number类，则只能设置number类的参数。但是泛型类，age除了可以设置number类还可以设置string类，甚至是其他类。

1.源码2（泛型类）

class Message {
    name: string;       // 姓名，类型为字符串
    age: number;        // 年龄，类型为数字
    height: number;     // 身高，类型为数字
    date: Date;         // 输入日期，类型为Date

    constructor(name_1: string, age_1: number, height_1: number, date_1: Date) {
        this.name = name_1;      // 初始化姓名
        this.age = age_1;        // 初始化年龄
        this.height = height_1;  // 初始化身高
        this.date = date_1;      // 初始化日期
    }

    // 返回信息整合的字符串
    way1(): string {
        return `信息整合，姓名：${this.name}，年龄：${this.age}，身高：${this.height}，输入日期：${this.date}`;
    }
}

// 创建Message对象
let mes = new Message("吖尔", 21, 140, new Date(2024, 6, 8));
console.log(mes.way1());

console.log("\n分隔行--------------------------------------------\n")

// 定义泛型类FX_Message
class FX_Message<T, U, V, W> {
    name_fx: T;     // 姓名，类型为泛型T
    age_fx: U;      // 年龄，类型为泛型U
    height_fx: V;   // 身高，类型为泛型V
    date_fx: W;     // 输入日期，类型为泛型W

    constructor(name: T, age: U, height: V, date: W) {
        this.name_fx = name;        // 初始化姓名
        this.age_fx = age;          // 初始化年龄
        this.height_fx = height;    // 初始化身高
        this.date_fx = date;        // 初始化日期
    }

    // 返回信息整合的字符串
    way_fx(): string {
        return `信息整合，姓名：${this.name_fx}，年龄：${this.age_fx}，身高：${this.height_fx}，输入日期：${this.date_fx}`;
    }
}

// 创建FX_Message对象
let mes_fx1 = new FX_Message<string, number, number, Date>("芽儿", 15, 140, new Date(2024, 9, 29));
console.log(mes_fx1.way_fx());

// 创建另一个FX_Message对象
let mes_fx2 = new FX_Message("芽儿", 15, 140, new Date(2024, 9, 29));
console.log(mes_fx2.way_fx());

console.log("\n分隔行--------------------------------------------\n")

let mes_fx3 = new FX_Message<string, string, string, string>("珑尔", "十八岁", "1.3米", "2024-10-29");
console.log(mes_fx3.way_fx());

let mes_fx4 = new FX_Message("珑尔", "十八岁", "1.3米", "2024-10-29");
console.log(mes_fx4.way_fx());

2.源码2运行效果

三、结语

本来泛型接口和泛型类想分开各编写一篇博文的，后面发现相似处比较多，合起来编写工作量也不算太大，于是就合起来编写了。
代码编写出来并不是很难，难的是编写出来后，要如何说明。某种意义上来说，代码其实已经是所要说的全部内容了。但是如果只把代码怼上去，文字说明啥的都不添加，后面回顾忘了咋办。还是尽量留点思路，后面忘了回顾过来也可以快些将知识捡回来。没有思路留下，后面回来估计会对代码发懵的。
最近多了异步、接口的知识，但是时间类型也很重要，数组的方法也还有。有些内容又是比较抽象的，还需要想个办法，把抽象的内容能够具体呈现出来。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

四、定位日期

2024-10-29；
22:41；