Typescript: prevent extra keys for a React prop object?

Question

When calling functions with object arguments, extra keys are forbidden:

function foo({ key }) {}

foo({ key: 1, key2: 2 });

Argument of type '{ key: number; key2: number; }' is not assignable to parameter of type '{ key: any; }'.
  Object literal may only specify known properties, and 'key2' does not exist in type '{ key: any; }'

However, with React functional components, this error doesn't trigger:

function Foo({
  obj: { key },
}) {}

<Foo obj={{ key: 1, key2: 2 }} />

Is there a way to make this an error?

Actually it does. typescriptlang.org/play?#code/… Which TS version do you use? — Aleksey L.
– Aleksey L., Commented Apr 1, 2021 at 8:11

consager · Accepted Answer · 2021-04-01 08:17:44Z

1

When trying to use Foo as a component like in your example I get the error 'Foo' cannot be used as a JSX component. Its return type 'void' is not a valid JSX element.ts(2786).

After modifying Foo to return JSX like this

function Foo({ obj: { key } }) {
  return <div>{key}</div>;
}

The function throws the error you wanted.

edited Apr 1, 2021 at 8:17

answered Apr 1, 2021 at 8:16

consager

2871 silver badge7 bronze badges

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

Comments

jered · Accepted Answer · 2021-04-01 08:15:26Z

0

TypeScript should be generating an error when you try to do that. The type inferences are pretty good. Maybe you have a problem with your eslint config? If you run the TypeScript compiler (not just eslint) does it generate any errors?

Well either way, a better way to type your function/React component props is to be more explicit, like this:

function Foo({
  obj: { key },
}: {
  obj: {
    key: number;
  }
}) {
  // etc.
}

or, a bit easier to digest for some people's tastes:

type FooProps = {
  obj: {
    key: number;
  }
}

function Foo({obj: {key}}: FooProps) {
  // etc
}

The basic pattern is function MyComponent(props: MyPropsType) {}

answered Apr 1, 2021 at 8:15

jered

11.6k2 gold badges26 silver badges34 bronze badges

Collectives™ on Stack Overflow

Typescript: prevent extra keys for a React prop object?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related