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

TypeScript 2020.04.12

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

Tags: ,,

近年フロントエンドの開発では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’ を再宣言することはできません。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?