TypeScriptの環境構築(React+TS)

はじめに

ずっと気になっていたTypeScriptを使ってみました。

5/25追記：

この記事読み返すとTSの使い方&メリットが全く掴めていなかったことがわかる。難しく捉えすぎな気がする。JSの理解が甘いからこうなるんですね。。。追々、TypeScriptについて別途まとめます。

5/29追記：

Reactを学習したのでReact+TSで試してみました。相性抜群でした◎

✅ゴール

・TypeScriptの理解を深める

✅参考教材

📚プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

☞ソースコード

📚りあクト！ TypeScriptで始めるつらくないReact開発 第2版　※続編、firebase編も気になる。

💻さらっとTypeScript入門

💻TypeScriptの型入門

本読まなくても大概ここで必要な知識は学ぶことができる気がする。

TypeScriptとは

✅特徴

・静的型付き言語⇔JavaScriptは非常に動的
・JavaScriptコードへとコンパイルする。

基本的にJavaScriptに型リテラルを拡張しただけの言語で後の仕様は共通。

型がなにかわからない場合、型はanyになる。

✅メリット

・秩序をもたらし、より安全に大規模化を実現可能とする。(ex)テキストエディターで入力時にエラーを与えてくれる。)
・TypeScriptはコンパイル時に型をチェックする。※JavaScriptはプログラムを実行するまで型を知ることはない。また暗黙の変換は、エラーの原因になりやすい。

✅用語

・アノテイト：「注釈を付ける」が転じて、型を明示的に指定する。
・リテラル型：ただ1つの値を示し、それ以外の値は受け入れない型。

TypeScriptを使ってみる

5/25追記：気軽に試したかったらJSFiddle使うかVSCodeでOK

🙄これだけでTypeScriptの恩恵を受けている(右のTSファイルで定数bが型宣言エラー)のがわかります。左はJSファイルでTS使うことを進めて波線が出ています。

TypeScriptを使ってJavaScriptにコンパイルする

①package.json生成

npm init

②TypeScriptのインストール

node_modulesディレクトリ作成が作成される。

npm install --save-dev typescript tslint @types/node

③tsconfig.jsonの作成

touch tsconfig.json
type nul > tsconfig.json // windows,vscodeの場合

※TypeScript使うには必須のファイル。ルートディレクトリに配置する。

④tsconfig.jsonの編集

{
  "compilerOptions": {
    "lib": ["es2015"],
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "target": "es2015"
  },
  "include": [
    "src"
  ]
}

./node_modules/.bin/tslint --init // ドキュメントルートにtslint.jsonが作成される

編集※著者の設定を参考

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "rules": {
        "semicolon": false,
        "trailing-comma":false
    }
}

⑥src/index.tsの作成

mkdir src
type nul > src/index.ts

編集

const ts:string = "Hello TypeScript!!"
console.log(ts);

./node_modules/.bin/tsc
tsc // 省略もできる。

※distディレクトリとindex.jsが作成される。

自動コンパイル

以下コマンドで可能。

tsc -b --watch

⑧コードの実行

node dist/index.js
>>Hello TypeScript!

別のチュートリアルでTypeScriptを使ってみる

参考：TypeScript チュートリアル

※webpackを用いたコンパイラもしています。個人的には1つ前のやり方で充分な気がします。ブラウザ対応などに必要なのかも？？

①コンパイラオプションファイルの作成

./node_modules/.bin/tsc --init

②tsconfig.jsonの編集

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist", // コンパイル処理したファイルの出力先
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "./ts/**/*.ts" // コンパイルする対象
  ]
}

③webpackのインストール

npm install --save-dev webpack webpack-cli ts-loader

④webpack.config.jsを作成

※教材通り

ここでコンパイルするエントリーポイントと出力先を指定する。※tsc,tsconfig.jsonと同じ。

⑤index.html、ts/index.tsを作成

※教材通り

⑥コンパイル(2パターン)

npm run tsc //tsc(コンパイラ)でコンパイル。複数ファイル指定しやすい。
npm run build //webpackでコンパイル。1つのファイルに合体する。

./dist/index.jsが出力。

※ここまでで一応TSの読込をindex.htmlで確認することができる。

👇TSCでコンパイルしたファイル。

“use strict”;はJS自身の落とし穴を検出して、エラーとして通知してくれる仕組み。

TSCのコンパイルは.jsにした際に見やすい体裁でコードを出力してくれるのでわかりやすい。

試しに型を誤った状態でコンパイルしてみると、以下のように表示されて.jsファイルは出力されませんでした。

💻さらっとTypeScript入門

上記の内容を一通り試すのに作ったソースコードは以下。

React+TypeScriptを試す

💻React入門（TypeScript版）

5/29追記：上記の記事ベースで試し直しました。

プロジェクト作成

npx create-react-app hello-world --typescript

※TypeScriptの場合はオプションに–typescriptを指定する。

実行

yarn start

自動でブラウザが開く

TSXで変数の表示&オブジェクト配列をリスト表示参考

1つのファイル内で2つのコンポーネントを分ける(propsの利用)

※React.FCという型は関数コンポーネント(FunctionComponent)の略。

※childrenで値をタグで囲んで渡すことなども可能。記事参照。ファイル分割は割とシンプル。

※ステートを使うは一旦割愛。

上記までの知識を基に同サイトの以下記事で学習していきます。

💻React.js + TypeScript でTodoアプリを作ってみる

※コードの読み解きは浅いがとりあえず作れた。

試しにビルドしてみる。

ビルドするページが表示されない場合、アドレスをpackage.jsonに追記する。

今回の僕の場合はこんな感じ。

{
  "name": "riakuto",
  "version": "0.1.0",
  "private": true,
  "homepage": "file:///C:/xampp/htdocs/react-ts-todo/build/", // 基本は"./"でいける。
~~~~

ビルド。

yarn build

htmlファイルをブラウザで開く。表示された◎

🙄わかりやすくていいですね～React。

📚React Hooks TypeScript 実践入門 – Firebase を使って素材配布サイトを作ろう！

※上記もKindle unlimitedだと無料で読めるので試してみました。

※一旦ステイ。FirebaseはCloud FirestoreだしStorageも使っているので追々参考になりそう。

おわりに

とりあえずTSの使い方をさらってみた。

これからしっかり型の理解やTSの書き方について学んでいきたい。

5/29追記：

TSをReactで使うのは比較的シンプルでいいなと痛感しました。

プロジェクト作成時にTSをオプションで付けておけば、トランスパイルも勝手にやってくれるからあとはビルドするだけだし素晴らしい！

Vue.jsより好きかもしれない。。。

✅その他参考

TypeScriptチュートリアル① -環境構築編-