2014 年 6 月 14 日に弊社 @Neri78 が VS ハッカソンで発表させていただいた内容です。

1. jQuery 対応ライブラリと
TypeScript
池原 大然
デベロッパー エバンジェリスト
インフラジスティックス・ジャパン株式会社
dikehara@infragistics.com

2. 自己紹介
池原 大然（いけはら だいぜん）
インフラジスティックス・ジャパン株式会社
デベロッパー エバンジェリスト
Microsoft MVP for Development Platforms
Client App Dev 2010/04 – 2015/03
@Neri78
Blog

3. アジェンダ
TypeScript と JavaScript ライブラリのカンケイ
商用コンポーネントを TypeScript で使ってみよう
まとめ

4. TypeScript と
JavaScript
ライブラリの
カンケイ

5. 外部のライブラリを使うには
• TypeScript で利用するための
定義ファイル(declaration file)が必要
/// <reference path="typings/jquery/jquery.d.ts" />
class Greeter {
//...
}
js ファイルの参照

6. How to Create / Get ?
• 解説（英語）
– http://www.typescriptlang.org/Handbook#writing-dts-files
• 言語仕様(英語)
– http://www.typescriptlang.org/Content/TypeScript%20Language%
20Specification.pdf
• DefinitelyTyped で探す
https://github.com/borisyankov/DefinitelyTyped
たぶん今日の後のセッションでやるんじゃないかな？
• NuGet で探してみる

7. Demo
jQuery 使ってみた

8. 商用コンポーネントを
TypeScript で使って
みよう

9. 本日の題材

10. 開発ツール製品

12. Ignite UI コンポーネント
jQuery
jQuery UI
jQuery
Mobile
jQuery
Mobile
ベース
コントロール
jQuery
ベース
データ
コンポーネント
jQuery
UI
ベース
コントロール

13. // ダイアログの生成
$("#dialog").igDialog({
state: "opened",
height: 460,
width: 440
});
@*ダイアログの生成*@
@(Html.Infragistics()
.Dialog("dialog")
.State(DialogState.Opened)
.Height("460")
.Width("440")
.Render()
)
MVC も OK!
スタンダードな jQuery
ASP.NET MVC を利用
Razor 構文
jQuery 構文が生成、
実行される

14. 収録コンポーネント:一覧
• データ グリッド
– Grid
– Hierarchical Grid
• OLAP ピボット
– Pivot Data Selector
– Pivot View
– Pivot Grid
• データ ビジュアリゼーション
– Data Chart
– Bullet Graph
– Pie Chart
– Linear Gauge
– Doughnut Chart
– Map
– Funnel Chart
– Barcode
– Radial Gauge
– Zoombar
– Sparkline
• レイアウト
– Layout Manager
– Tile Manager
– Splitter
• エディター
– Combo Box
– Editors
– Date Picker
– HTML Editor
• フレームワーク
– Infragistics Loader
– Data Source
– Templating Engine
– Infragistics Excel*
– Infragistics Word*
– Infragistics Document*
• 操作
– Tree
– Popover
– Dialog Window
– Rating
– File Upload
– Video Player
• モバイル
– List View
– Rating
– Button
– Check Box
– Check Box Group
– Collapsible
– Collapsible Set
– RadioButton Group
– SelectMenu
– Slider
– Toggle Switch
– TextBox
– Page
– PageContent
– PageFooter
– PageHeader
– Popup
– Link
– NavBar
*ASP.NET 用サーバー側コンポーネント
• jQuery ベース
• jQuery UI ベース
• jQuery Mobile ベース

15. http://jp.igniteui.com

16. サンプルからの…

17. TypeScript で
利用
で
き
る
？

18. Demo
Let’s try!

19. Ignite UI でのサポート状況
• 2012 年ごろからひっそりとサポート
– http://www.infragistics.com/community/blogs/angel_todorov/archive/2012/10/27/introd
ucing-typescript-support-for-ignite-ui.aspx
• 型定義ファイルを自動生成する仕組みを構築
• 注意
– 実案件で Ignite UI + TypeScript を利用って
聞かないので、日本での実績はナシ? 2014/06/14現在

20. まとめ

21. まとめ
• 型定義ファイル必要
• たぶん詳細は後のセッション
• Ignite UI で定義ファイルを提供

22. リソース
Writing .d.ts files
http://www.typescriptlang.org/Handbook#writing-dts-files
TypeScript Language Specs
http://www.typescriptlang.org/Content/TypeScript%20Language%20Specification.pdf
Ignite UI Sample
http://jp.igniteui.com
jQuery, XAML 対応製品を中心に紹介しているブログ
http://blogs.jp.infragistics.com/blogs/dikehara/

23. こちらもよろしく!
http://jp.infragistics.com/Ultimate