React を手軽に始めるための create-react-app ですが、普通にプロジェクトを作成すると ピュア JS での開発で始めることになってしまいます。
せっかくなら、Typescript で開発をしたいですよね。
create-react-app は v2.1.0 から Typescript を公式サポートしているそうなので、今回はそのやり方を調べてみました。
実行環境
$ node -v
v12.12.0
$ npm -v
6.9.0
$ npx create-react-app --version
3.4.1
新規プロジェクトを作成
create-react-app を Typescript で始めるためには、typescript オプションを指定します。
$ npx create-react-app <プロジェクト名> --typescript
インストールが完了したらファイル構成を確認します。
$ cd <プロジェクト名>
$ ls -al
フォルダ構成を確認すると、通常の create-react-app とは違い、tsconfig.json が追加されていることがわかります。
├ .git/
│└ ...
├ .gitignore
├ README.md
├ node_modules/
│└ ...
├ package-lock.json
├ package.json
├ public/
│└ ...
├ src/
│└ ...
└ tsconfig.json
プロジェクト作成は、これで終わりです。
ファイル読み込みを絶対パス にする
デフォルトでのファイル読み込みは、相対パス指定になっているので、絶対パスで指定できるように変更します。
ファイルを絶対パスで読み込めるようにするには、tsconfig.json に以下を追記します。
{
"compilerOptions": {
...,
"baseUrl": "src" // 追加
},
...
}
src/components/Button を読み込みたい場合は、以下のようになります。
import Button from 'components/Button';
今日はここまで。