TypeScript 接口(interface)，其中对象键是另一个对象的值

Question

这是我的界面:

interface MyInterface {
    a: string
    b: string
}

我有来自这个接口(interface)的objectA:

const objectA: MyInterface = { 
    a: val1, 
    b: val2
}

然后我有一个读取 API 响应并创建映射的函数，如下所示:

const createMapping = (response) => {
  const ret = {};
  response.forEach(item => {
    ret[objectA[item]] = true;
  })
 return ret;
}

有没有一种方法可以为 createMapping 的返回值创建一个接口(interface)，这样接口(interface)的键就是 MyIterface 的值？

返回值可以是 {val1: true}、{val2: true} 或 {val1: true, val2:true} >

Answer 1

我不太确定在哪里objectA来自，但你可以得到你想要的。首先，无论在哪里objectA来自，你应该让 TypeScript 知道这些值是特殊的 string literal types .有different ways去做这个。最直接(但不是 DRY)的方法是使用类型断言:

interface MyInterface {
  a: string
  b: string
}

const objectA = {
  a: "val1" as "val1",
  b: "val2" as "val2"
} 

请注意 objectA未被注释为 MyInterface ，因为您不希望 TypeScript 忘记它的属性是 "val1"和 "val2" .它与 MyInterface 的兼容性稍后验证。

现在我们可以创建一个接受任何参数的函数MyInterface -like(具有字符串属性)并生成 createMapping()使用它的函数:

const makeCreateMapping = <O extends MyInterface & {[k: string]: string}>(o: O) =>
  (response: (keyof O)[]) => {
    const ret = {} as Partial<Record<O[keyof O], true>>;
    response.forEach(item => {
      ret[o[item]] = true;
    })
    return ret;
  }

O参数是你的 MyInterface 的类型目的。我们调用makeCreateMapping()与 objectA :

const createMapping = makeCreateMapping(objectA);

这就是 objectA 的事实所在是 MyInterface进来了。如果没有，编译器会冲你大喊大叫。现在，如果您检查 createMapping 的类型，它是:

const createMapping: (response: ("a" | "b")[]) => Partial<Record<"val1" | "val2", true>>

也就是说，一个接受 "a" 数组的函数或 "b" , 并返回 Partial<Record<"val1" | "val2", true>>这本质上是 {val1?: true, val2?: true}其有效值包括 {val1: true} , {val2: true} , 和 {val1: true, val2: true} .

演示:

declare const response: (keyof typeof objectA)[]
const mapping = createMapping(response);
mapping.val1 // true | undefined
mapping.val2 // true | undefined
mapping.val3 // error, doesn't exist

希望对您有所帮助。祝你好运!