TypeScriptのインストールからコンパイルまで入門

2019年6月29日

TypeScriptをインストールし、JavaScriptへのコンパイル(トランスパイル)、および静的型付けによる型チェックについて説明します。

 

 

インストール


 

TypeScriptコンパイルは、Node.jsのパッケージ管理であるnpmでインストールします。

 

これでtscコマンドが利用できるようになりました。バージョンを確認してみます。

 

プロジェクトのための適当なディレクトリを作成します。

 

まずトランスパイル(コンパイル)のための設定ファイルを作成します。

成功すると「tsconfig.json」というファイルが生成されます。このファイルにトランスパイル時の様々な設定を記述することができます。本記事では多くは説明しません。

 

次に拡張子が ts であるTypeScriptファイルを作成し、下記のように記述します。ファイル名は sample.ts にしました。TypeScriptの記述は基本的にはJavaScriptと変わりません。

 

トランスパイルします。

 

成功すると sample.js というJavaScriptファイルが生成されます。

Strictモードになっていることが確認できます。また変数宣言もvarに変わっています。これは上述したtsconfig.jsonファイルによるものです。

 

仮に、tsconfig.jsonファイルの「”strict”: true」を「”strict”: false」に、「”target”: “es5″」を「”target”: “ES2015″」に変更して再度トランスパイルすると、下記のように結果が変わります。

 

TypeScriptファイルの編集し保存した場合に、自動でコンパイルしてくれる監視モードを起動させることもできます。

 

 

静的型付けによるチェック


 

TypeScriptでは「静的型付け」です。型を厳密にすることにより、バグを極力少なくすることが可能となります。「: string」のような記述をアノテーションと呼びます。

 

仮に上記で記述したstring型のmessageに「7」を代入してみます。

 

この時点で、Visual Studio Codeでは下記のように注意されます。

 

 

実際にトランスパイルしようとすると、エラーとなります。

 

 

下記コードは、関数の引数にアノテーションを指定しています。

 

トランスパイルすると下記のように書き換えられました。

 

もちろん引数に文字列を渡すとエラーになります(3行目)。

 

 

 

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー