Macbook(Early 2008)にTypeScriptをインストールする

Mac

TypeScriptでオブジェクト指向JavaScriptのコードが生成できるようなので、Javaをメイン言語としている自分としては、こちらの方が楽できそうなので試してみた。

ひとまず、環境構築。TypeScriptは、node.jsのパッケージとしても提供されているためnpm経由でインストール可能となっています。まずは、node.jsをインストールして、npmでTypeScriptをインストールする。

node.jsのインストール

MacBook:~ log4jk$ brew install node
==> Downloading http://nodejs.org/dist/v0.8.16/node-v0.8.16.tar.gz
######################################################################## 100.0%
==> ./configure --prefix=/usr/local/Cellar/node/0.8.16
==> make install
==> Caveats
Homebrew installed npm.
We recommend prepending the following path to your PATH environment
variable to have npm-installed binaries picked up:
  /usr/local/share/npm/bin
/usr/local/Cellar/node/0.8.16: 870 files, 13M, built in 4.5 minutes

npmが利用できることを確認する。

MacBook:~ log4jk$ which npm
/usr/local/bin/npm
MacBook:~ log4jk$ npm help

Usage: npm <command>

where <command> is one of:
    add-user, adduser, apihelp, author, bin, bugs, c, cache,
    completion, config, ddp, dedupe, deprecate, docs, edit,
    explore, faq, find, find-dupes, get, help, help-search,
    home, i, info, init, install, isntall, la, link, list, ll,
    ln, login, ls, outdated, owner, pack, prefix, prune,
    publish, r, rb, rebuild, remove, restart, rm, root,
    run-script, s, se, search, set, show, shrinkwrap, star,
    start, stop, submodule, tag, test, tst, un, uninstall,
    unlink, unpublish, unstar, up, update, version, view,
    whoami

npm <cmd> -h     quick help on <cmd>
npm -l           display full usage info
npm faq          commonly asked questions
npm help <term>  search for help on <term>
npm help npm     involved overview

Specify configs in the ini-formatted file:
    /Users/log4jk/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@1.1.69 /usr/local/Cellar/node/0.8.16/lib/node_modules/npm

TypeScriptのインストール

MacBook:~ log4jk$ npm install -g typescript
npm http GET https://registry.npmjs.org/typescript
npm http 200 https://registry.npmjs.org/typescript
npm http GET https://registry.npmjs.org/typescript/-/typescript-0.8.1-1.tgz
npm http 200 https://registry.npmjs.org/typescript/-/typescript-0.8.1-1.tgz
/usr/local/share/npm/bin/tsc -> /usr/local/share/npm/lib/node_modules/typescript/bin/tsc
typescript@0.8.1-1 /usr/local/share/npm/lib/node_modules/typescript

tscコマンド(TypeScript Compiler)が利用できることを確認する。

MacBook:~ log4jk$ echo "export NPM_HOME=/usr/local/share/npm" >> ~/.bash_profile
MacBook:~ log4jk$ echo "export PATH=\$PATH:\$NPM_HOME/bin" >> ~/.bash_profile
MacBook:~ log4jk$ source ~/.bash_profile
MacBook:~ log4jk$ which tsc
/usr/local/share/npm/bin/tsc
MacBook:~ log4jk$ tsc -h
Syntax:   tsc [options] [file ..]

Examples: tsc hello.ts
          tsc --out foo.js foo.ts
          tsc @args.txt

Options:
  -c, --comments  Emit comments to output
  --declaration   Generates corresponding .d.ts file
  -e, --exec      Execute the script after compilation
  -h, --help      Print this message
  --module KIND   Specify module code generation: "commonjs" (default) or "amd"
  --nolib         Do not include a default lib.d.ts with global declarations
  --out FILE      Concatenate and emit output to single file
  --sourcemap     Generates corresponding .map file
  --target VER    Specify ECMAScript target version: "ES3" (default), or "ES5"
  -w, --watch     Watch output files
  @<file>         Insert command line options and files from a file.

TypeScriptを記述して、コンパイル&実行してみる。

MacBook:~ log4jk$ mkdir typescript
MacBook:~ log4jk$ cd typescript/
MacBook:typescript log4jk$ vi animals.ts

TypeScriptファイルの記載内容。

class Animal {
   constructor(public name) { }
   move(meters) {
       console.log(this.name + " moved " + meters + "m.");
   }
}

class Snake extends Animal {
   move() {
       console.log("Slithering...");
       super.move(5);
   }
}

class Horse extends Animal {
   move() {
       console.log("Galloping...");
       super.move(45);
   }
}

var sam = new Snake("Sammy the Python")
var tom: Animal = new Horse("Tommy the Palomino")

sam.move()
tom.move(34)

実行する。

MacBook:typescript log4jk$ tsc animals.ts -e
Slithering...
Sammy the Python moved 5m.
Galloping...
Tommy the Palomino moved 45m.

コンパイルされた後のJavaScriptファイルは以下のようになっています。

MacBook:typescript log4jk$ vi animals.js 

var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var Animal = (function () {
    function Animal(name) {
        this.name = name;
    }
    Animal.prototype.move = function (meters) {
        console.log(this.name + " moved " + meters + "m.");
    };
    return Animal;
})();
var Snake = (function (_super) {
    __extends(Snake, _super);
    function Snake() {
        _super.apply(this, arguments);

    }
    Snake.prototype.move = function () {
        console.log("Slithering...");
        _super.prototype.move.call(this, 5);

これはいいかも。もうちょっと触ってみよう。

関連エントリ