TypeScript で React の開発をしているときにハマった箇所のメモ。

React のイベントの Props 定義

クリックイベントはReact.MouseEvent、選択リスト/テキストのインプットはReact.ChangeEventが型になる。

export interface IMyComponentProps {
  prop1: string;
  prop2: (event: React.MouseEvent) => void; // ← 🈁
}

export class MyComponent extends React.Component<IMyComponentProps> {
  render(): JSX.Element {
    const { prop1, prop2 } = this.props;

    return (
      //My code here
      <button onClick={prop2}>{prop1}</button>
    );
  }
}

creatRef の書き方

class MyComponent extends React.Component<{}, {} > {
  input: React.RefObject<HTMLInputElement>;

  constructor(props: InputTextProps) {
    super(props);
    this.input = React.createRef();
  }
  ...
}

JavaScript の Google Map API の型定義

$ npm install  @types/googlemaps -D

import {} from 'googlemaps';

const map: google.maps.Map = new google.maps.Map(...);

"message": "ファイル '.../node_modules/@types/googlemaps/index.d.ts' はモジュールではありません。",

というエラーがでるので

types/index.d.ts に以下を追加

declare module 'googlemaps';

Promise を返す関数

おまけですが。

Returning a promise in an async function in TypeScript - Stack Overflow

const whatever2 = async (): Promise<number> => {
  return new Promise<number>((resolve) => {
    resolve(4);
  });
};