Default JSX properties

TypeScript 3 has also improved how we can set default properties on React components with --strictNullChecks. Before TypeScript 3, we had to set properties that had default values as optional and perform null checks when referencing them. We haven't introduced React yet in this book, so we'll only touch on this briefly at this point.

Let's look through an example to get a feel for the improvement:

1. The following is a React component with some default properties in TypeScript 2.9. The component is called SplitText and it takes in some text, splits it, and renders the bits that have been split in a list:

interface IProps {
  text: string;
  delimiter?: string;
}

class SplitText extends Component<IProps> {
  static defaultProps = {
    delimiter: ","
  };
  render() {
    const bits = this.props.text.split(this.props.delimiter!); 
   ...