Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介
つい先日 Microsft が「TypeScript」という新たな JavaScript 系言語を発表しました. Dart, CoffeeScript, JSX 同様 JavaScript に変換して実行することができます.
導入が簡単だったのでさっそく使ってみました.
Table of contents
TypeScript とは
TypeScript とは, 大規模なアプリケーション開発のための言語です. JavaScript のスーパーセットで JavaScript に変換して実行することができます.
どんな環境でも使えるオープンソースです.
原文はこちら
TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.
主な機能はこちら
- 静的型付け(オプション)
- クラス宣言
- モジュール・サポート
- Visual Studio プラグイン
TypeScript をインストールしよう
TypeScript は Node.js 用のモジュールを提供しており これを使うことで簡単にコンパイルすることができます.
下記のコマンドを実行するだけでインストール完了です.
npm install -g typescript
npm を使ってグローバルインストールしています.
実際に動かしてみよう
私のサイトではお馴染み Vector2 実装です. Dart の時も JSX の時も作ったやつです.
拡張子は .ts です.
vector.ts というファイルを作って下記のコードを入力します.
/* * vector.ts */ class Vector2 { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; } set(x: number, y: number) { this.x = x; this.y = y; return this; } length() { return Math.sqrt(this.x*this.x + this.y*this.y); } normalize() { var len = this.length(); this.x /= len; this.y /= len; return this; } toString() { return "(" + this.x + "," + this.y + ")"; } log() { console.log( this.toString() ); } } window.onload = function() { var v = new Vector2(3, 4); // v console.log("v: " + v.toString()); // length test console.log("length: " + v.length()); // normalize test v.normalize(); console.log("v: " + v.toString() + ", " + "length: " + v.length()); };
▲vector.ts
そして, 下記のコマンドを実行します.
tsc vector.ts
すると vector.ts と同じディレクトリに vector.js というファイルが出力されます.
ちなみに変換結果はこれです.
var Vector2 = (function () { function Vector2(x, y) { this.x = x; this.y = y; } Vector2.prototype.set = function (x, y) { this.x = x; this.y = y; return this; }; Vector2.prototype.length = function () { return Math.sqrt(this.x * this.x + this.y * this.y); }; Vector2.prototype.normalize = function () { var len = this.length(); this.x /= len; this.y /= len; return this; }; Vector2.prototype.toString = function () { return "(" + this.x + "," + this.y + ")"; }; Vector2.prototype.log = function () { console.log(this.toString()); }; return Vector2; })(); window.onload = function () { var v = new Vector2(3, 4); console.log("v: " + v.toString()); console.log("length: " + v.length()); v.normalize(); console.log("v: " + v.toString() + ", " + "length: " + v.length()); };
▲vector.js
これを普通の js 同様 html ファイルの script タグで読みこめば同じように 実行できます.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Vector | TypeScript Test</title> <script src="../ts/vector.js"></script> </head> <body> <h1>Vector | TypeScript Test</h1> </body> </html>
実行結果はこちら. Console に出力してます.
v: (3,4) vector.js length: 5 vector.js v: (0.6,0.8), length
ちなみにサンプルは GitHub にアップしてます.
まとめ
一応公式サイトのサンプルはひと通り目を通しました. 位置づけとしては JavaScript と CoffeeScript の間といったところでしょうか?
Dart 寄りですが, JS のコード貼っつけても動くのは Good! 正当進化を目指しているのかも.
ECMA の委員会で作成しているらしいのでガンガン新しい仕様を取り入れて進化していってくれると嬉しいですね.
個人的には CoffeeScript 推しなので, まだ使うにはどうかなぁ~って感じです.
これきっかけで Node.js も普及してくれると嬉しいな♪ もうちょい触ったらまた改めてレビュー書きます!!
なんか Windows8 アプリは TypeScript で作ってくださいねぇ 的な流れになりそう.
Reference
参考にさせて頂いたサイトです.
早速使ってみました♪
[TypeScript][Programming][Microsoft]早速使ってみました♪ / “Microsft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life” http://t.co/j3ZGg6IG
[TypeScript][Programming][Microsoft]早速使ってみました♪ / “Microsft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life” http://t.co/j3ZGg6IG
[TypeScript][Programming][Microsoft]早速使ってみました♪ / “Microsft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life” http://t.co/j3ZGg6IG
MS……w / Microsft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/p0srU0DF
[TypeScript][Microsoft] / “Microsft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life” http://t.co/NT6K2jAo
【はてブ新着IT】 Microsft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/n29Zeiy5
Microsft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/8mqqykcf
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life TM Life!!(ティーエム ライフ) 「Time is money」をモットーとしたサ… http://t.co/GP996BxE
javascript: Microsft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/5LXS93l5
javascript: Microsft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/5LXS93l5
>なんか Widnows8 アプリは TypeScript で作ってくださいねぇ 的な流れになりそう.
知らないOSktkr
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/hj3Q1dcO
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/e1R0Xpb5
書きました RT @tmlife_jp: [TypeScript][Programming]“Microsft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life” http://t.co/ZRaqKcyR
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life: http://t.co/bd4vgKy3 #miteru
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 http://t.co/JtLcvcpU @phi_jpさんから
書きました RT @tmlife_jp: [TypeScript][Programming]“Microsft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life” http://t.co/ZRaqKcyR
[programming][まとめ][Windows] / “Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life” http://t.co/jENHE3p1
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life
http://t.co/0koOsqPD
書きました RT @tmlife_jp: [TypeScript][Programming]“Microsft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life” http://t.co/ZRaqKcyR
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/FJJDZKst #programming
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/neZwSBxt http://t.co/wmsNmzhz
“Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life” http://t.co/T5IgTvcY
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/MOW9vzX7
書きました RT @tmlife_jp: [TypeScript][Programming]“Microsft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life” http://t.co/ZRaqKcyR
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/qpGPadlU
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/2o13g3FE
“Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life” http://t.co/b9qhXNiX
“Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life” http://t.co/b9qhXNiX
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/i61TF8x0
【Microsoft】 Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触って … http://t.co/kxNGq2JG #Microsoft
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 http://t.co/JF1j6g4x @phi_jpさんから
★ for Google Reader Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 http://t.co/czeJmWu2
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 http://t.co/m4GjNy1E @phi_jpさんから
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 http://t.co/m4GjNy1E @phi_jpさんから
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 http://t.co/Mzpl9CmI
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 http://t.co/wsGXhxzC @phi_jpさんから
参考に
み → Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/VLl37kEn
クラスの概念が実装に反映しやすくなったのがいい。
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 http://t.co/XKJH5yKF @phi_jpさんから
『JS のコード貼っつけても動く』 それなら導入しやすいし、移行もしやすそう。今度試すか。
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/G5uVcIB4
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 http://t.co/7GAHkdeE @phi_jpさんから
『JS のコード貼っつけても動く』 それなら導入しやすいし、移行もしやすそう。今度試すか。 / “Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life” http://t.co/nd8VqXx7
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 http://t.co/qBeliAle @phi_jpさんから
TypeScript事始め。Haxeも注意しつつ。/
Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介 | TM Life http://t.co/W5ZQsP6M