Initialize your React app with TypeScript

• create-react-app-typscript 

• create-react-app --scripts-version=react-scripts-ts 

• CRAT is a fork of CRA that adds the TypeScript compiler to Webpack and configures TSLint instead of ESLint

• Using TypeScript you no longer need to use the prop-types

package.json

Title Text

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.

Specify the type of Props & State of components

Stateless Functional Component:

const App = ({ message }: { message: string }) => <div>{message}</div>;

const App: React.SFC<{ message: string }> = ({ message }) => <div>{message}</div>;

SFC type that is the alias of StatelessComponent interface.

Stateful Class-based Components

class App extends React.Component<{
  message: string, // it takes one prop called 'message' which is a string type
}> {
  render() {
    return (
      <div>{this.props.message}</div>
    );
  }
}

Within TypeScript, React.Component is a generic type (aka React.Component<PropType, StateType>), so you actually want to provide it with prop and (optionally) state types:

class App extends React.Component<{
  message: string, // this is the prop type
}, {
    count: number, // this is the state type
  }> {
  state = {
    count: 0
  }
  render() {
    return (
      <div>{this.props.message} {this.state.count}</div>
    );
  }
}

Useful React Type Examples

export declare interface AppProps {
  children1: JSX.Element; // bad
  children2: JSX.Element | JSX.Element[]; // meh
  children3: React.ReactChild | React.ReactChildren; // better
  children: React.ReactNode; // best
  style?: React.CSSProperties; // for style
  onChange?: (e: React.FormEvent<HTMLInputElement>) => void; // form events!
  props: Props & React.HTMLProps<HTMLButtonElement> // to impersonate all the props of a HTML element
}

Forms and Events

onChange = (e: React.FormEvent<HTMLInputElement>): void => {
  this.setState({text: e.currentTarget.value})
}