OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

TypeScriptの導入・コンパイルと設定ファイルtsconfig.jsonを触ってみる

最終更新日:2020.4.12 Update!!
近年フロントエンドの開発ではTypeScriptが用いいられることが多くなってきているようです。ちょうど案件で扱うことがあったので、勉強も兼ねて備忘録として残していきたいと思います。TypeScriptはaltJSと呼ばれるJavaScriptの拡張言語の一種で、JavaScriptをベースに様々な機能が扱えるようになっていて、拡張子は「.ts」になります。   TypeScriptで書かれたコードはブラウザで実行できないため、コンパイルしてJavaScriptに変換する必要があります。そこで今回はTypeScriptのコンパイル環境を作成するまでをまとめてみたいと思います。  
TypeScriptコンパイラのインストール
TypeScriptのコンパイルには専用のコンパイラを使用する形になります。npm経由でインストールできますので、下記コマンドでグローバルインストールしていきます。こうすることでプロジェクトのローカルフォルダに依存せずにどこでもコンパイルすることができます。
$ npm install -g typescript
........
+ typescript@3.8.3
  インストールが完了すると、tscコマンドが使えるようになります。バージョンを確認して問題なく使えることをチェックしておきます。
$ tsc -v
Version 3.8.3
  これでTypeScriptを使う準備ができました。早速エディタでTypeScriptファイルを作成しコンパイルを試してみたいと思います。サンプルで下記のような処理を書いてみました。 【example.ts】
export {}
let taxIn = (price: number, rate: number): number => {
 return price * rate;
};
console.log(taxIn(1000,1.1));
  TypeScriptの大きな特徴として静的型付けというのがあります。変数に対してデータ型をあらかじめ指定しておくことができます。ここでは関数の引数、そして関数の返り値に数値型のデータであることを指定しています。また、TypeScriptではモジュール化されていない場合にスコープがグローバルスコープとなるため変数名が重なってしまう問題があるため、exportでモジュール化させる必要があるようです。これで、下記のコマンドでTypeScriptをコンパイルしてみます。
$ tsc example.ts example.js
  エラーが出なければ、JavaScript形式のファイルが生成されます。実際に確認してみますと、コードないの記述方法も変わっているのが確認できます。 【example.js】
"use strict";
exports.__esModule = true;
var taxIn = function (price, rate) {
 return price * rate;
};
console.log(taxIn(1000, 1.1));
  きちんと処理が動くかも確認してみます。jsファイルはNode.js環境下でも動作するので、nodeコマンドでスクリプトを実行すると、作成した関数が動作しているのが確認できます。
$ node example.js
1100
   
TypeScriptコンパイラの設定ファイルを作成する
TypeScriptをコンパイルする際にはオプションを指定することができますが、コマンドを実行する度に入力するのは手間になります。そんな時にはTypeScriptの設定ファイルであるtsconfig.jsonを使うと便利です。設定ファイルは下記のコマンドで作成しますが、プロジェクトごとに設定が異なる可能性もあるので、ローカルにTypeScriptをインストールしてから、設定ファイルを作成しています。
$ npm install --save-dev typescript
$ npx tsc --init
  そうすると、プロジェクト内にtsconfig.jsonファイルが作成されます。実際に中身をみていくとJSON形式で様々なオブションを設定できるのが確認できます。 【tsconfig.json】
{
 "include": [
  "src/**/*"
 ],
 "exclude": [
  "node_modules"
 ],
 "compilerOptions": {
  "incremental": true, 
  "target": "ES5",
  "module": "commonjs", 
  "sourceMap": true, 
  "removeComments": true,
  "strict": true, 
  ..........
 }
}
  オプションについてはかなりの数があるので、詳しくは公式を参照していただくのが良いのですが、いくつか良く使われるオプションを下記にまとめてみました。
include コンパイルする対象のファイルやフォルダを一括で指定
exclude コンパイル対象外のファイルやフォルダを一括で指定
compilerOptions / target ソースファイルで変更があったものだけを差分でコンパイルする
compilerOptions / target コンパイルされたJavascriptの仕様を指定
compilerOptions / module コンパイル時に使用するモジュール形式を指定
compilerOptions / sourceMap ソースマッピングファイルを出力する
compilerOptions / removeComments コンパイル後にコメントが削除される
compilerOptions / noUnusedLocals ローカル変数で未使用のものがある場合にエラーを出力する
compilerOptions / noUnusedParameters パラメーターで未使用のものがある場合にエラーを出力する
compilerOptions / forceConsistentCasingInFileNames ファイル名で大文字と小文字の違いがあった場合にエラーを出力する
  設定ファイルにこれらのオプションを指定すると、そのオプションに合わせた形でコンパイルできるようになります。その際には「--build」オプションで、設定ファイルを指定する形で実行します。
$ tsc --build tsconfig.json
  また「--watch」オプションではファイルの変更を監視できるようになり、コンパイルが自動で出来るようになります。
$ tsc --watch
  これ以外にもコンパイラのコマンドでは様々なオプションが用意されています。コマンドオプションの一覧は「--help」で確認することができます。
$ tsc --help
 
  今回はTypeScriptの導入からコンパイル、設定ファイルの作成方法などについてまとめてみました。そのほかTypeScriptにはいろんな機能や特徴などがありますが、色々と勉強してまた別記事にまとめてみたいと思います。   (参考にさせて頂いたサイト) TypeScriptチュートリアル① -環境構築編- ブロック スコープの変数 'var' を再宣言することはできません。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram