SlideShare a Scribd company logo
3日時間をもらったので
TypeScriptを触ってみた
イースト株式会社 コンテンツビジネス事業部 加藤靖
初版 2013年10月10日
最終更新 2013年10月15日
AGENDA
1.

TypeScriptとは
1.

概要

2.

視点

2.

TypeScriptの言語機能

3.

比較
1.
2.

CoffeeScript

3.

Haxe

4.

4.

C#

Dart

まとめ
前提知識
 使用経験
JavaScript

C#
Visual

Studio
TypeScriptとは
TypeScript概要


Microsoft謹製の新しいプログラミング言語



JavaScriptのスーパーセット



開発者は Anders Hejlsberg 氏=C#の生みの親



特徴


クラスベースオブジェクト指向



静的型付け



JavaScriptに変換されて動作する(トランスコンパイル型)



微妙な仕様はそのまま






アナウンスは行っているが
いわゆる言語デザイナではなさそう。
(2013/10/15追記)

変数の巻き上げ、for文のスコープ、etc…

ECMAScript 6の仕様を意識。

Node.jsとVisual Studio 2012/2013の公式パッケージ
ライバル
JavaScriptの代替となる言語をaltJSと俗称する。
よく話題になるのは以下。


CoffeeScript



ActionScript 3 (Adobe)



Haxe

(AS3派生)



Dart

(Google)

現時点ではCoffeeScriptが知名度・実用事例ともにNo. 1 。
視点


プログラミング言語の新地平



MicrosoftによるWeb界の領土拡大


従来のWindows/C#プログラマをWebプログラマに転身させる



よそのWebプログラマを自社陣営に取り込む

Wiindows 8~

IE/Safari/Chrome/Firefox

C#

TypeScript
JavaScript
Visual Studio 201X
TypeScriptとVisual Studioの足並み
2012/8/15

Visual Studio 2012リリース

2012/10/1

TypeScript発表。同時にVS2012に対応。

2013/6/20

TypeScript Ver. 0.9リリース。大幅な機能強化。

2013/6/26

Visual Studio 2013Previewリリース

2013/6/28

TypeScript Ver. 0.9.0.1リリース

2013/7/23

TypeScript VS2013Preview対応

2013/8/6

TypeScript Ver. 0.9.1リリース。

2013/8/21

TypeScript Ver. 0.9.1.1リリース。

2013/9/9

Visual Studio 2013RCリリース

2013/9/9

TypeScript VS2013RC対応
VS2013とのシームレスな連携


プロジェクトテンプレート



コード補完



リアルタイムエラー表示



ビルド・デバッグ起動ボタン



デバッガ


Visual Studio上で
TypeScriptのままデバッグできる
Chromeでもデバッグできちゃいました
SourceMaps を利用しているため
ふつうにTypeScriptのままデバッグできます。

※SourceMapsとは


もともとはJavaScriptやCSS(SCSS)ファイルの最小化・結合を行った際に、
ソースの対応づけを行う仕組み。



Chrome, Firefox, Operaがサポート。
と思ったら CoffeeScript がいつのまにか
SourceMaps に対応していた。
もうCoffeeScriptとChromeデバッガでいいのでは?
使い慣れた VS 上でデバッグできるのは TypeScript のみ。
また、型チェック・コード補間もろもろとのシナジーもある。
オールインワンの環境としては VS + TS に及ぶものはない。
専用IDEは、Haxe, Dart にもあるが(Flash Studio, Dart Editor―eclipse派生)、
VS 並に普及するのはだいぶ先だろう。
TypeScriptの言語機能
自分で触りたい人はこちら↓
言語機能一覧(Ver. 0.9時点)


型アノテーション



構造的部分型



any型



引数プロパティ宣言



型アサーション



関数オーバーロード



クラス、インターフェース



デフォルト引数



継承、実現



可変長引数



ジェネリクス



定数によるオーバーロード



アクセス修飾子



アロー関数式



列挙型



モジュール機構



オブジェクト型リテラル



アンビエント宣言



型推論



ドキュメントコメント
静的型付け


型アノテーション



TypeScriptの心臓。


コンパイラによる型チェック



IDEによるコード補完



コンパイル後は残らない。



使わないというオプション。


any型 = ただのJavaScript Object
クラス、インターフェースは慣れたもの
ただしいくつか注意が必要
TypeScript

JavaScript
継承、実現の記法がJava!


extends, implements キーワード



“:”ではない!



型アノテーションと重なったのか、
予約語があったからなのか……

ECMA Script 5 の仕様に従っただけと思われる。
(2013/10/15追記)
アクセス修飾子はpublicとprivateだけ


protected はロードマップにある。



internal(package)は
モジュール機構で制御する。
Thisの意味とアロー関数式


通常のfunction式





Thisを引き継がない。
JavaScript互換。

アロー関数式


記法はC#のラムダ式に準ずる。



Thisを外のスコープから引き継ぐ。
プロパティ(set/get)


本物のプロパティ。



JavaScriptの関数方式ではない。



実装はdefineProperty.
(ECMAScript 5)



オールドブラウザでは動かない。
オブジェクト型リテラル


ユニーク



C#の用語を使うと
「メンバへの代入が可能な
匿名インターフェース」



型安全性を保ったまま
JS流のコードが書ける。




というかコード補完が効く。

右以外のシグニチャ


メソッドの代替記法
a():string / a: ()=>string



関数呼び出し ()



インデックス []



コンストラクタ new()
構造的部分型


クラスAがクラスBと継承関係になくても
シグニチャさえ満たしていればBとして振る舞える機能。




関連:nominal typing, duck typing

Ocaml(F#の元)の特徴。





C++テンプレート
Scala

オブジェクト型リテラルと組み合わせてJavaScript流儀のコードが書ける。
※そもそもオブジェクト型リテラルにextends/implements書けない。



組み込み型やライブラリコードへの適用。
型推論は信じるに値しない
•

宣言と同時に初期化される変数以外
すべて型アノテーションを付ける
のが吉。

•

暇な人は
右のコードを試してみてください。
関数オーバーロードとその仲間たち



微妙 とだけ憶えてください。



定義部分は一つで、引数の型判別は
全部自分で書かないといけない。



あくまで外部向けという感じ。



仕様変更も多い。
定数オーバーロード



ユニーク



Ver. 0.9から。



引数の定数値で振り分ける
オーバーロード。



Visual Studio上でも同様の
型チェック・コード補完が働く。
JavaScriptでも使えた!
TypeScriptプロジェクト内に限り、
JavaScriptで書いていても同じように認識される。
TypeScriptの新機能というよりは
Visual Studioの機能強化ありきと見るべき?
モジュールと名前空間
期待通りの振る舞い
TypeScript

※名前空間のネストにも対応。

JavaScript
import/export


コード例は略。



よろしくない。実装を急いだ感じ。


ECMAScript 6に劣る機能と互換性のない文法。



ロードマップにはECMAScript 6にあわせる旨がある。



Usingの見た目とNode.jsサポートを優先したのでは?
JavaScriptのライブラリも使えます。


外部ファイルに型情報を記述する(アンビエント宣言という)。




有名どころは有志がメンテ。




ファイルの拡張子はd.ts

jQuery, knockout, underscore, backbone, …

自社ライブラリはがんばるしかない。
他言語との比較
TypeScriptの何が不満なのか
Microsoft言語の中核
― C#


演算子オーバーロード



ユーザー定義型変換



abstract, sealed, override



readonly, const



ジェネリクスの制約。



yield




ECMAScript 6にiterator(for-of)とgenerator(function*, yield)がある。

LINQ


APIとしては同様のものがある(map/filter in ECMAScript 5)。





フォーラムではiterator/generatorでやるべきという意見も。

メタデータ(属性)




C#でも新しい機能(~>3.5)ばかり。
入るべきものは将来入るだろう。

ECMAScript 5, 6にプロパティ属性がある。あくまで処理系向けで、ユーザー定義のものではなかった気がするが。

拡張メソッド


mixinがロードマップにある。
明日から勉強しようと思ってX年
― CoffeeScript


narrow arrow(->)



range型, 配列スライス



存在演算子(?)



文字列補間



ヒアドキュメント



if 修飾子



配列内包表記

どれも「とても便利なシンタックスシュガー」
機能としては負けてない。
TSとCSで姿勢が対極的。
えー、これFlashなのぉ?
― Haxe
機能だけならaltJS随一。
Flashが地盤であることが惜しまれる。



Flash出力、Flash Studio対応。



C++出力、PHP出力、etc



強力な型推論



mixin



代数的データ型(Powerful enumと呼ばれる)



メタデータ



イテレータ



マクロ



インライン関数



最適化
えっと、これもうJavaScriptじゃないですよね
.NET共通言語基盤(CLI)の
― Dart
競合相手と見るべきでは。



ドキュメントコメントの
markdown文法

final(readonly), const



エントリポイント(main関数)

組み込みのList, Mapとコレクション
リテラル



並行実行モデル(Erlang-like)



専用のVM



ビット演算子



標準ライブラリ



カスケード演算子(..)



dart:collection, dart:io, dart:async



演算子オーバーロード



dart:html, dart:svg, dart:indexed_db



Lexical scope



文字列補間



typedef



メタデータ



C++/Java系の文法



抽象クラス






クライアントアプリケーション
フレームワーク



モジュール化とオンライン共有



最適化
まとめ
MSDNのコードサンプルが
C#とTypeScriptになってからが本番


あって当然の機能が揃ったところ。
プレ.NET 2.0感



強みはVisual Studio.



現状プロダクトユースに使うには怖い。


バグが多い。



破壊的変更も頻繁
Ver. 0.9でboolがbooleanに!
一方、その戦略的価値は高い
ディベロッパ向けの戦略の情報源として


Microsoft は Web をどうするつもりなのか

将来の技術的礎の先取りとして


次期 Visual Studio の JavaScript サポート



.NETファミリーの新機能
Appendix A
参考リンク
ファーストガイド


インストール


まずはブラウザ上で動かしてみよう。




Visual Studio で動かしたい人はこちらから。




http://www.typescriptlang.org/Playground/

http://www.microsoft.com/en-us/download/details.aspx?id=34790

参考


MSDNの入門記事




http://msdn.microsoft.com/ja-jp/magazine/jj883955.aspx

公式チュートリアル


http://www.typescriptlang.org/tutorial/
より詳しく知りたい人


公式ページ





http://www.typescriptlang.org/
http://typescript.codeplex.com/

TypeScript クイックガイド




http://phyzkit.net/typescript/

日本 TypeScript ユーザー会


https://groups.google.com/forum/#!forum/typescript-japan
altJS


CoffeeScript




Haxe




http://haxe.org/ref

Dart




http://coffeescript.org/#language

https://www.dartlang.org/docs/dart-up-and-running/contents/ch02.html

比較記事をいくつか



http://www.infoq.com/jp/news/2012/10/typescript-debate





http://html5experts.jp/clockmaker/2183/
http://codeforhire.com/2013/06/18/coffeescript-vs-typescript-vs-dart/

Thoughworks Rader


http://thoughtworks.fileburst.com/assets/technology-radar-may-2013.pdf
CoffeeScriptがTrialに。Dartは今期Holdから落選。TypeScriptは触れられてもいない。
Appendix B
スライドで紹介できなかったTypeScriptの機能
型付けなしの世界


any型



すべての型チェックが
スルーされる。



要はJavaScriptのObject.



用途


JavaScriptとのやり取り



戻り値の型が不定な関数(Mixed)



コンパイルエラーの回避
型変換


暗黙の型変換は基本なし。





安全より
Date型とかで困る。

明示的に変換したい場合


演算子 <T>



型アサーションと呼ばれる。



コンパイル後は何も残らない。



Any経由でどんな変換も可能。
スコープ


varなしはグローバル。



{}はスコープを作らない。



メンバ参照時はthis必須。



静的メンバ参照時はクラス名必須。



要するにイケてない。
引数プロパティ宣言


コンストラクタ引数に
アクセス修飾子をつけると
自動的にメンバ変数ができる



CoffeeScriptを意識?



F#(Ocaml)のレコード型を思い出す
列挙型はC#そのまま





Ver. 0.9から。
列挙型自身はオブジェクトに、
列挙値はそのプロパティに
コンパイルされる。

enum NodeType {
ELEMENT_NODE = 1,
ATTRIBUTE_NODE,
TEXT_NODE,
}

実行時の型はnumber.


相互変換が可能。



値の指定が可能。

if (node.nodeType == NodeType.ELEMENT_NODE)
{
...
}
ジェネリクスもほぼC#


Ver. 0.9から



記法は<T>



関数、クラス、インターフェース、
クロージャ



Array<T>, NodeListOf<T>(DOM)



制約はまだextendsのみ?
ドキュメントコメントはほぼC#


Visual Studioのサポート!



/** … */の形式。



/// はあるのか?



タグは現状@paramのみらしい。

More Related Content

PPTX
TypeScriptをオススメする理由
PDF
jQuery 対応ライブラリと TypeScript
PDF
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
PDF
TypeScriptは明日から使うべき
PDF
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
PDF
TypeScript超入門
PDF
TypeScript 入門してみる
PDF
Visual Studioで始めるTypeScript開発入門
TypeScriptをオススメする理由
jQuery 対応ライブラリと TypeScript
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
TypeScriptは明日から使うべき
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
TypeScript超入門
TypeScript 入門してみる
Visual Studioで始めるTypeScript開発入門

What's hot (19)

PDF
TypeScript 独習会
PPTX
Typescriptの中のこと(浅め)
PPTX
TypeScriptはいいぞ
PDF
Google Glassでできること XE12版 最新開発情報 Mirror API & GDK
PDF
Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで
PPTX
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
PDF
IDEALIZE YOU
PDF
渋谷JVM#1 Immutable時代のプログラミング言語 Clojure
PDF
WebStormでできること
PDF
Win32 APIをてなずけよう
PPTX
JavaScriptで味わう! 関数型プログラミングのメリット!!
PDF
Nespのコード生成
PPTX
ちゃんとした C# プログラムを書けるようになる実践的な方法~ Visual Studio を使った 高品質・低コスト・保守性の高い開発
PDF
パターンでわかる! .NET Coreの非同期処理
PDF
JavaScript MVC入門
PDF
continuatioN Linking
PDF
LT駆動開発04 5分では分からないTypeScriptのなんとか
PPTX
TypeScript 1.0 Released!
PDF
で、次は何がくるの? - 第2回 TIS Matsuri
TypeScript 独習会
Typescriptの中のこと(浅め)
TypeScriptはいいぞ
Google Glassでできること XE12版 最新開発情報 Mirror API & GDK
Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
IDEALIZE YOU
渋谷JVM#1 Immutable時代のプログラミング言語 Clojure
WebStormでできること
Win32 APIをてなずけよう
JavaScriptで味わう! 関数型プログラミングのメリット!!
Nespのコード生成
ちゃんとした C# プログラムを書けるようになる実践的な方法~ Visual Studio を使った 高品質・低コスト・保守性の高い開発
パターンでわかる! .NET Coreの非同期処理
JavaScript MVC入門
continuatioN Linking
LT駆動開発04 5分では分からないTypeScriptのなんとか
TypeScript 1.0 Released!
で、次は何がくるの? - 第2回 TIS Matsuri
Ad

Similar to 3日時間をもらったのでTypeScriptを触ってみた (20)

PDF
ちゃんとWeb会議スライド『Coffee script』
PDF
サーバサイドエンジニアが 1年間まじめにSPAやってみた
PDF
TypeScriptへの入口
PPTX
Anders Hejlsberg Q & A
PPTX
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
PDF
TypeScript and Visual Studio Code
PDF
TypeScript で型を上手く使う試み.pdf
PPTX
TypeScriptハンズオン第1回テキスト
PPTX
ゲーム組み込み用スクリプト言語を作ってみた
PDF
TypeScript vs flow
PDF
RakSulのInternal API開発で gRPCを導入した話
PDF
Deploy TypeScript with CodePipeline in Fargate
PPTX
プログラミング初心者に ECMAScript(JavaScript) を最初の言語として勧めるべき? Meguro es6
PPTX
C# 7.2 の新機能
PDF
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
PPTX
The evolution of c#
PDF
Java scriptの進化
PDF
クライアントサイドjavascript簡単紹介
PDF
TypeScript補完計画 for Sublime Text 2
ODP
プログラミング言語Cyanの紹介
ちゃんとWeb会議スライド『Coffee script』
サーバサイドエンジニアが 1年間まじめにSPAやってみた
TypeScriptへの入口
Anders Hejlsberg Q & A
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
TypeScript and Visual Studio Code
TypeScript で型を上手く使う試み.pdf
TypeScriptハンズオン第1回テキスト
ゲーム組み込み用スクリプト言語を作ってみた
TypeScript vs flow
RakSulのInternal API開発で gRPCを導入した話
Deploy TypeScript with CodePipeline in Fargate
プログラミング初心者に ECMAScript(JavaScript) を最初の言語として勧めるべき? Meguro es6
C# 7.2 の新機能
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
The evolution of c#
Java scriptの進化
クライアントサイドjavascript簡単紹介
TypeScript補完計画 for Sublime Text 2
プログラミング言語Cyanの紹介
Ad

3日時間をもらったのでTypeScriptを触ってみた