LT駆動開発 04で発表したLT資料です。 「5分では分からないTypeScriptのなんとか」

1. 5分では分からない
TypeScriptのなんとか
2014/06/07
LT駆動開発04
@Toro_kun

2. module
SelfIntroduction
{
export
class
Me
extends
Person
{
private
name:
string
=
”松原和也”;
private
twitterId:
string
=
”@Toro_kun”;
private
community:string[]
=
[
”⽇日本Androidの会中国⽀支部@staff”,
”GDG中国@staff”,
”JSers'
Cafe
ZERO@owner”
];
}
}

3. TypeScriptとは
Ê 静的型付け⾔言語
Ê ｶﾀｰﾝｾﾞﾝｯ
Ê 2014年年04⽉月02⽇日にversion
1.0がリリース
Ê JavaScriptのスーパーセット
Ê コンパイルしてJavaScriptを⽣生成
Ê altJS

4. altJS
⾔言語 設計/開発 登場時期 影響を受けた⾔言語
CoffeeScript
Jeremy
Ashkenas,
et
al.
2009
JavaScript,
Python,
Ruby,
Haskell
TypeScript Microsoft 2012 JavaScript,
Java,
C#
Haxe
Haxe
Foundation,
Nicolas
Cannasse
2005 ActionScript,
OCaml
Dart Google 2011
Java,
C++,
JavaScript,
CoffeeScript,
Go
JSX DeNA 2012 JavaScript,
ActionScript
モダンな⾔言語でHTML5を開発しよう！ 俯瞰して理理解するaltJSの⽐比較 (前篇 –
TypeScript,
CoffeeScript,
Haxe)
http://html5experts.jp/clockmaker/2183/
より

5. TypeScriptの何がいいのか
Ê コンパイル時に型の整合性チェックが⾏行行われる
Ê IDE等で補完機能を使える
Ê JavaScriptの書き⽅方をしても動く
Ê （この部分は静的型付けは損なわれるが・・・）
Ê TypeScriptとほぼ⼀一対⼀一で対応するJavaScriptに変換
Ê ⽣生成されたJavaScriptの可読性がよい

6. TypeScriptの開発環境
Ê Visual
Studio
2013、2012（WIndows）
Ê WebStorm
Ê Eclipse
+
Eclipse
TypeScript
plug-­‐in
Ê Sublime
Text
+
T3Sモジュール
Ê Vim
+
TypeScriptプラグイン
Ê Emacs
+
TypeScript拡張

7. つかってみました

8. enum
TypeScript
enum
sample
{
a
=
1,
b,
c
=
4,
daa
}
JavaScript
sample;
(function
(sample)
{
sample[sample["a"]
=
1]
=
"a";
sample[sample["b"]
=
2]
=
"b";
sample[sample["c"]
=
4]
=
"c";
sample[sample["daa"]
=
5]
=
"daa";
})(sample
||
(sample
=
{}));

9. enum
(TypeScript)

10. enum
(JavaScript)

11. ⽂文字列列を設定すると怒怒られる
けどコンパイルしてくれる
なんてツンデレさんなんでしょう

12. 終