ts 泛型简单理解与应用

什么是泛型

简单来说，泛型是指一种类型在不同地方，存在不同的值,列如以下

function creatValue(a: string):string {
	return a;
}

function creatValueNumber(a: number):number {
	return a;
}

或者使用any,但是这样会失去使用ts的类型约束，现在改为使用泛型就可以解决这种问题

function creatValue<T>(a: T):T {
	return a;
}

creatValue<string>("string")
/** 也可以直接传入省略<> */
creatValue("string")
...

当然也可以做成多个

function creatValue<T,X>(a: T,b:X):T {
  console.log(b)
	return a;
}


creatValue<string,number>("a",123)
// 或者
creatValue("a",123)

泛型的继承用法

/** 定义基本的信息*/
interface base {
  name:string;
  age:number;
}
/** 定义一个student类型，泛型不确定的类型然后继承了base */
interface student<T extends base> {
  baseInfo: T
}

/** 这里自定义了我自己想要的类型 */
interface myBase extends base {
  address: string;
  grade:string
}

/** 最终类型 */
const studentA: student<myBase> ={
  baseInfo: {
    name:'张三',
    age:14,
    address:'中国',
    grade:'初一'
  }
}

/** 再定义一个身体类型 */ 
interface bodyBase extends base {
  weight: string;
  height:string
}

const studentB: student<bodyBase> ={
  baseInfo: {
    name:'张三',
    age:14,
    weight:'70kg',
    height:'170cm'
  }
}

/** 也能将全部继承下来 */ 
interface AllBase extends bodyBase,myBase {}

const studentC: student<AllBase> ={
  baseInfo: {
    name:'张三',
    age:14,
    weight:'70kg',
    height:'170cm',
    address:'中国',
    grade:'初一'
  }
}

硬核一点的

interface base {
  name:string;
  age:number;
}

interface student<T extends base> extends baseInfo<T> {

  test(t: T):T;
}

interface baseInfo<T> {
  baseInfo: T
}

interface bodyInfo extends base {
  weight: string;
  height: string;
}

const studentA:student<bodyInfo> = {
  baseInfo:{
    name:'张三',
    age:18,
    weight:'70kg',
    height:'170'
  },
  test(t: bodyInfo): bodyInfo{
    return t
  }
}



function test<T extends bodyInfo>(option: baseInfo<T>){
  option.baseInfo.age = 1
}