MST
星途 面试题库

面试题:TypeScript泛型类的高级应用与类型推断优化

实现一个泛型类Mapper,它接受一个源类型S和一个目标类型T,以及一个映射函数类型F。Mapper类有一个map方法,该方法接受一个S类型的数组,并根据映射函数F将其转换为T类型的数组。难点在于,映射函数F的参数和返回值类型需要和S、T类型紧密关联,并且在调用map方法时,TypeScript能够正确推断出T的类型。例如,若S是{ id: number, name: string },F是({id}) => id * 2,那么T应能被正确推断为number[]。请给出完整的TypeScript代码实现,并解释类型推断的关键步骤。
44.8万 热度难度
前端开发TypeScript

知识考点

AI 面试

面试题答案

一键面试
class Mapper<S, T, F extends (arg: S) => T> {
    constructor(private mapFunction: F) {}
    map(arr: S[]): T[] {
        return arr.map(this.mapFunction);
    }
}

类型推断关键步骤解释

  1. Mapper类定义
    • Mapper<S, T, F extends (arg: S) => T>,这里定义了泛型类Mapper,它接受三个泛型参数。S是源类型,T是目标类型,F是映射函数类型,且F函数接受一个S类型的参数并返回T类型的值。
  2. 构造函数
    • constructor(private mapFunction: F),构造函数接受一个类型为F的映射函数,并将其存储为类的私有属性mapFunction
  3. map方法
    • map(arr: S[]): T[]map方法接受一个S类型的数组arr,并返回一个T类型的数组。
    • return arr.map(this.mapFunction);,这里使用数组的map方法,传入类中存储的映射函数mapFunction。由于mapFunction的返回值类型被定义为T,所以整个arr.map(this.mapFunction)操作返回的数组类型就是T[]
  4. 类型推断
    • 在使用Mapper类时,TypeScript会根据传入的映射函数的参数和返回值类型,结合泛型定义,推断出ST的具体类型。例如,若S{ id: number, name: string }F({id}) => id * 2,因为F的参数是S类型,返回值是number,所以T会被推断为number,在map方法中返回的就是number[]