LoginSignup
2

More than 5 years have passed since last update.

TypeScript + React 環境構築

Posted at

yarnのインストールがまだの方はインストールしておきます。

$ npm install -g yarn

(インストールしたらexec $SHELL -lが必要です。)

Node.jsはこちらの記事を参考にインストールしてください
Node.jsのインストール〜①anyenv編〜
Node.jsのインストール〜②nodenv編〜

TypeScript の実行環境をグローバルインストール

$ yarn global add typescript
$ yarn global add ts-node

任意の場所にmy-appというディレクトリを作成します。
参考:https://github.com/wmonk/create-react-app-typescript

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

my-app は任意のプロジェクト名に変えてください。
次に、$ cd my-appをして下記を実行。

$ yarn start

これで自動的に localhost:3000が開きます。

コンパイル設定を変更する

baseUrl(src)からの絶対パスの指定が可能&ECMAScript6から最新のES2018へ変更。

tsconfig.json
-     "baseUrl": ".",
+     "baseUrl": "src",

-     "lib": ["es6", "dom"],
+     "lib": ["es2018", "dom"],

これでOK:blush:

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2