如何将索引类型与交集类型结合起来

Question

我正在尝试定义一个接受如下剩余属性的类型：

export type Base = {
  numberProperty: number;
  booleanProperty: boolean;
};

export type Residual = {
  [key: string]: string;
};

export type Complete = Base & Residual;

const abc: Complete = {
  numberProperty: 1234,
  booleanProperty: true,
  residualProperty: 'abc',
};

换句话说，我想确保numberProperty 和booleanProperty 始终分别为number 和boolean 类型，但任何其他属性都应为string。但是，在编译此（3.9.2）时，出现以下错误：

error TS2322: Type '{ numberProperty: number; booleanProperty: true; residualProperty: string; }' is not assignable to type 'Complete'.
  Type '{ numberProperty: number; booleanProperty: true; residualProperty: string; }' is not assignable to type 'Residual'.
    Property 'numberProperty' is incompatible with index signature.
      Type 'number' is not assignable to type 'string'.

13 const abc: Complete = {
         ~~~


Found 1 error.

我发现了类似的问题和解决类似问题的文档，但我还没有找到关于如何执行此操作的结论性答案。

Answer 1

问题是Residual 与来自Base 的键numberProperty 和booleanProperty 有冲突，因为它们不是字符串。

要修复它，您需要更改 Residual 以表示除 Base 之外的所有内容都是字符串。之后Residual 尊重Base，它们可以组合在一起。

export type Base = {
  numberProperty: number;
  booleanProperty: boolean;
};

export type Residual = {
  [K in keyof any]: K extends keyof Base ? never : string;
};

export type Complete = Base | Residual;

const abc: Complete = {
  numberProperty: 1234,
  booleanProperty: true,
  residualProperty: 'abc',
};

如果您无法更改Residual，那么您应该重新考虑您的代码以避免它们的联合，因为它存在冲突并且无效。

const val1: Residual = {
  numberProperty: 'string', // valid, positive
};
const val2: Base = {
  numberProperty: 'string', // invalid, negative
};
const val3: Residual | Base = {
  numberProperty: 'string', // positive & negative = negative.
};

---

对于深度类型，我们必须省略 string 并始终使用定义的键进行操作。通常人们有 2 个选项 - 指定所有键或使用验证功能。

export type Base = {
  numberProperty: number;
  booleanProperty: boolean;
};

export type Residual<KEYS extends keyof any = keyof any> = {
  [K in KEYS]: string;
};

export type Complete<K extends keyof any> = Base & Residual<Exclude<K, keyof Base>>;

const abc: Complete<'residualProperty'> = {
  numberProperty: 1234,
  booleanProperty: true,
  residualProperty: 'abc',
};

const booleanVariable: boolean = abc.booleanProperty;


const validateComplete = <T extends Complete<K>, K extends keyof T>(value: T): Complete<K> => value;

const abc2 = validateComplete({
  numberProperty: 1234,
  booleanProperty: true,
  residualProperty: 'abc',
});

const booleanVariable2: boolean = abc2.booleanProperty;
const stringVariable2: string = abc2.residualProperty;