Movatterモバイル変換


[0]ホーム

URL:


YK
Uploaded byYasushi Kato
28,110 views

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

Microsoft社の新言語TypeScriptについて社内の自主研究発表会で発表した内容です。対象バージョンは V0.9(2013年10月時点の最新)。比較対象としてCoffeeScript, Haxe, Dartなどにも触れています。

Embed presentation

Downloaded 84 times
3日時間をもらったのでTypeScriptを触ってみたイースト株式会社 コンテンツビジネス事業部 加藤靖初版 2013年10月10日最終更新 2013年10月15日
AGENDA1.TypeScriptとは1.概要2.視点2.TypeScriptの言語機能3.比較1.2.CoffeeScript3.Haxe4.4.C#Dartまとめ
前提知識 使用経験JavaScriptC#VisualStudio
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/FirefoxC#TypeScriptJavaScriptVisual Studio 201X
TypeScriptとVisual Studioの足並み2012/8/15Visual Studio 2012リリース2012/10/1TypeScript発表。同時にVS2012に対応。2013/6/20TypeScript Ver. 0.9リリース。大幅な機能強化。2013/6/26Visual Studio 2013Previewリリース2013/6/28TypeScript Ver. 0.9.0.1リリース2013/7/23TypeScript VS2013Preview対応2013/8/6TypeScript Ver. 0.9.1リリース。2013/8/21TypeScript Ver. 0.9.1.1リリース。2013/9/9Visual Studio 2013RCリリース2013/9/9TypeScript 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
クラス、インターフェースは慣れたものただしいくつか注意が必要TypeScriptJavaScript
継承、実現の記法が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 typingOcaml(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.tsjQuery, 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/refDarthttp://coffeescript.org/#languagehttps://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.pdfCoffeeScriptが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のみらしい。

Recommended

PPTX
TypeScriptをオススメする理由
PDF
jQuery 対応ライブラリと TypeScript
PDF
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
PDF
TypeScriptは明日から使うべき
PDF
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
PDF
TypeScript超入門
PDF
TypeScript 入門してみる
PDF
Visual Studioで始めるTypeScript開発入門
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
PPTX
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
PDF
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
PPTX
TypeScriptハンズオン第1回テキスト

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

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

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

PPTX
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
PDF
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
PPTX
TypeScriptハンズオン第1回テキスト
PDF
TypeScriptへの入口
PPTX
TypeScriptについて
PDF
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
PDF
TypeScript 勉強会
PDF
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
PDF
"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化
PDF
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
PDF
Type scriptのいいところ
PDF
TypeScript 言語処理系ことはじめ
PDF
DEV-011_TypeScript ~Any browser. Any host. Any OS. Open Source~
PDF
TypeScript 1.0 オーバービュー
PDF
TypeScript Hands-on
PDF
ng-japan 2015 TypeScript+AngularJS 1.3
PDF
TypeScript と Visual Studio Code
PPTX
Haxeとtype scriptの比較
PPTX
TypeScriptで作る型安全FirefoxOSアプリ
 
PDF
プログラミング勉強会0721
 
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScriptハンズオン第1回テキスト
TypeScriptへの入口
TypeScriptについて
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript 勉強会
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
Type scriptのいいところ
TypeScript 言語処理系ことはじめ
DEV-011_TypeScript ~Any browser. Any host. Any OS. Open Source~
TypeScript 1.0 オーバービュー
TypeScript Hands-on
ng-japan 2015 TypeScript+AngularJS 1.3
TypeScript と Visual Studio Code
Haxeとtype scriptの比較
TypeScriptで作る型安全FirefoxOSアプリ
 
プログラミング勉強会0721
 

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


[8]ページ先頭

©2009-2025 Movatter.jp