jQuery 対応ライブラリとTypeScript

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

自己紹介

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

@Neri78

Blog

アジェンダ

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

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

まとめ

TypeScript とJavaScript ライブラリの

カンケイ

外部のライブラリを使うには

• TypeScript で利用するための定義ファイル(declaration file)が必要

/// <reference path="typings/jquery/jquery.d.ts" />

class Greeter {

//...

}

js ファイルの参照

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 で探してみる

DemojQuery 使ってみた

商用コンポーネントをTypeScript で使って

みよう

本日の題材

開発ツール製品

Ignite UI コンポーネント

jQuery

jQuery UIjQuery Mobile

jQueryMobile ベース

コントロール

jQueryベースデータ

コンポーネント

jQueryUI

ベースコントロール

// ダイアログの生成$("#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 構文が生成、実行される

収録コンポーネント:一覧• データ グリッド

– 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 ベース

http://jp.igniteui.com

サンプルからの…

TypeScript で利用できる？

DemoLet’s try!

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現在

まとめ

まとめ

•型定義ファイル必要

•たぶん詳細は後のセッション

• Ignite UI で定義ファイルを提供

リソース

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/

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