Typescript泛型类详细解读

代码示例

(() => {
  // 定义一个类,类中的属性值的类型是不确定,方法中的参数及返回值的类型也是不确定
  // 定义一个泛型类
  class GenericNumber<T>{
    // 默认的属性的值的类型是泛型类型
    defaultValue: T
    add: (x: T, y: T) => T

    constructor(defaultValue: T) {
        this.defaultValue = defaultValue;
        this.add = function (x: T, y: T): T {
          // 这里只是示例，实际返回值需根据业务逻辑
          return defaultValue;
      };
    }
    
  }

  // 在实例化类的对象的时候,再确定泛型的类型
  const g1: GenericNumber<number> = new GenericNumber<number>(200)
    // 相加的方法
    g1.add = function (x: number, y:number): number{
      return x + y
  }
  console.log(g1.add(g1.defaultValue,20))


  // 在实例化类的对象的时候,再确定泛型的类型
  const g2: GenericNumber<string> = new GenericNumber<string>('不错')
    // 相加的方法
    g2.add = function (x: string, y:string):  string{
      return x + y
  }
  console.log(g2.add('小帅6666',g2.defaultValue))

})()

以上代码详细解读：

• class GenericNumber<T>：定义了一个名为 GenericNumber 的泛型类，<T> 是类型参数，它是一个类型占位符，表示该类可以在不同的具体类型上使用。
• defaultValue: T：声明了一个名为 defaultValue 的属性，其类型为 T，即该属性的类型将在类实例化时根据传入的具体类型参数确定。
• add: (x: T, y: T) => T：声明了一个名为 add 的方法，该方法接受两个类型为 T 的参数 x 和 y，并返回一个类型为 T 的值。这里只是声明了方法的类型签名，在构造函数中进行了初步定义，但后续实例化后又重新赋值了更符合实际需求的实现。
• constructor(defaultValue: T)：类的构造函数，接受一个类型为 T 的参数 defaultValue，用于初始化类的 defaultValue 属性。在构造函数中，还为 add 方法赋予了一个初始的函数实现，不过这个初始实现只是简单返回 defaultValue，后续会被覆盖。
• const g1: GenericNumber<number> = new GenericNumber<number>(200);：实例化 GenericNumber 类，明确指定类型参数 T 为 number。创建了一个名为 g1 的实例，并传入初始值 200 来初始化 defaultValue 属性。
• g1.add = function (x: number, y: number): number { return x + y; };：为 g1 实例的 add 方法重新赋值，定义了一个新的函数实现，该实现实现了两个数字相加的功能。
• const g2: GenericNumber<string> = new GenericNumber<string>('不错');：实例化 GenericNumber 类，指定类型参数 T 为 string。创建了一个名为 g2 的实例，并传入初始值 '不错' 来初始化 defaultValue 属性。
• g2.add = function (x: string, y: string): string { return x + y; };：为 g2 实例的 add 方法重新赋值，定义了一个新的函数实现，该实现实现了两个字符串拼接的功能。