返回参数类型为传入 function 参数值的函数的 object

Question

我想要 function，我们称之为DummyService ，它将接受一些definition object 作为参数，并以DummyService的方式返回一堆函数，这些函数只能作为参数返回。 请参阅下面的代码示例。 知道如何实现这一目标吗？ 提前非常感谢。

type Definition = {
    id: string;
    steps: Array<{key: string, callback?: () => void}>
};

const DummyService = (definition: Definition) => {
    return { 
        dummyFn: (step: {key: any}) => { // I need to figure out the type that would allow to pass only certain values that has been passed in `steps` array of `definition`
            console.log(step);
        }
    };
};

const DummyComponent1 = () => {
    const definition = {
        id: "testId1",
        steps: [
            {  key: "key1"},
            {  key: "key2"},
        ],
    };

    const { dummyFn } = DummyService(definition);
    const handler = () => dummyFn({ key: "key1dsfasd" }); // I want this to be invalid - valid key values should be only "key1" or "key2"

    return <div onClick={handler}>test</div>;
}

const DummyComponent2 = () => {
    const definition = {
        id: "testId2",
        steps: [
            {  key: "key3"},
            {  key: "key4"},
        ],
    };

    const { dummyFn } = DummyService(definition);
    const handler = () => dummyFn({ key: "key3" }); // This should be valid - valid key values should be only "key2" or "key4"

    return <div onClick={handler}>test</div>;
}```

Answer 1

我们需要使Definition成为依赖于步骤数组的泛型。

这里棘手、混乱的部分是处理像"key1"和"key2"这样的字符串作为它们的字面值，而不仅仅是类型string 。 为此，我们必须在definition后添加as const

const definition = {/*...*/} as const;

这将值解释为文字字符串，但它也使定义中的所有内容为readonly 。 所以我们需要在定义Definition和DummyService的类型时添加一堆readonly否则我们会得到关于将readonly分配给可变类型的错误。

定义如下：

type Definition<Steps extends readonly {key: string, callback?: () => void}[]> = {
    readonly id: string;
    readonly steps: Steps;
};

我们说我们的Steps extends了一个数组，我们希望它是一个特定的元组。

我们的DummyService如下所示：

const DummyService = <Steps extends readonly {key: string, callback?: () => void}[]>(definition: Definition<Steps>) => {
    return { 
        dummyFn: (step: { key: Steps[number]['key'] }) => {
            console.log(step);
        }
    };
};

Steps[number]['key']类型为我们提供了所有有效的步骤键。 作为旁注，我不确定您为什么要传递您的参数，例如({key: "key2"})而不仅仅是("key2") 。

您现在得到所有需要的错误，并且正确调用时没有错误。

Typescript 游乐场链接