如何使用 Enum 类型的字段执行 Typesafe JSON？

Question

我有一些符合我定义的 TypeScript 接口的 JSON 文件。

在大多数情况下，当导入此类 JSON 文件并将它们分配给类型化变量时，TypeScript 能够自动推断类型签名（参见下面代码中的 behaves exactly as I want）。但是，当类型包含 字符串枚举 时，它不再起作用（请参阅 DOES NOT behave）。

以下是工作中的Minimal, Reproducible Example：

valid.json

{ "id": 3.14159 }

invalid.json

{ "id": "3.14159" }

validEnum.json

{ "color": "red" }

invalidEnum.json

{ "color": "chartreuse" }

index.ts

import validJson from './valid.json'
import invalidJson from './invalid.json'
import validJsonEnum from './validEnum.json'
import invalidJsonEnum from './invalidEnum.json'

type ColorType = 'red' | 'blue' | 'yellow'

type IJsonType = {"id": number}
type IJsonTypeWithEnum = {"color": ColorType}

// behaves exactly as I want
const a: IJsonType = validJson    // no error
const b: IJsonType = invalidJson  // ERROR: Type 'string' is not assignable to type 'number'.

// DOES NOT behave as I want: SHOULD NOT error
const c: IJsonTypeWithEnum = validJsonEnum    // ERROR: Type 'string' is not assignable to type 'ColorType'.

// DOES NOT behave as I want: error should be that "chartreuse" is not assignable to type 'ColorType'
const d: IJsonTypeWithEnum = invalidJsonEnum  // ERROR: Type 'string' is not assignable to type 'ColorType'.

我可以使用type IJsonTypeWithEnum = {"color": string} 使错误消失，但这违背了目的。

是否有任何变通方法或编译器开关可以让 TypeScript 将 JSON 中的枚举值识别为字符串？还是 JSON 类型推断的 TypeScript 限制？

Answer 1

尝试使用类型断言

const data: IJsonType = jsonData as IJsonType;

Answer 2

在这种情况下，Typescript 不会为您转换。您需要自己进行类型转换

type ColorType = 'red' | 'blue' | 'yellow';

type IJsonType = {"color" : ColorType}


let validJson = {
   "color": "red" as ColorType
  // or
  // "color": "red" as const
}


let invalidJson = {
   "color": "chartreuse"
}


const data1: IJsonType = validJson;  // this MUST NOT error

const data2: IJsonType = invalidJson;  

Answer 3

目前在 Typescript 中是不可能的。 有一个未解决的问题/建议：https://github.com/microsoft/TypeScript/issues/32063（以及一些类似的）。

Answer 4

最简单的方法是使用as const，但如果你导入 json - 那么我不确定它是否可能。

还有amakhrov指出当前的TS问题：https://github.com/microsoft/TypeScript/issues/32063

在问题得到解决/实现之前，您可以编写一个类型断言函数来验证类型，请查看下面的verifyColor。它接受一个参数并断言它是IJsonTypeWithEnum。

// helps to detect flexible objects
export const isObject = (value: unknown): value is {[key in keyof any]: unknown} => { 
    return typeof value === 'object' && value !== null;
}

// solves issues with for key of
export const objectKeys = <T extends object, K extends keyof T>(value: T): Array<K> => {
    return <Array<K>>Object.keys(value);
};

// THAT'S THE ANSWER
// verifies colors
const verifyColor = (value: unknown): value is IJsonTypeWithEnum => {
    if (!isObject(value)) { 
        return false;
    }
    for (const key of objectKeys(ColorType)) {
        if (ColorType[key] === value.color) {
            return true;
        }
    }
    return false;
};


const validJson: unknown = { "id": 3.14159 };
const invalidJson: unknown = { "id": "3.14159" };
const validJsonEnum: unknown = { "color": "red" };
const invalidJsonEnum: unknown = { "color": "chartreuse" };

enum ColorType {
    red = 'red',
    blue = 'blue',
    yellow = 'yellow',
}

type IJsonType = {"id": number}
type IJsonTypeWithEnum = { "color": ColorType }

// asserting type
if (verifyColor(validJsonEnum)) { // add || 1 to check failure
    const c: IJsonTypeWithEnum = validJsonEnum; // no error anymore
}

// asserting type
if (verifyColor(invalidJsonEnum)) { // add || 1 to check failure
    const d: IJsonTypeWithEnum = invalidJsonEnum  // no error anymore
}