CODEWITHSUNDEEP
reactjstypescript
Evanss
Evanss

Reputation: 23563

TypeScript union error when string is put in an object?

I have a component with these props:

type Props = {
  items: {
    text: string;
    status?: "processing" | "error" | "info-required";
  }[];
};

const Component: React.FC<Props> = ({ items }) =>

When I use the component and set the props inline it works fine:

<Component
    items={[
      { text: "a" },
      { text: "b" },
      { text: "c", status: "processing" }
    ]}
  />

However when I put the props in an object it errors:

const items = [
  { text: "a" },
  { text: "b" },
  { text: "c", status: "processing" }
]

<Component items={items} />

Types of property 'status' are incompatible. Type 'string' is not assignable to type '"error" | "processing" | "info-required"'.

The expected type comes from property 'items' which is declared here on type 'IntrinsicAttributes & Props & { children?: ReactNode; }'

Upvotes: 1

Views: 205

Answers (1)

Orelsanpls
Orelsanpls

Reputation: 23515

The thing is, because you haven't defined the type of const items, typescript is not sure that status will always contain something compatible with the type "processing" | "error" | "info-required".

For example, you could do, items[2].status = 'invalid text';

You should ensure the type of items like : const items: Props['items']

enter image description here

enter image description here

Upvotes: 1

Related Questions