Download as PDF, PPTX
![オーバーロード• any, Function, …args: any[] からの脱皮!• より優れたコンパイル時エラー検出!• 様々な引数に対応する!• 文字列リテラルによる特殊化!• 引数によって異なる型を返す](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fvs-hackathon-club-140614005525-phpapp01%2f75%2fTypeScript-TypeScript-VS-47-2048.jpg&f=jpg&w=240)
Uploaded byMasahiro Wakame
PDF, PPTX12,838 views
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
http://vshtc.doorkeeper.jp/events/11407
Recommended
More Related Content
What's hot
Viewers also liked
Similar to TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
More from Masahiro Wakame
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
- 1.
- 2.
- 3.• Google AppEngine!• Android!• Google Apps!などなど、!!!技術に特化した会社です。!Microsoft?
- 4.
- 5.
- 6.TypeScriptの特長• TypeScriptはJavaScriptを拡張した言語!• 静的型付け！!•ECMAScript 6規格の文法を先取り☆!• 読みやすい変換後JavaScript!• Java, C# とかに優しい言語仕様!• 長いコンパイル時間最も現実的なaltJSだ！
- 7.
- 8.静的型付012.52537.550人数型は必要 型は不要型は必要！出典:民明書房 -激烈！天下一altJS武闘会 - より
- 9.Why needs 型？•多くのエラーをコンパイル時に!• 実行時エラーはもううんざり！!• 間違った使い方は不可能に!• リファクタリングも安心確実！!• コンパイルが通ればある程度動く！!• IDEなどのサポートが得られやすいJS完全互換！
- 10.TypeScriptでの型• primitive type御三家!• number!• string!• booleanJS完全互換！
- 11.TypeScriptでの型• 忘れちゃならない!• any!•voidJS完全互換！
- 12.TypeScriptでの型• class!• 実体も型も存在するイケメン!•interface!• 地味 型しか存在しない!• object type literal!• ↑TypeScriptリファレンス参照!• 雑に説明すると即興interfacemodule君も一応いる
- 13.TypeScriptでの型• ECMAScriptにいるやつ!• DateとかArrayとかFunctionとか!•ブラウザにいるやつ!• windowとかDOM系のやつとか↑結局classかinterface
- 14.TypeScript & JavaScript•JSのライブラリが使いたい！!• jQuery!• AngularJS!• mocha!• etc…!• お任せください！@Neri78さんの解説を思い出そう！
- 15.DefinitelyTypeddefinitely/déf(ə)nətli/→define副詞more ∼; most∼2 明確に, はっきりと〈断る述べる決めるなど〉.type/ta p/語源は「打ってできた形型」(形)typical, (副)typically名詞複∼s/-s/1 C(ある特性を共有する)型, タイプ, 類型; 種類(kind2, sort)ウィズダム英和辞典よりI’m committer!definitelytyped.orggithub.com/borisyankov/DefinitelyTyped
- 16.
- 17.interface Moment {!format(format:string): string;format(): string;!fromNow(withoutSuffix?: boolean): string;!startOf(soort: string): Moment;endOf(soort: string): Moment;!add(input: MomentInput): Moment;add(soort: string, aantal: number): Moment;add(duration: Duration): Moment;subtract(input: MomentInput): Moment;subtract(soort: string, aantal: number): Moment;!calendar(): string;clone(): Moment;!valueOf(): number;!local(): Moment; // current date/time in local mode!utc(): Moment; // current date/time in UTC mode!既存JSに型を後付けするhttp://momentjs.com/goo.gl/9QnuC3
- 18.
- 19.DefinitelyTypedで探す• github.com/borisyankov/DefinitelyTyped!• GitHub!•t キーで頑張る!• tsd!• definitelytyped.org/tsd/!• NuGet!• www.nuget.org/packages?q=DefinitelyTyped
- 20.
- 21..d.ts 利用例• FunScript!•F# to JavaScript!• Scala.js!• scala.js ts importer!• dts-parser!• TypedCoffeeScript by mizchi
- 22.in Pure JavaScript•WebStorm (JetBrains社のIDE)!• 通常のJSコード書きにも使える！!• JavaScript > Libraries > Download > TypeScript community stubs
- 23.
- 24.是非• TypeScript固有の事情が入るよね!• WebIDLとか使ったほうがよくね？!•しかし、多くの人は今すぐ使いたい!• DefinitelyTyped、450もあるらしっすよ!• ↑大正義より良い解が見つかるといいな
- 25.まとめ↓ JavaScriptより強い安全性を求め!↓ 静的型チェックのない世界殺すマン!↓しかし既存JS資産は活用したい…!↓ 型定義ファイル、必要です！!↓ それ、DefinitelyTypedにあるよ
- 26.
- 27.Pros/Cons• Pros!• ライブラリへの理解が深まる!•後の安心が手に入る!• Cons!• 作業前工数が膨れ上がる!• 書き方を学習するのが大変みんなはどう思うかな？
- 28.Pros/Cons• Pros!• ライブラリへの理解が深まる!•後の安心が手に入る!• Cons!• 作業前工数が膨れ上がる!• 書き方を学習するのが大変
- 29.
- 30.作業工数？• ぶっちゃけ趣味プログラミング中ではマジであります。!• 仕事の場合は最低限使える範囲を パパっとやって、終わりっ！!•型定義貯金!• キッチリやると後々デバッグ時間の 削減という形で還元されてくる
- 31.書き方の学習• 基本はTypeScriptを踏襲!• トップレベルにはdeclare をつける!• 実装を書けないことに留意!• モジュールの書き方!• 内部モジュール!• 外部モジュールTypeScript難易度の頂
- 32.
- 33.How to write.d.ts?• 普通にライブラリ使う時と変わらない!• APIリファレンスを読む!• 実装を読む!• 実行してみて確かめる時間余ったら実演します
- 34.
- 35.
- 36.向き・不向き• TypeScriptに不向きなライブラリもある!• 独自のOOPの仕組みを持つもの!•データ入れるとクラスが返るやつ!• 主にDBのORマッパが多い!• Sequelizeの例⃝⃝言語にある☓☓があれば解決するのに…という悩み、結構ある
- 37.避けないほうがいい知識• 内部・外部モジュール!• TypeScriptリファレンス参照!•teppeisさんのBlog参照!• www.typescriptlang.org/Handbook!• 誰か許可とって翻訳してください＞＜!• Class Decomposition が特に重要
- 38.anyを使う• とりあえずコンパイル通る！!• A.まずany、後から詳細化していく!作れる = 正義！
- 39.anyを使う• とりあえずコンパイル通る！!• A.まずany、後から詳細化していく!• B. 利用側コードに必要なとこ作るPRはBの方が送りやすいdeclare var $: any; ←流石にコレは困る
- 40.new operator• new演算子を使う対象!• class!• interface (class decomposition)!• 具体例!• goo.gl/qD60Viinterfaceが主流？
- 41.new operator• 何故クラスを分解するのか？!•interfaceは後付で拡張できる!• だいたいJavaScriptのせい!• Aライブラリを勝手に拡張する Bライブラリ!• ↑interfaceじゃないと対応できない
- 42.new operator• interfaceの利点!•別ライブラリの拡張に耐える！!• 具体例 goo.gl/nHMTqu!• interfaceの欠点!• 継承できない！!• 具体例 goo.gl/QOO8yl用途を考えclassの利用を検討
- 43.命名規則• JSの流儀に従う!• クラス名は先頭大文字Sample!• モジュール名もかな…!• 変数、メソッド キャメルケース fooBar!• インタフェースは先頭I付き ISample!• ↑賛否両論 ちょとおすすめ ぐらいC#erはメソッド先頭大文字多いですねそれはどうかと思うけど…
- 44.オブジェクト型リテラル• キッチリ理解すると柔軟な表現が可能!• これだけで1時間話せるレベル!•TSチートシート goo.gl/QiXe8t!• TSリファレンス goo.gl/G9gzeu
- 45.非インスタンス化モジュール• 型定義を作る時の便利なテクニック！!• 具体例goo.gl/xVNmYD!• わかめの後悔!• non instantiated module!• 非インスタンス化モジュールと訳した!• 幽霊モジュール goo.gl/vlQGUF!• ↑わかりやすい… DTコミッタ@basarat 命名
- 46.関数とモジュールの定義統合• 具体例 goo.gl/F7tvg6!•なんでこんなことできるの？!• JavaScriptでできるから(たぶん
- 47.オーバーロード• any, Function,…args: any[] からの脱皮!• より優れたコンパイル時エラー検出!• 様々な引数に対応する!• 文字列リテラルによる特殊化!• 引数によって異なる型を返す
- 48.
- 49.作ったものは共有しよう• 他の人が楽できるぞ！!• 自分が楽できるのも誰かのおかげ！!•誰かが完成させてくれるかも？!• 誰かがバグ直してくれるかも？主に下2つが重要
- 50.pull request?• GitHubにはpullrequestがある!• PRと略されることも!• fork→commit→push→PR！!• GitHub実践入門が良書らしいPR童貞が許されるのは高校生までだよね∼ｗ
- 51.具体的に• Qiitaに解説記事書いた!• DefinitelyTyped公式解説もある!•コミッタに日本人がいる→!• ↑当然日本語が喋れる!• ちなみに英語は不自由
- 52.ん？• もし、あなたがPR未経験なら…!• DefinitelyTypedにPRを出そう！!•たくさんの型定義の集合!• 全体を把握しなくても追加できる！!• 1文字だけの修正のPRも大歓迎！
- 53.Live Writing自分用メモantigen themeimajes⌘ Shift +⌘ Shift 0
- 54.• 適当なライブラリを調べて書く!• Bacon.js良さそう!• その場で選んでもらう？どっちにしよ？3分で決めよう！
- 55.
- 56.