TypeScript: How to specify types for function arguments when destructing arguments?

Question

TS blows up with an error:

Error:(8, 20) TS7031: Binding element 'on' implicitly has an 'any' type.

Error:(8, 24) TS7031: Binding element 'children' implicitly has an 'any' type.

I have following function. I pass it two arguments.

// 
function On({on, children}) {
  return (
    <div>{on} {children}</div>
  )
}

How do I specify types for arguments in such a case? This syntax does not work:

function On({(on as boolean), (children as HTMLElement[])}) {
function On({(on: boolean), (children: HTMLElement[])}) {
function On({on: boolean, children: HTMLElement[]}) {
  return (
    <div>{on} {children}</div>
  )
}

The answers are correct; you need to do { on, children }: {on: boolean, children: HTMLElement[] }. There is a suggestion to allow type annotations inside binding patterns so if you want to see this you might want to go there and give it a 👍. — jcalz
– jcalz, Commented Jul 15, 2019 at 14:15
As a side note, you don't pass it 2 arguments, you pass it 1 argument, that is an object with 2 properties — vals
– vals, Commented Jul 15, 2019 at 14:53

huMpty duMpty · Accepted Answer · 2019-07-15 09:59:36Z

3

Like this:

function On({on, children} : {on: boolean, children: HTMLElement[] }) {
    // your code
}

If you have a type/interface for the entire object you could also use that to make your code more readable:

interface OnOptions {
    on: boolean;
    children: HTMLElement[];
    someOtherProp: string;
}

function On({on, children} : OnOptions) {
    // your code
}

edited Jul 15, 2019 at 9:59

huMpty duMpty

14.5k14 gold badges64 silver badges102 bronze badges

answered Jul 15, 2019 at 9:54

Phillip

6,3033 gold badges26 silver badges36 bronze badges

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

Comments

huMpty duMpty · Accepted Answer · 2019-07-15 10:02:29Z

1

See the section about Function declarations

type myType = { on: boolean, children: HTMLElement[]}
function On({on, children} : myType ) {
    // your code
}

answered Jul 15, 2019 at 10:02

huMpty duMpty

14.5k14 gold badges64 silver badges102 bronze badges

Collectives™ on Stack Overflow

TypeScript: How to specify types for function arguments when destructing arguments?

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