Cacher is the code snippet organizer for pro developers

// ////////////////
// function components
// ////////////////
type Props = { age: number } & typeof defaultProps;
const defaultProps = {
  who: "Johny Five",
};

const Greet = (props: Props) => {
  /*...*/
};
Greet.defaultProps = defaultProps;

// TODO: optional？

import * as React from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    HashRouter,
} from "react-router-dom";

import loadable from '@loadable/component';

import './App.scss';

const DashboardApp = loadable(()  => import('./modules/dashboard/index'));
const AdminApp = loadable(() => import('./modules/admin/index'));
const ControllerApp = loadable(() => import('./modules/controller/index'));

export function App() {
    return (
        <HashRouter>
            <Switch>
                <Route exact path='/'>
                    <DashboardApp/>
                </Route>
                <Route exact path='/admin'>
                    <AdminApp/>
                </Route>
                <Route exact path='/controller'>
                    <ControllerApp/>
                </Route>
            </Switch>
        </HashRouter>
    );
}

type AppProps = {
  message: string;
  count: number;
  disabled: boolean;
  /** array of a type! */
  names: string[];
  /** string literals to specify exact string values, with a union type to join them together */
  status: "waiting" | "success";
  /** any object as long as you dont use its properties (not common) */
  obj: object;
  obj2: {}; // almost the same as `object`, exactly the same as `Object`
  /** an object with defined properties (preferred) */
  obj3: {
    id: string;
    title: string;
  };
  /** array of objects! (common) */
  objArr: {
    id: string;
    title: string;
  }[];
  /** any function as long as you don't invoke it (not recommended) */
  onSomething: Function;
  /** function that doesn't take or return anything (VERY COMMON) */
  onClick: () => void;
  /** function with named prop (VERY COMMON) */
  onChange: (id: number) => void;
  /** alternative function type syntax that takes an event (VERY COMMON) */
  onClick(event: React.MouseEvent<HTMLButtonElement>): void;
  /** an optional prop (VERY COMMON!) */
  optional?: OptionalType;
};