来自枚举不同类型的打字稿界面键答案

【问题标题】：Typescript interface keys from enum different types来自枚举不同类型的打字稿界面键
【发布时间】：2021-12-06 07:56:07
【问题描述】：

我有应该作为不同类型接口键的属性列表。如何更好地实施它们？我不想被允许使用枚举中不存在的属性。

export enum SomePropetries {
  prop1,
  prop2,
  prop3
};

export interface PropsInterface {
  [SomePropetries.prop1]: number;
  [SomePropetries.prop2]: boolean;
  [SomePropetries.prop3]: string;
}


// Usage example. 
// I have object of properties. Each of property can be updated separatelly.

let props: PropsInterface = {
   [SomePropetries.prop1]: null,
   [SomePropetries.prop2]: null,
   [SomePropetries.prop3]: null
};

const fieldToUpdate: {
  field: SomePropetries;
   value: number;
} = {
   field: SomePropetries.prop1,
   value: 123
};

props[fieldToUpdate.field] = fieldToUpdate.value;

【问题讨论】：

请提供可重现的示例，您的示例包含语法错误
请检查。现在没有语法错误。
let fieldToUpdate { 和 field: Properties = Properties.prop1, 语法无效
现在我修复了很多。请检查。我只有一个错误：类型“数字”不可分配给类型“从不”。但这是我的问题

标签： typescript mapped-types

【解决方案1】：

首先，你需要让PropsInterface的所有属性都可以为空。

export enum SomePropetries {
  prop1,
  prop2,
  prop3
};

interface PropsBase {
  [SomePropetries.prop1]: number;
  [SomePropetries.prop2]: boolean;
  [SomePropetries.prop3]: string;
}

type NullableRecord<T> = {
  [Prop in keyof T]: T[Prop] | null
}

type PropsInterface = NullableRecord<PropsBase>

然后，您可以使用null 作为属性类型。

let props: PropsInterface = {
  [SomePropetries.prop1]: null,
  [SomePropetries.prop2]: null,
  [SomePropetries.prop3]: null
}

这不起作用，

const fieldToUpdate = {
  field: SomePropetries.prop1,
  value: 123
}

props[fieldToUpdate.field] = fieldToUpdate.value;

因为fieldToUpdate.field 被推断为enum。我的意思是它期望所有可能的枚举键，而您只对一个 SomePropetries.prop1 感兴趣。

因此，为了使其工作，您应该只使用as const 断言。

const fieldToUpdate = {
  field: SomePropetries.prop1,
  value: 123
} as const

props[fieldToUpdate.field] = fieldToUpdate.value;

完整代码：

export enum SomePropetries {
  prop1,
  prop2,
  prop3
};

interface PropsBase {
  [SomePropetries.prop1]: number;
  [SomePropetries.prop2]: boolean;
  [SomePropetries.prop3]: string;
}

type NullableRecord<T> = {
  [Prop in keyof T]: T[Prop] | null
}

type PropsInterface = NullableRecord<PropsBase>


// Usage exanple. 
// I have object of properties. Each of property can be updated separatelly.

let props: PropsInterface = {
  [SomePropetries.prop1]: null,
  [SomePropetries.prop2]: null,
  [SomePropetries.prop3]: null
};

const fieldToUpdate = {
  field: SomePropetries.prop1,
  value: 123
} as const

props[fieldToUpdate.field] = fieldToUpdate.value;

Playground

【讨论】：

谢谢！但是如何制作精确的类型呢？
exact 是什么意思？可以举个例子吗？
我编辑了我的示例。请看一看。
现在效果很好！太感谢了。这是 nullableRecord 的一些魔法。我必须了解它））