第6章 泛型

基本使用

// 类型均为 any 与 JavaScript 中无区别
function getVal(val) {
  return val;
}

// 使用泛型
function getVal<T>(val: T): T {
  return val;
}

const myName1 = getVal<string>('lbviic');  // myName的类型为 string
const myName2 = getVal('lbviic');  // 不明确声明 也会自动推断 myName的类型为 string

类型继承

未继承时

//length 会报错，因为 val 上并没有 length 属性
function getLength<T>(val: T): T {
  return val.length;  
}

继承类型

// 若参数为 array 或 string 类型，可以继承联合类型
function getLength<T extends string | any[] >(val: T): number {
  return val.length;
}

实现接口

// 声明自己的接口
interface ILength {
  length: number
}

// 实现自己申明的接口后，就有了 length 属性
function getLength<T extends ILength>(val: T): number {
  return val.length;
}

泛型在类中的运用

class MyArr<T> {
  // 通过泛型，预留 data 数组的类型
  data: T[] = [];
  push(...items: T[]) {
    this.data.push(...items);
  }
  shift() {
    return this.data.shift();
  }
}
type Person = {
  name: string;
  age: number;
};
// 指定为 number 类型
const numArr = new MyArr<number>();
numArr.push(1, 2, 3);
numArr.shift();
// 指定为 Person 类型
const peopleArr = new MyArr<People>();
peopleArr.push({ name: 'lbviic', age: 18 });
peopleArr.shift();

泛型在接口中的运用

//定义学生接口，其中学生信息和年级为泛型
interface IStudent<T, K> {
  studentInfo: T;
  grade: K;
}
// 定义学生类型
type Student = {
  name: string;
  age: number;
};
// 通过泛型传入学生信息和年级的类型
const lbviic: IStudent<Student, number> = {
  studentInfo: {
    name: 'lbviic',
    age: 18
  },
  grade: 3
};