Destructuring assignment via TypeScript in React

Question

How should I do something like

class App extends React.Component {
    render() {
      const { x, y, z} = this.props;
      return (...)
    }
}

in TypeScript? For now tslinter shows an Error:

Type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>' has no property 'x' and no string index signature.

Answer 1

You have to define a type for props:

interface Props {
    x: string;
    y: number;
    z: string;
}

class App extends React.Component<Props, {}> {
    render() {
      const { x, y, z} = this.props;
      return (...)
    }
}