javascript - 使用映射类型时,如何在 TypeScript 中推断对象属性的值?

标签 javascript typescript

我正在尝试在 typescript 中创建一个单例 factoryLookup 强制我为联合类型(即映射查找类型)中的每个值定义一个工厂,但是我也想成为能够为查找的任何值推断签名(可以是任意参数的值或函数)。这是一个代码示例:

// Using a simple object, I can create a map between a key and an arbitrary function or value
const factoryLookup = {
  foo: (message: string, count: number): string => message + count,
  bar: (): number => 1,
};

// TypeScript can infer function signature of the foo and bar values
factoryLookup.foo('hello world', 3); // foo's signature: (message: string, count: number) => string
factoryLookup.bar(); // bar's signature: () => number

type FactoryTypes = 'foo' | 'bar' | 'baz';

// With a mapped type, TypeScript can enforce I have *something* defined for every member I am mapping
const typedFactoryLookup: { [key in FactoryTypes]: any } = {
  foo: (message: string, count: number) => {},
  bar: () => {},
  baz: (obj: any) => {},
};

// However, I don't know how to infer the mapped values
typedFactoryLookup.foo; // any type
typedFactoryLookup.bar; // any type
typedFactoryLookup.baz; // any type

我想要类型安全,以确保我为联合/枚举类型中的每个值都定义了一个函数,而且还需要类型推断来知道该值的签名是什么。

任何关于如何解决这个问题的想法,或实现相同目标的替代方法,我们将不胜感激。

最佳答案

如果您显式键入一个变量,那将是它的类型,不会发生推断。你可以获得你想要的行为,但你需要使用函数的推理行为。

type FactoryTypes = 'foo' | 'bar' | 'baz';


function createTypedFactoryLookup<T extends { [key in FactoryTypes]: any }>(factory: T) {
    return factory;
}
const typedFactoryLookup = createTypedFactoryLookup({
    foo: (message: string, count: number) => {},
    bar: () => {},
    baz: (obj: any) => {},
})

typedFactoryLookup.foo; // (message: string, count: number) => void
typedFactoryLookup.bar; // () => void
typedFactoryLookup.baz; // (obj: any) => void

你也可以创建一个接受键类型的版本,但是你需要使用一个返回函数的函数,因为 typescript 不支持只指定一些类型参数(它可能在 3.1 中支持)

function createTypedFactoryLookup<TKeys extends string>(){
    return function <T extends { [key in TKeys]: any }>(factory: T) {
        return factory;
    }
}
const typedFactoryLookup = createTypedFactoryLookup<FactoryTypes>()({
    foo: (message: string, count: number) => {},
    bar: () => {},
    baz: (obj: any) => {},
})

关于javascript - 使用映射类型时,如何在 TypeScript 中推断对象属性的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51750171/

相关文章:

javascript - 防止在 jQuery 中执行排队的事件

javascript - jqueryui 的 "Fold"效果是唯一有效的效果

angular - 将属性添加到 Angular 2 组件选择器

javascript - 函数 ngOnChanges() 在 Angular 5 中不起作用

javascript - p :dialog not showing in tabs on tabview

javascript - React Router V4 正在更新 URL,但不刷新(React、Redux)

javascript - 将函数作为两层深度的 props 传递

javascript - 将字符串转换为 Angular 8 中的枚举值

javascript - 带有 flex-wrap :wrap 的 flex 容器中的斑马条纹行

javascript - 如何检查所有参数是否相同并返回字符串