Node.jsインストール
TypeScriptのインストールにnpmを使うので、まずnode.jsをインストール。
$ brew install node
==> Downloading http://nodejs.org/dist/v0.8.14/node-v0.8.14.tar.gz
######################################################################## 100.0%
==> ./configure --prefix=/usr/local/Cellar/node/0.8.14
==> 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
==> Summary
/usr/local/Cellar/node/0.8.14: 861 files, 13M, built in 3.1 minutes
$ which npm
/usr/local/bin/npm
npmが使えることを確認。
/usr/local/share/npm/binをPATH
に追加。
Windowsの場合はこちら。(C:\Program Files\nodejsあたりがPATHに追加されていることを確認)
proxyを設定する場合は
npm config set proxy http://ユーザ名:パスワード@プロキシサーバのURL:ポート番号
npm config set registry http://registry.npmjs.org/ <- これ(httpにする)も必要だった
TypeScriptインストール
$ 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.0.tgz
npm http 200 https://registry.npmjs.org/typescript/-/typescript-0.8.0.tgz
/usr/local/share/npm/bin/tsc -> /usr/local/share/npm/lib/node_modules/typescript/bin/tsc
typescript@0.8.0 /usr/local/share/npm/lib/node_modules/typescript
$ which tsc
/usr/local/share/npm/bin/tsc
tscが使えることを確認、
HelloWorldを書く
hello.tsc
class Greeter {
constructor(public greeting: string) {
}
greet() {
return "<h1>" + this.greeting + "</h1>";
}
}
var greeter = new Greeter("Hello, world!");
console.log(greeter.greet());
tscでコンパイル
$ tsc hello.tsc
出力コードは
hello.js
var Greeter = (function () {
function Greeter(greeting) {
this.greeting = greeting;
}
Greeter.prototype.greet = function () {
return "<h1>" + this.greeting + "</h1>";
};
return Greeter;
})();
var greeter = new Greeter("Hello, world!");
console.log(greeter.greet());
なかなかいい感じ
-eをつけると実行もしてくれる!
$ tsc hello.ts -e
<h1>Hello, world!</h1>
ちょっと遊ぶ場合はPlayGroudで!
emacsのtypescript-mode設定
install
$ wget http://www.interoperabilitybridges.com/media/155449/typescript_support_for_emacs.zip
$ unzip typescript_support_for_emacs.zip
$ mv TypeScript\ support\ for\ Emacs/TypeScript.el (load-pathの通ったとこ)/typescript-mode.el
emacs.el編集
(autoload 'typescript-mode "typescript-mode" nil t)
(add-to-list 'auto-mode-alist '("\.ts$" . typescript-mode))
オブジェクト指向的なコード
class Car {
constructor(public color: String = 'pink',
public direction: number = 0,
public mph: number = 0){}
gas(amount: number = 10) : Car {
this.mph += amount;
return this;
}
brake(amount: number = 10) : Car {
var mph = this.mph - amount;
this.mph = (mph < 0) ? 0 : mph;
return this;
}
}
var car1 = new Car();
console.log(car1);
console.log(car1.gas());
console.log(car1.brake());
-eをつけてコンパイルすると
$ tsc car.ts -e
{ color: 'pink', direction: 0, mph: 0 }
{ color: 'pink', direction: 0, mph: 10 }
{ color: 'pink', direction: 0, mph: 0 }
出力結果は
var Car = (function () {
function Car(color, direction, mph) {
if (typeof color === "undefined") { color = 'pink'; }
if (typeof direction === "undefined") { direction = 0; }
if (typeof mph === "undefined") { mph = 0; }
this.color = color;
this.direction = direction;
this.mph = mph;
}
Car.prototype.gas = function (amount) {
if (typeof amount === "undefined") { amount = 10; }
this.mph += amount;
return this;
};
Car.prototype.brake = function (amount) {
if (typeof amount === "undefined") { amount = 10; }
var mph = this.mph - amount;
this.mph = (mph < 0) ? 0 : mph;
return this;
};
return Car;
})();
var car1 = new Car();
console.log(car1);
console.log(car1.gas());
console.log(car1.brake());
jQueryでアプリを書く
定義ファイルが必要
$ wget https://github.com/deconcepter/jquery.d.ts/raw/master/jquery.d.ts
名前空間サポート最高っす
/// <reference path="jquery.d.ts" />
module foo {
export function init() {
$('#clickme').on('click', e => {alert('Hello World!');});
}
}
$(() => {
foo.init();
});
コンパイル
$ tsc foo.ts
出力結果はこんな感じ
var foo;
(function (foo) {
function init() {
$('#clickme').on('click', function (e) {
alert('Hello World!');
});
}
foo.init = init;
})(foo || (foo = {}));
$(function () {
foo.init();
});
さっと画面を作成
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="foo.js"></script>
</head>
<body>
<div>
<button id="clickme">Click!</button>
</div>
</body>
</html>
これは使える....