9 replies

TypeScript error: Type 'string' is not assignable to union value

Hello friends.

I've picked up my side project again this week and I'm trying to add a new feature (required field indicator). It's a component library for forms. It's expecting specific form data:

export interface Form {
  databaseId: number
  ... extra stuff ...
  customRequiredIndicator?: string | null
  requiredIndicator?: "TEXT" | "ASTERISK" | "CUSTOM" | null
  submitButton: Button
  formFields: { nodes: Field[] }
}

export interface Form {
  databaseId: number
  ... extra stuff ...
  customRequiredIndicator?: string | null
  requiredIndicator?: "TEXT" | "ASTERISK" | "CUSTOM" | null
  submitButton: Button
  formFields: { nodes: Field[] }
}

When a user passes in the form data, they may or may not include the

requiredIndicator

requiredIndicator

. If they do, it can be either "TEXT", "ASTERISK", "CUSTOM" or a null value.

I thought I could tell TypeScript that these are the only 3 string values that it could be and have it work. But when I actually test it out, I get the following error:

Type 'string' is not assignable to type '"TEXT" | "ASTERISK" | "CUSTOM" | null | undefined'.

Type 'string' is not assignable to type '"TEXT" | "ASTERISK" | "CUSTOM" | null | undefined'.

I've tried a bunch of things and can't seem to sort it out. I think the issue is that because I have no control over the data that the user is passing into the <Form> component, I can't use a type assertion.

I'm thinking that just typing it as 'string' is fine enough. I just thought that TypeScript could do this too.

I could stand to learn more, so I'm open to anything y'all have for me.

Thanks!

Solution

Typescript infers the types from the json to be plain types like string, and so you can assert type for it to be proper. To do so you can do the following, where Form is the type you defined

import data from "../data/query.json"
const mockData = data as Form

import data from "../data/query.json"
const mockData = data as Form

Jump to solution

TTC

Theo's Typesafe Cult•3y ago•

9 replies

mosesintech

TypeScript error: Type 'string' is not assignable to union value

Hello friends.

I've picked up my side project again this week and I'm trying to add a new feature (required field indicator). It's a component library for forms. It's expecting specific form data:

export interface Form {
  databaseId: number
  ... extra stuff ...
  customRequiredIndicator?: string | null
  requiredIndicator?: "TEXT" | "ASTERISK" | "CUSTOM" | null
  submitButton: Button
  formFields: { nodes: Field[] }
}

export interface Form {
  databaseId: number
  ... extra stuff ...
  customRequiredIndicator?: string | null
  requiredIndicator?: "TEXT" | "ASTERISK" | "CUSTOM" | null
  submitButton: Button
  formFields: { nodes: Field[] }
}

When a user passes in the form data, they may or may not include the

requiredIndicator

requiredIndicator

Type 'string' is not assignable to type '"TEXT" | "ASTERISK" | "CUSTOM" | null | undefined'.

Type 'string' is not assignable to type '"TEXT" | "ASTERISK" | "CUSTOM" | null | undefined'.

Solution

Typescript infers the types from the json to be plain types like string, and so you can assert type for it to be proper. To do so you can do the following, where Form is the type you defined

import data from "../data/query.json"
const mockData = data as Form

import data from "../data/query.json"
const mockData = data as Form

Jump to solution

TypeScript error: Type 'string' is not assignable to union value

TypeScript error: Type 'string' is not assignable to union value

Similar Threads

Similar Threads

Similar Threads