casting - Typescript - Type 'undefined' is not assignable to type 'string | number | symbol'

Question

I have a type export type status = 'success' | 'error' | undefined;

Now, there is an object that maps to an icon

const iconsMap: Record<status, React.ReactSVGElement> = {
  error: ErrorIcon,
  success: SuccessIcon,
};

Here, since there is no key undefined in iconsMap, it causes a typescript error

Type 'string | undefined' does not satisfy the constraint 'string | number | symbol'. Type 'undefined' is not assignable to type 'string | number | symbol'.

How do i solve this?

question from:https://stackoverflow.com/questions/65906394/typescript-type-undefined-is-not-assignable-to-type-string-number-symbo

Answer 1

You could exclude undefined using NonNullable utility:

const iconsMap: Record<NonNullable<status>, React.ReactSVGElement> = {
  error: ErrorIcon,
  success: SuccessIcon,
};

---

And formally you get the error not because there is no key undefined, but because Record has generic type constraint and accepts only string | number | symbol.