React + TypeScriptの環境を作る

reactとtypescriptを使うプロジェクトを作りたくてcreate-react-appのREADME.md見てたら書いてたので試してみた

github.com

tl;dr

create-react-appを使ってtypescript用のプロジェクト作れる

create-react-app my-app --scripts-version=react-scripts-ts

プロジェクトの雛形を作る

create-react-appをインストールして、プロジェクトの雛形を作ります

npm i -g create-react-app

create-react-app my-app --scripts-version=react-scripts-ts
cd my-app
yarn start

tsで型チェックできることを確認する

とりあえず適当にコンポーネント用意して、typescriptのチェックが機能することを確認してみる

srcディレクトリにcomponentディレクトリを作って、その中にNogiコンポーネントを定義する

// src/components/Nogi.tsx
import * as React from 'react';

export interface NogiPropType {
  member: string;
}

export class Nogi extends React.Component<NogiPropType> {
  state: NogiPropType;
  constructor(props: NogiPropType) {
    super(props);
    this.state = props;
  }

  render() {
    return (
      <div>
        <h2>{this.state.member}</h2>
      </div>
    );
  }
}

App.tsxを変更してコンパイル失敗させる

App.tsxにNogi.tsxをimportしてpropを設定しないでコンパイルエラーにする

import './App.css';
import { Nogi } from './components/Nogi'; // 追加

// ~ 省略 ~

  </p>
  <Nogi/> // 追加
</div>

これでyarn startとかでコンパイルするとNogiのPropがNogiPropTypeを満たしてないのでコンパイルエラーになるはず

エラーになるのが確認できたので、Propを追加してコンパイル通す

// before
<Nogi/>

// after
<Nogi member="Mai Shiraishi"/>

これでコンパイル通って下の方に「Mai Shiraishi」が表示されるはず