Typescript - Error when referencing enum in object property

Question

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?

How does TypeScript know the types of that JSON file? What exactly is the assignment that fails? — Bergi
– Bergi, Commented Jan 11, 2022 at 2:04
Even though your enums are represented as strings at runtime, they do have a different type at compile time and you cannot assign a string constant where an enum is expected. You can type your property with a union of strings though — Bergi
– Bergi, Commented Jan 11, 2022 at 2:08

jsejcksn · Accepted Answer · 2022-01-11 02:35:49Z

2

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

edited Jan 11, 2022 at 2:35

answered Jan 11, 2022 at 2:30

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript - Error when referencing enum in object property

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related