Practical Example

import React from 'react';
import * as styles from './section.module.css';


type Props = {
  header: React.ReactNode;
  footer: React.ReactNode;
}

class Section extends React.Component<Props, {}> {
  protected readonly items: string[] = [];

  render() {
    const { props } = this;

    return (
      <div className={ styles.section }>
        { props.header && <header className={ styles.sectionBody }>{ props.header }</header> }

        <div className={ styles.sectionBody }>
          { props.children }
        </div>

        { props.footer && <footer className={ styles.sectionBody }>{ props.header }</footer> }
      </div>
    );
  }
}
  

Typing

declare var process: any;

type Token = [ string, number, ...RegExp[] ];

interface CustomDivElement extends HTMLDivElement {
  selectionStart: number,
  selectionEnd: number,
  setSelection( number, number ): void;
}

namespace Lexer {
  export interface Grammar {
    main: Tokenizers[];
    [ key: string ]: Tokenizers[];
  }
}

function Component(): React.FC {
  return <span>a</span>
}

function isArray<T>( subject: T[] ): subject is T[] {
  return Array.isArray( subject );
}