28
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

TypeScriptスターターキット (OS X)

Last updated at Posted at 2014-07-16

http://www.typescriptlang.org/Playground で遊びたおして TypeScript のことをとっても気に入ったけど、じっさいに自分のプロジェクトで使いはじめるために何をどうすればいいのかわからずにアワアワしてた昨日の自分と、忘れっぽい明日の自分へ贈るメモ。

ともかくツールの揃え方だけ。
それぞれの詳しい使い方はググったりわかめさんの本買ったりしてください。

Node.js

いろんな導入方法があるので省略。各自お好きな方法で。
ぼくはnodebrewでインストール。

Grunt.js

Grunt.js は Node.js を実行基盤とする JavaScript のビルドツール。たぶんmakeのようなもの。

プロジェクト毎に異なるバージョンのGrunt.jsを使い分けられるよう、
環境にインストールするクライアントと、プロジェクトローカルにインストールする本体とにパッケージが分かれている。

Gruntクライアントツールのインストール(グローバル)

$ npm install -g grunt-cli

.bash_profile に以下を追記(bashの場合)

PATH=$(npm prefix -g grunt-cli)/package/bin:$PATH

Grunt本体のインストール(プロジェクトローカル)

$ npm install grunt --save-dev

TypeScript

インストール(プロジェクトローカル)

$ npm install typescript --save-dev

プロジェクトの外でTypeScriptコンパイラをふだん使いしたいならグローバルインストールも実施しておけばいいかも。

$ npm install -g typescript

TSD

オンラインで公開されている各種JavaScriptライブラリの型定義(.d.ts)を検索・入手するツール。

インストール(プロジェクトローカル)

$ npm install tsd --save-dev

プロジェクトが必要とする型定義を記述する tsd.json の雛形をあらかじめ生成しておく

$ ./node_modules/.bin/tsd init

grunt-typescript

TypeScriptのコンパイルを実行するGruntタスク

インストール(プロジェクトローカル)

$ npm install grunt-typescript --save-dev

grunt-tsd

tsd による型定義(.d.ts)の更新を行うGruntタスク

インストール(プロジェクトローカル)

npm install grunt-tsd --save-dev

型定義(.d.ts)の入手

tsd コマンドを使って node.jsの標準ライブラリとwsモジュールの型情報を入手してみる。

$ ./node_modules/.bin/tsd query node

- node/node.d.ts : <head> : XXXX-XX-XX XX:XX
$ ./node_modules/.bin/tsd query ws

- ws/ws.d.ts : <head> : XXXX-XX-XX XX:XX

それぞれ、node/node ws/ws という名前であることがわかったので、実際にこれらをダウンロード、インストールする。(--save オプションによってtsd.jsonへの追記も行われる)

$ tsd query node/node --save --resolve --action install 
$ tsd query ws/ws --save --resolve --action install 

型定義の利用

取得したすべての型定義への参照は typings/tsd.d.ts に集約されるので、自分のコードには次の行を挿入するだけ。かんたん!

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

Gruntfile

Grunt でコンパイルや型定義の更新を自動化しよう。
Gruntfile.js (Makefileのようなもの)を次の内容で作成。(コンパイルオプションやパスは適宜読み替えよう)

Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    typescript: {
      main: {
        src: ['ts/**/*.ts'],
        dest: 'js',
        options: {
          basePath: 'ts',
          noImplicitAny: false, //true,
          module:        'commonjs',
          target:        'es5',
          comments:      true
        }
      }
    },
    tsd : {
      refresh: {
        options: {
          command: 'reinstall',
          latest: true,
          config: './tsd.json',
          opts: {}
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-typescript');
  grunt.loadNpmTasks('grunt-tsd');

  grunt.registerTask(
    "default",
    "TypeScriptをコンパイル",
    ["typescript:main"]
  );
};

grunt で TypeScriptのコンパイル、grunt tsd で型定義の更新が実行されるはず。

困ったときは?

ダウンロードした型定義の間違いに気づいたら自分で直して https://github.com/borisyankov/DefinitelyTyped にプルリクすればあなたもわたしもみんなも幸せ。

参考:
http://qiita.com/vvakame/items/1980d4b6cc222e03fdcb

28
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?