このセクションで学ぶこと
動画のテキスト【このセクションで学ぶこと】
このセクションではTypeScriptだけにフォーカスして、TypeScriptのセットアップと使い方を紹介します。短い章なので、次セクションの2つ目のアプリ制作に進む前に軽く読み進めてください。
• TypeScriptの開発環境セットアップ • TypeScriptのコンパイル方法 • TypeScriptとJavaScriptのコード比較 • tsconfig.jsonの設定 • interfaceとtypeの違い • 配列の型定義 • インターセクション型 • lookup型
TypeScriptの開発セットアップ
本セクションを進める準備をします。フォルダ「typescript-test」を作ってください。名前は好きなもので構いません。
VS Codeを開き、上部メニューバー「File」→「Open...」から選択するか、もしくは直接ドラッグ & ドロップで「typescript-test」フォルダを開きます。この時点では中身は何もありません。
ブラウザで表示を確認したいので、ファイルindex.htmlを作り、次のコードを書いてください。
// index.html <!doctype html> <html> <head> <title>TypeScriptテスト</title> </head> <body> <h1>こんにちは</h1> <script src="./main.js"></script> </body> </html>
ごく普通のHTMLファイルで、<script>タグでmain.jsというJavaScriptファイルを読み込んでいます。このHTMLファイルをブラウザにドラッグ＆ドロップすると「こんにちは」と表示されます。
次はTypeScriptのセットアップをしましょう。TypeScriptはnpmからインストールするので、VS Code上部メニューバー「Terminal」から「New Terminal」を選んでターミナルを表示させ、そこに次のコマンドを打ってください。
npm install --save-dev typescript
なお、ここでは次のように打っても問題はありません。
npm install typescript
--save-devの有無の違いは、このコマンドがあるとそのパッケージはpackage.jsonのdevDependenciesに書き込まれます。devとは「Development／開発」なので、devDependenciesとは「開発環境でだけ必要なパッケージ」という意味です。TypeScriptとはあくまでも開発時に使われるものであり、最終的にはすべてJavaScriptに変換されるので、通常はdevDependenciesに書き込みます。実際のところ、--save-devの有無は今回はたいした違いになりませんが、本コースでは--save-devをつけて実行します。
なお他の解説書などでは、次のように-gをつけるコマンドもよく見られます。
npm install typescript -g
-gなしでは、そのフォルダ内にのみパッケージがインストールされるのに対し、「global」を意味する-gをつけると、そのコンピューター全体にインストールされます。その結果、新しいプロジェクトを始めるときに毎回TypeScriptをインストールする手間が省けたり、TypeScriptのバージョンを一定に保っておけるメリットがありますが、本コースでは各人のコンピューター全体に対する変化を加えないように、該当フォルダ内にのみインストールしています。
インストールが完了するとnode_modules、package-lock.json、package.jsonが作成されます。これでTypeScript開発を始める準備が完了です。
ファイルmain.tsを作ってください。
このファイルで書くのは、ReactのJSXにTypeScriptを足したTSX（.tsx）ではなく、単なるTypeScriptなので.tsとなっています。ここに次のコードを書きましょう。
// main.ts console.log("こんにちは")
これがJavaScriptのファイルであれば、保存してブラウザの「Console」を確認すると「こんにちは」と表示されます。しかしブラウザはTypeScriptコードを解釈できないので、JavaScriptへと変換してあげる必要があります。変換処理を担うコンパイラはTypeScriptと一緒にインストールされていますが、それを使う前に変換に関する設定が必要です。設定ファイルtsconfig.jsonを作りましょう。
ここで最低限必要なのは次のコードです。
// tsconfig.json { "compilerOptions": { "target": "ES2015", } }
targetでは、変換したいJavaScriptのバージョンを指定します。ES2015やES3といった古いものを指定すると、旧式のブラウザでも実行可能なJavaScriptコードに変換されます。変更を保存したら、ターミナルにTypeScriptを実行する次のコードを打って「Enter」を押してください。
npx tsc
TypeScriptをJavaScriptに変換したmain.jsファイルが作成されます。
中身を見ると通常のJavaScriptコードです。ブラウザをリロードして「Console」を見ると、次のように表示されます。
今度はmain.tsに次のコードを書いてください。
// main.ts const apple: string = "りんご" console.log(apple)
stringという型情報をつけてあります。これをJavaScriptに変換してみましょう。次のコマンドで実行します。
npx tsc
main.jsを見ると、次のようになっています。
// main.js const apple = "りんご"; console.log(apple);
stringという型情報はなくなり、JavaScriptコードに変換されているのがわかります。
さて、先ほどtsconfig.jsonを作るときには、マニュアル操作でファイルを作成して必要最低限の設定を書きましたが、下記コマンドを実行すると、自動でtsconfig.jsonが作成されます。今あるtsconfig.jsonファイルを削除したあとで次のコマンドを実行してください。
npx tsc --init
作成されたtsconfig.jsonを開くと多くの設定がすでに書き込まれていますが、ほとんどはコメントアウトしてあるので、必要なものだけを選ぶことができます。この中で重要なのは"strict": trueという項目で、ここは通常trueにしておきます。
セットアップができたので、TypeScriptのコードを簡単に見ていきましょう。実際に書きながら進めると、より理解が深まります。