Typescript - Error when referencing enum in object property
I am trying to reference an enum in typescript as the value of an object property however I am getting an error when doing so
Here is the code:
types.ts
export enum BlockContentResolverTypes {
RAW_STRING_RESOLVER = 'raw::string::resolver',
RAW_NUMBER_RESOLVER = 'raw::number::resolver',
}
export interface BlockAnswerType {
id: string;
key: string;
value: boolean | string | number;
label: {
type: BlockContentResolverTypes
value: string;
};
}
What I am trying to do is say that the label.type
can equal any of the values in the BlockContentResolverTypes
enum ie raw::string::resolver
or raw::number::resolver
.
When I try and import a JSON object into my project and assign it a type of BlockAnswerType
I get a type error.
Here is the object I am importing:
data.json
{
"data": {
"id": "b608dbcd-f6c0-423d-9efd-c957af86a3b6",
"key": "yes",
"label": {
"type": "raw::string::resolver",
"value": "Yes!"
},
"value": true
}
}
And the Typescript error I get is:
Type 'string' is not assignable to type 'BlockContentResolverTypes'.
I initially thought the error meant I had to manually declare all the enum values like so:
export interface BlockAnswerType {
id: string;
key: string;
value: boolean | string | number;
label: {
type: BlockContentResolverTypes.RAW_STRING_RESOLVER | BlockContentResolverTypes.RAW_NUMBER_RESOLVER
value: string;
};
}
But this still produces an error.
Where have I gone wrong and am I using the appropriate approach for what I am trying to achieve here?
You haven't explained how you're ingesting the the JSON and where it's being parsed, but when parsing the JSON string, just assert the type and the compiler will accept it.
You are, of course, responsible for ensuring that the JSON structure matches the type you have defined for it (and can do so at runtime if desired through validation of all of its properties after parsing).
TS Playground
const json = `{
"data": {
"id": "b608dbcd-f6c0-423d-9efd-c957af86a3b6",
"key": "yes",
"label": {
"type": "raw::string::resolver",
"value": "Yes!"
},
"value": true
}
}`;
const blockAnswer = JSON.parse(json).data as BlockAnswerType;
blockAnswer.label.type // BlockContentResolverTypes