Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
第15回 HTML5ビギナーズ
#html5jbg
jQuery + TypeScript
やってみた
@320kawashima
河島 美津雄
HTML5ビギナーズ 部長
html5j スタッフ
株式会社フリーセル所属
TypeScript
http://www.typescriptlang.org/
お題
https://gist.github.com/funnythingz/9827773
※シンプルにTypeScriptの部分だけやります
まずは準備
npm -g install typescript
node.jsのパッケージをグローバルにインストール
TypeScriptの設定ファイル作
成
# 該当のディレクトまで移動
cd ディレクトリまでのパス
# 設定ファイルの作成
tsc --init
tsconfig.jsonが生成されます
TypeScript設定ファイルの内
容
{
"compilerOptions": {
"module": "amd",
"target": "es5",
"noImplicitAny": false,
"outFile": "dist/js/...
jQueryの型定義ファイルを用
意
TypeScriptでjavascriptライブラリを読み込んで実行する場合
TypeScript型定義ファイル(.d.ts)が必要
https://github.com/DefinitelyTyped/D...
コンパイル
tsc
まずは完成物を確認
https://github.com/320kawashima/TypeScript_for_beginner
jQueryだけで作ったコードを確認
今回やってみたのは
class
interfaces(Class Types)
Class
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello,...
Interface(Class Types)
interface ClockInterface {
currentTime: Date;
}
class Clock implements ClockInterface {
currentTime...
TypeScriptのコードを確認
2つのファイルを比較
Upcoming SlideShare
Loading in …5
×

jQuery+TypeScriptやってみた

488 views

Published on

第15回 HTML5ビギナーズ TypeScript入門 資料

Published in: Internet
  • Login to see the comments

  • Be the first to like this

jQuery+TypeScriptやってみた

  1. 1. 第15回 HTML5ビギナーズ #html5jbg
  2. 2. jQuery + TypeScript やってみた
  3. 3. @320kawashima 河島 美津雄 HTML5ビギナーズ 部長 html5j スタッフ 株式会社フリーセル所属
  4. 4. TypeScript http://www.typescriptlang.org/
  5. 5. お題 https://gist.github.com/funnythingz/9827773 ※シンプルにTypeScriptの部分だけやります
  6. 6. まずは準備 npm -g install typescript node.jsのパッケージをグローバルにインストール
  7. 7. TypeScriptの設定ファイル作 成 # 該当のディレクトまで移動 cd ディレクトリまでのパス # 設定ファイルの作成 tsc --init tsconfig.jsonが生成されます
  8. 8. TypeScript設定ファイルの内 容 { "compilerOptions": { "module": "amd", "target": "es5", "noImplicitAny": false, "outFile": "dist/js/common-typescript.js", "sourceMap": false }, "files": [ "src/ts/common-typescript.ts" ], "exclude": [ "node_modules" ] } https://www.typescriptlang.org/docs/handbook/compiler-options.html
  9. 9. jQueryの型定義ファイルを用 意 TypeScriptでjavascriptライブラリを読み込んで実行する場合 TypeScript型定義ファイル(.d.ts)が必要 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jquery/jquery.d.ts typescriptファイル、ここではcommon-typescript.tsの最初に記述 /// <reference path="jquery.d.ts" />
  10. 10. コンパイル tsc
  11. 11. まずは完成物を確認 https://github.com/320kawashima/TypeScript_for_beginner
  12. 12. jQueryだけで作ったコードを確認
  13. 13. 今回やってみたのは class interfaces(Class Types)
  14. 14. Class class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } let greeter = new Greeter("world"); Classとは、ある共通のものに対しての変数や関数を格納したもの。 Greeterというclassで、greetingというプロパティ、コンストラクタ、greetという メソッドを持っていて、インスタンスが生成された時点で中身を持ちます。引数は 型を明示すること。
  15. 15. Interface(Class Types) interface ClockInterface { currentTime: Date; } class Clock implements ClockInterface { currentTime: Date; constructor(h: number, m: number) { } } Intrefaceとは型を宣言した集合に名前がついたものです。 ClockInterfaceという名前のinterfaceで、Dateという型を持ったcurrentTimeがある ということが記載されています。
  16. 16. TypeScriptのコードを確認
  17. 17. 2つのファイルを比較

×