Issue with typing object TypeScript - when using a predefined type with null

Question

I have the following type.

type Team = 'liverpool' | 'manUtd' | 'arsenal' | null;

I then have the following object.

const teams: Record<Team, JSX.Element> = {
  liverpool: <Liverpool />,
  manUtd: <ManU />,
  arsenal: <Arsenal />,
};

If I use teams as the first part of the Record I see the following error:

Type 'Team' does not satisfy the constraint 'string | number | symbol'.
  Type 'null' is not assignable to type 'string | number | symbol'.ts(2344)

If I use Record<string, JSX.Element> it works fine.

null cannot be used as a key. Why do you need null in your type definition? — georg
– georg, Commented Oct 11, 2019 at 8:15
thanks @georg elsewhere in the app it can be null, as it does not always exist :-) — peter flanagan
– peter flanagan, Commented Oct 11, 2019 at 8:16

Shanon Jackson · Accepted Answer · 2019-10-11 08:16:45Z

2

Record<NonNullable<Team>, JSX.Element>

Let me know if this helps. this error appears because null is not a valid javascript object key type.

answered Oct 11, 2019 at 8:16

Shanon Jackson

6,6511 gold badge26 silver badges42 bronze badges

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

1 Comment

peter flanagan Over a year ago

yeah, not a clue either. I actually thought my upvote wasn't working, and that there was a bug with SO :-D I will give you the green tick when I can anyway, cheers

Luïs · Accepted Answer · 2019-10-11 08:20:48Z

1

The type for Record is Record<K extends string | number | symbol, T>.

So the first type you provide to the Record must be either string, number or symbol. You can't assign null to it so your Team type does not satisfy the constraint. You should remove null from your Team type and it'll work like a charm.

answered Oct 11, 2019 at 8:20

Luïs

2,9334 gold badges23 silver badges35 bronze badges

1 Comment

georg Over a year ago

Indeed, team: null doesn't make any sense.

Collectives™ on Stack Overflow

Issue with typing object TypeScript - when using a predefined type with null

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related