TypeScriptを始める – tscコマンド、Grunt導入、型定義ファイルの使用、tslintで構文チェックなど

TypeScriptが盛り上がってきています。昨年2014年4月2日に正式版となる「TypeScript 1.0」がリリースされてから、現在は「TypeScript 1.4」と順調にバージョンアップもなされてきています。それから、ドットインストールでも、プレミアム版となりますが、ついに「TypeScript入門」が2/23に公開されました。ECMAScript 6の正式リリースも6月と差し迫ってきていることなので、そろそろ自分の開発環境でも使ってもよいかなと思い、今回自分のMacにもTypeScriptを導入することにしました。

TypeScriptとは

TypeScriptはCoffeeScrtiptなどと同様に「altJS」と呼ばれるJavaScriptの代替となるプログラミング言語です。JavaScriptの弱い部分を補うように設計されていて、JavaScriptにコンパイルして使用します。Microsoftによって開発が進められています。

特徴としては、”Type”Scriptという名前からもわかるように「型（Type）」にこだわった言語となっていて、現行のJavaScriptにはない「型チェック」や「静的型付け」などに対応しています。それから名前空間をシンプルに記述するためのモジュールやクラスにも対応していたり、次世代JavaScriptのECMAScript6（ES6）を先取りするなど、現状のJavaScriptをさらに強化したものとなっています。

TypeScript – Wikipedia

TypeScriptのインストール＆基本操作

TypeScriptのインストールは、TypeScriptの公式サイトからダウンロードしてインストロールすることもできますが、今回はNode.jsのパッケージ管理ソフトである「npm」を使ってインストールする方法を説明します。

npmのインストールについては当ブログの以下の記事などを参考にしてください。

Mac OS X Mountain LionにNode.jsとnpmをHomebrewを使ってインストールする | maesblog

TypeScriptをインストールする

TypeScriptを使うディレクトリに移動して、以下のコマンドでインストールします。（「––save-dev」オプションをつけると、package.jsonにプラグインの依存関係を書き込みます。）

$ npm install typescript --save-dev

「-g」オプションをつけてコマンドを実行すると、システムにインストールされます。

$ npm install -g typescript

tscコマンドを使う

TypeScriptでコードを書き、「.ts」という拡張子をつけてファイルを保存したら、以下のコマンドで、tsファイルをjsファイルにコンパイルします。同じディレクトリ内に同名の.jsファイルが作られます。

$ tsc hogehoge.ts

tscコマンドのオプションなどは、そのままtscコマンドを実行するか、「-h」オプションをつけて実行すると表示されます。よく使いそうなコマンドを以下に紹介します。

-d または ––declaration: tsファイルから、型定義ファイル（.d.ts）を生成
––out: 複数のtsファイルを連結して単一のjsファイルに出力
––outDir: 出力先のディレクトリを指定
-w または ––watch: ファイルの状態を監視して自動的にコンパイル

使い方の詳細や他のコマンドなどについては以下のサイトをご参照ください。

TypeScript プログラミング – 付録 – コンパイラオプション

Gruntでtsファイルを自動コンパイル

タスクランナーの「Grunt」を使って開発することも多いと思うので、Gruntを使った自動コンパイルの方法も紹介します。使用するGruntプラグインは以下となります。

tsファイルのコンパイル ⇒ grunt-typescript
ファイル状態の監視 ⇒ grunt-contrib-watch

Gruntの環境構築については当ブログの以下の記事を参考にしてください。

GruntをMac OS X Yosemiteに導入する方法 – インストールからタスクを実行するまで | maesblog

Gruntの設定

TypeScriptを使うディレクトリに移動して、以下のコマンドで「grunt-typescript」をインストールします。

$ npm install grunt-typescript --save-dev

さらに以下のコマンドで「grunt-contrib-watch」をインストールします。

$ npm install grunt-contrib-watch --save-dev

tsフォルダを作成し、その中に「function.ts」ファイルを作ります。

$ mkdir ts
$ cd mkdir
$ touch function.ts

「Gruntfile.js」ファイルは以下のように記述します。

module.exports = function (grunt) {

  grunt.initConfig({

    // typescriptタスクの定義
    typescript: {
      // tsターゲットの定義
      ts: {
        // ファイルの設定
        files: {
          // コンパイル後のjsファイル: コンパイル前のtsファイル
          'ts/function.js': 'ts/function.ts'
        }
      }
    },

    // watchタスクの定義
    watch: {
      // tsターゲットの定義
      ts: {
        files: ['ts/*.ts'], // 監視するファイル
        tasks: ['typescript'] // 実行するタスク
      }
    }

  });

  // 使用するGruntプラグインを読み込む
  grunt.loadNpmTasks('grunt-typescript');
  grunt.loadNpmTasks('grunt-contrib-watch');

};

以下のコマンドで監視のタスクを実行します。tsファイルに変更があれば自動的にjsファイルへコンパイルを行ってくれるようになります。

$ grunt watch

gulpでも

Gruntではなくても、gulpでも同様のことが行えます。gulp派の方は以下を参考にしてください。

TypeScriptでjQueryを使う

TypeScriptでJavaScriptライブラリなど「外部ファイル」を使う場合、注意が必要です。外部ファイルで使われている変数や関数には型情報が与えられていないので、コンパイル時にエラーとなってしまいます。

jQueryを普通に書くと

例えば以下のようなjQueryの構文を使ったコードを書いたとします。

$(document).ready(() => {
  alert("jQuery!!");
});

ts/function.ts

するとコンパイル時に「’$’という変数はないよ」というエラーが出てしまいます。

>> File "ts/function.ts" changed.
Running "typescript:ts" (typescript) task
>> ts/function.ts(1,1): error TS2304: Cannot find name '$'.
Warning: Task "typescript:ts" failed. Use --force to continue.

Aborted due to warnings.

Grunt

型定義ファイル

「型定義ファイル」を使うと外部ファイルの変数や関数に型情報を与えることができるようになり、TypeScriptのコード内でも外部ファイルを扱えるようになります。

jQueryの型定義ファイルは以下より入手可能です。

DefinitelyTyped/jquery at master · borisyankov/DefinitelyTyped

型定義ファイルを入手したら、プロジェクト内の任意のフォルダ内にファイルを置き、tsファイルの1行目に以下のように記述し、型定義ファイルを読み込むようにします。

/// <reference path="../lib/jquery.d.ts" />

$(document).ready(() => {
  alert("jQuery!!");
});

ts/function.ts

コンパイルすると、以下のようにjQueryの構文を伴ったJavaScriptに問題なく変換されます。

/// <reference path="../lib/jquery.d.ts" />
$(document).ready(function () {
    alert("jQuery!!");
});

ts/function.js

jQueryだけでなく、他の様々なJSライブラリなどの外部ファイルの型定義ファイルは以下に集約されています。

borisyankov/DefinitelyTyped – GitHub

型定義ファイルの管理に「tsd」を使う

上記のように型定義ファイルを手動でひとつひとつ対応するのは面倒なので、「tsd」という型定義ファイルの管理ツールを使うのがオススメです。

tsdはnpmのコマンドでインストールできます。「-g」オプションをつけると、システムにインストールされます。

$ npm install tsd -g

tsdでは、「tsd.json」という「プロジェクトで型定義ファイルを管理するためのファイル」が必要となります。（プロジェクト内で型定義ファイルを共有するためにも必要なファイルです。）プロジェクトのディレクトリ内で以下のコマンドを実行し、tsd.jsonファイルを作成します。

$ tsd init

tsdを使ってjQueryの型定義ファイルをインストールするには、以下のコマンドを実行します。

$ tsd query jquery --action install --resolve --save

>> tsd 0.5.7

 - jquery/jquery.d.ts :  : 2015-03-02 16:21

>> running install..

>> written 1 file:

    - jquery/jquery.d.ts

「typings」ディレクトリが作成され、その中に「jQuery」ディレクトリが作成され、その中に「jquery.d.ts」ファイルが作成されます。また、「typings」ディレクトリの中には同時に「tsd.d.ts」ファイル（インストールした型定義ファイルをまとめたファイル）も作成されます。

tsファイルには、1行目に以下の一文を追加してtsd.d.tsファイルを読み込みようにしておきます。そうすることによって、tsdでインストールした型定義ファイルの全てが常に適用されるようになります。

/// <reference path="../typings/tsd.d.ts" />

tsdコマンドについての詳細は以下を参照してください。オプションのつけ方なども詳しく説明されています。

tsd – npm

以下はtsdの使い方の参考にさせていただいたブログ記事となります。

構文チェックはtslintで

構文チェックも行ってみましょう。TypeScriptの構文チェックには「tslint」というものを使います。

tslintコマンドを使う

tslintはnpmのコマンドでインストールできます。「-g」オプションをつけると、システムにインストールされます。

$ npm install tslint -g

さっそくtsファイルの構文チェックを行おうと以下のコマンドを実行してみるとホームディレクトリに「tslint.json」ファイルがないよと怒られます。

$ tslint -f ts/function.ts

fs.js:438
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^
Error: ENOENT, no such file or directory '/Users/maeda/tslint.json'

ホームディレクトリに「tslint.json」ファイルを作ります。

$ cd ~
$ touch tslint.json

tslint.jsonファイルの中身には以下をコピーして貼り付けてください。

tslint/tslint.json at master · palantir/tslint – GitHub

再度プロジェクトのディレクトリ内で、構文チェックを行います。

$ tslint -f ts/function.ts

構文チェックの結果、問題があれば以下のようなエラーが出ます。問題がなければ、特に何も起こりません。

$ tslint -f ts/function.ts

ts/function.ts[6, 4]: file should end with a newline
ts/function.ts[4, 1]: space indentation expected
ts/function.ts[5, 1]: space indentation expected

Gruntで自動化

tslintでの構文チェックをGruntで自動化しておくと便利です。「grunt-tslint」というGruntのプラグインがあります。

TypeScriptを使うディレクトリに移動して、以下のコマンドで「grunt-tslint」をインストールします。

$ npm install grunt-tslint --save-dev

「Gruntfile.js」ファイルは以下のように記述します。上記の自動コンパイルのところで使ったGruntfile.jsに追記していきます。今回は新たにプロジェクトディレクトリ内にtslint.jsonファイルを作りました。

module.exports = function (grunt) {

  grunt.initConfig({

    // typescriptタスクの定義
    typescript: {
      // tsターゲットの定義
      ts: {
        // ファイルの設定
        files: {
          // コンパイル後のjsファイル: コンパイル前のtsファイル
          'ts/function.js': 'ts/function.ts'
        }
      }
    },

    // tslintタスクを定義
    tslint: {
      // tsターゲットを定義
      ts: {
        // tslint.jsonファイルの読み込み
        options: {
          configuration: grunt.file.readJSON('tslint.json')
        },
        // 構文チェックするファイルの設定
        files: {
          src: ['ts/function.ts']
        }
      }
    },

    // watchタスクの定義
    watch: {
      // tsターゲットの定義
      ts: {
        files: ['ts/*.ts'], // 監視するファイル
        tasks: ['typescript', 'tslint'] // 実行するタスク
      }
    }

  });

  // 使用するGruntプラグインを読み込む
  grunt.loadNpmTasks('grunt-typescript');
  grunt.loadNpmTasks('grunt-tslint');
  grunt.loadNpmTasks('grunt-contrib-watch');

};

以下のコマンドで監視のタスクを実行します。tsファイルに変更があれば自動的にtsファイルの構文チェックを行い、jsファイルへコンパイルを行ってくれるようになります。

$ grunt watch

構文チェックの結果、問題があれば以下のようなエラーが出ます。問題がなければ、特に何も起こりません。

Running "tslint:ts" (tslint) task
>> ts/function.ts[6, 4]: file should end with a newline
>> ts/function.ts[4, 1]: space indentation expected
>> ts/function.ts[5, 1]: space indentation expected
>> 3 errors in 1 file

gulp派の方は以下をお使いください。

panuhorsmalahti/gulp-tslint – GitHub

以下はtslintの使い方の参考にさせていただいたブログ記事となります。

TypeScriptリファレンス読んだ感想 – yutaponのブログ

まとめ

まずはこんなところでTypeScriptを使って開発できるようになると思います。TypeScript自体は、ほぼほぼJavaScriptに若干新しい概念が加わっただけのものなので、JavaScriptが書ければ問題なく書けると思います。最初は型の扱いに慣れていなければ苦戦すると思いますが。Swiftにも似ている部分もあるし、ECMAScript 6もリリース間近でもあるし、今覚えておくといろいろと応用がきくのではないでしょうか。

最後にTypeScriptを勉強するのに役立ちそうなまとめサイトを紹介しておきます。

それからTypeScriptの達人わかめ（@vvakame）さんの本も紹介しておきます。

**『TypeScriptリファレンス Ver.1.0対応』**
著者: わかめまさひろ, 井上章 (監修), 丸山弘詩 (編集)
出版社: インプレスジャパン
発売日: 2014年5月16日
ISBN: 484433588X
⇒Amazon.co.jpで詳細を見る

カテゴリー: Web技術
Grunt JavaScript TypeScript 開発環境

maesblog