如何在TypeScript中实现多态函数以扩展localStorage写入方法

方案选型结论 #

不需要新增独立函数，优先使用 TypeScript 函数重载 + 可辨识联合类型 实现需求，既可以保证类型安全、实现多态效果，也不会产生冗余代码，后续扩展成本更低。如果单独为每个类型新增函数，会出现大量逻辑相似的重复代码，后续迭代维护成本会高很多。

具体实现方法 #

1. 先定义基础接口 #

如果要扩展新的type类型，先新增对应的body接口即可：

// 原有接口
export interface FavouritesBodyPoint {
  x: number
  y: number
}
export interface FavouritesBodyObject {
  id: string
  name: string
}
// 扩展新增的类型对应接口
export interface FavouritesBodyLine {
  start: FavouritesBodyPoint
  end: FavouritesBodyPoint
}

2. 编写函数重载实现多态 #

通过重载声明把type参数和对应的body类型做绑定，调用时TS会自动做类型校验，内部也可以通过type值自动推导body的实际类型：

// 重载签名：对应不同type的入参约束
add(type: "point", body: FavouritesBodyPoint): void
add(type: "object", body: FavouritesBodyObject): void
// 新增扩展的类型重载，要加多少种就加多少行重载声明即可
add(type: "line", body: FavouritesBodyLine): void

// 函数实现
add(type: "point" | "object" | "line", body: FavouritesBodyPoint | FavouritesBodyObject | FavouritesBodyLine) {
    // 用switch做类型守卫，实现不同type的差异化逻辑，完成多态效果
    switch(type) {
        case "point":
            // 此处TS会自动推导body为FavouritesBodyPoint类型
            localStorage.setItem(`fav_point_${Date.now()}`, JSON.stringify(body))
            break
        case "object":
            // 此处TS会自动推导body为FavouritesBodyObject类型
            localStorage.setItem(`fav_object_${Date.now()}`, JSON.stringify(body))
            break
        case "line":
            // 此处TS会自动推导body为FavouritesBodyLine类型
            localStorage.setItem(`fav_line_${Date.now()}`, JSON.stringify(body))
            break
    }
}

实现效果 #

• 调用时自动校验类型：比如调用add('point', {id: 'xxx'})时TS会直接报错，提示body类型不匹配
• 扩展成本极低：后续新增支持的类型，只需要新增对应body接口、加一行重载声明、在switch里加对应分支即可，不需要修改原有逻辑
• 符合多态定义：同一个函数名，根据传入的type参数不同，自动匹配对应的入参校验规则和内部处理逻辑

内容的提问来源于stack exchange，提问作者user15361861