TypeScript:一个依赖于另一个的接口属性

Vin*_*rma 2 javascript angularjs typescript reactjs react-redux

是否可以键入依赖于另一个的接口属性?

例如我有:

const object = {
  foo: 'hello',
  bar: { hello: '123', },
}
Run Code Online (Sandbox Code Playgroud)

我想确保bar的键必须是foo的值。

interface ObjectType = {
  foo: string;
  bar: { hello: string; } // instead of hardcoding have something like this? --> payload: { ValueOfFoo: string; }
}
Run Code Online (Sandbox Code Playgroud)

谢谢!:)

Alu*_*dad 6

您需要一个泛型来捕获特定字符串的类型

interface ObjectType<K extends string> {
    foo: K;
    bar: { [P in K]: string };
}
Run Code Online (Sandbox Code Playgroud)

然后你可以写

const object: ObjectType<'hello'> = {
    foo: 'hello',
    bar: { hello: '123', },
};
Run Code Online (Sandbox Code Playgroud)

或者,如果你有一个接受这样一个对象的函数,你可以使用接口来强制执行具有完整类型推断的规则

function useObject<K extends string>(o: ObjectType<K>) { }

useObject({
    foo: 'hello', 
    bar: { hello: '113' } // works
});

useObject({
    foo: 'hello', 
    bar: { world: '113' }
//         ^^^^^???????????? error, `world` should be `hello`
});
Run Code Online (Sandbox Code Playgroud)

游乐场链接