ts 当一个属性为联合类型时，如何通过它的取值来控制其他属性的类型？

作者站长头像
站长
· 阅读数 5

我想要通过 IMap 这接口来获得一个类型，类型中有两个属性type 和 props， props 属性的类型会随着 type 属性的取值发生改变，type 的类型为 IMap 接口中的所有属性名的联合类型，props 的类型就是 type 取值在 IMap 中同名属性对应的类型。

interface IMap {
    a: number,
    b: string,
    c: boolean
    //...
}

type Config = {
    type: 'a',
    props: IMap['a']
} | {
    type: 'b',
    props: IMap['b']
} | {
    type: 'c',
    props: IMap['c']
}
// ...

通过这种方式写联合类型的方式可以达到我想要的结果，但是 IMap 中的属性有特别多，做不到将所有的组合都罗列出来，有什么解决办法吗？

回复
1个回答
avatar
test
2024-06-24
interface IMap {
  a: number;
  b: string;
  c: boolean;
  // ... 扩展更多属性
}

// 用映射类型和条件类型
type Config = {
  [K in keyof IMap]: {
    type: K;
    props: IMap[K];
  }
}[keyof IMap];

// 例子：
const configA: Config = { type: 'a', props: 42 }; // 正确
const configB: Config = { type: 'b', props: "hello" }; // 正确
const configC: Config = { type: 'c', props: true }; // 正确
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容