如何在ES6 Map中使用泛型实现自定义Properties类的类型约束

核心思路 #

通过TypeScript类型运算合并两个泛型接口，重叠属性优先取TP的类型，再基于合并后的类型约束Map的键值类型和类方法的入参、返回值类型。

完整代码实现 #

1. 定义合并类型 #

// 泛型合并规则：T和G存在同名属性时，优先取T中的类型定义
type MergePriority<G, T> = T & Omit<G, keyof T>;

2. 改造Properties类 #

class Properties<G, T> {
    // 给Map绑定正确的键值类型
    protected _state = new Map<keyof MergePriority<G, T>, MergePriority<G, T>[keyof MergePriority<G, T>]>();

    // 泛型约束state方法，实现输入key自动推断返回值类型
    state<K extends keyof MergePriority<G, T>>(key: K): MergePriority<G, T>[K] | undefined {
        return this._state.get(key) as MergePriority<G, T>[K] | undefined;
    }
}

使用效果测试 #

// 示例自定义类型
interface ComplexType {
    name: string;
    id: number;
}

interface GP {
    prop1: string;
    prop2: number;
}

interface TP {
    prop2: ComplexType;
}

class A extends Properties<GP, TP> {}

const a = new A();
// 调用时会自动提示合法key：prop1、prop2
const prop1 = a.state('prop1'); // 自动推断类型：string | undefined
const prop2 = a.state('prop2'); // 自动推断类型：ComplexType | undefined

补充说明 #

如果业务逻辑可以保证Map中一定存在所有合法key的赋值，可以去掉返回值中的undefined类型，也可以通过类构造函数要求传入初始值来规避空值问题。

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