Typing element attributes

onClick: () => void;

onChange: (id: number) => void;

// taking an event on input
onChange: (event: React.
ChangeEvent<HTMLInputElement>) => void;

// taking an event on button
onClick(event: React.MouseEvent<HTMLButtonElement>): void;

Typing props Parameters

// pre-lint, one-line
export function DefaultBlock(
  {content, editable}: { content: any; editable: boolean;}
);

// linted, multi-line
export function DefaultBlock({
  content,
  editable,
}: {
  content: any;
  editable: boolean;
});

Typing React Elements

import { ReactElement } from "react";

Typing fetch attributes

Typing issue with cors attribute

mode: 'cors' as RequestMode

Typing Hooks

// useState
const [data, setData] = useState<Record<string, unknown> | null>(null);

// setState
setState: React.Dispatch<React.SetStateAction<number>>;

// useCallback
const renderBlockList: () => Array<ReactElement> = useCallback(
  () => [
      <div>
        {...}
      </div>
    ], [some_dependency]
);

// useMemo
const randomValuesArray = useMemo<Uint16Array>(() => new Uint16Array(22), []);