typescript-泛型

泛型


为什么需要使用泛型?

有时,书写某个函数时,会丢失一些类型信息(多个位置的类型应该保持一致或有关联的信息)

定义:

是指附属于函数、类、接口、类型别名之上的类型。

泛型相当于是一个类型变量,在定义时,无法预先知道具体的类型,可以用该变量来代替,只有到调用时,才能确定它的类型。

很多时候,TS会智能的根据传递的参数,推导出 泛型的具体类型。

如果无法完成推导,并且又没有传递具体的类型,默认为空对象。

泛型可以设置默认值

泛型的使用

function take(arr: T[], n: number): T[] {
  if (n >= arr.length) {
    return arr
  }
  const newArr: T[] = []
  for (let i = 0; i < n; i++) {
    newArr.push(arr[i])
  }
  return newArr
}

在类中使用泛型

export class A {
  constructor(private arr: T[]) {

  }
}

接口使用泛型

interface callback {
  (n: T, i: number): boolean
}

类型别名使用泛型

type callback = (n: T, i: number) => boolean

泛型的约束

可以通过使用 extends 关键字,用于限制泛型的取值

interface hasNameProperty {
  name: string
}

function nameToUpperCase(obj: T): T {
  obj.name = obj.name
    .split(' ')
    .map(s => s[0].toLocaleUpperCase() + s.slice(1))
    .join(' ')
  return obj
}

多泛型

function mixinArray(arr1: T[], arr2: K[]): (T|K)[] {
  if (arr1.length !=arr2.length) {
    throw new Error('两个数组长度不等');
  }
  let result: (T | K)[] = []
  for (let i = 0; i < arr1.length; i++) {
    result.push(arr1[i]);
    result.push(arr2[i]);
  }
  return result;
}

你可能感兴趣的:(typescript学习,前端)