add-missing-types.js

/**
* error: "Binding element 'name' implicitly has an 'any' type.ts(7031)"
**/


// BEFORE

export function Heading ({name}){
  return <h1>Your {name}</h1>
}

// variant #1

export function Heading ({name}: {name: string}){
  return <h1>Your {name}</h1>
}


// variant #2 "extracting to types" 

type HeadingProps = {name: string};

export function Heading ({name}: HeadingProps){
  return <h1>Your {name}</h1>
}

// variant #3 "with default value" 

type HeadingProps = {name: string};

export function Heading ({name = 'Zhenja'}: HeadingProps){
  return <h1>Your {name}</h1>
}

// variant #4 "with ES6 make the name optional with `?` question mark" 

type HeadingProps = {name?: string};

export function Heading ({name = 'Zhenja'}: HeadingProps){
  return <h1>Your {name}</h1>
}

/**
* we are using `type` defeniction for props and for state in react components
* and `interfeces` for public API
**/

interface HeadingProps {
  name: string;
}