TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
56
型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部 @vvakame
-
Upload
masahiro-wakame -
Category
Technology
-
view
6.067 -
download
0
description
http://vshtc.doorkeeper.jp/events/11407
Transcript of TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
型定義ファイルのある開発TypeScript勉強会 VSハッカソン倶楽部
@vvakame
わかめ まさひろ
GAE
Android
TypeScript
AngularJS
@v vakame
• Google App Engine!• Android!• Google Apps!などなど、!
!
!
技術に特化した会社です。!Microsoft?
宣伝
TypeScriptリファレンス
紙･電子共 好評発売中！
Amazon(紙, Kindle)達人出版会(PDF)
TypeScriptの特長• TypeScriptはJavaScriptを拡張した言語!
• 静的型付け！!
• ECMAScript 6規格の文法を先取り☆!
• 読みやすい変換後JavaScript!
• Java, C# とかに優しい言語仕様!• 長いコンパイル時間 最も現実的なaltJSだ！
TypeScriptといえば…
静的型付
0
12.5
25
37.5
50
人数
型は必要 型は不要
型は必要！
出典:民明書房 - 激烈！天下一altJS武闘会 - より
Why needs 型？• 多くのエラーをコンパイル時に!
• 実行時エラーはもううんざり！!• 間違った使い方は不可能に!
• リファクタリングも安心確実！!• コンパイルが通ればある程度動く！!
• IDEなどのサポートが得られやすい
JS完全互換！
TypeScriptでの型
• primitive type 御三家!
• number!• string!• boolean
JS完全互換！
TypeScriptでの型
• 忘れちゃならない!
• any!• void
JS完全互換！
TypeScriptでの型• class!
• 実体も型も存在するイケメン!
• interface!• 地味 型しか存在しない!
• object type literal!• ↑TypeScriptリファレンス参照!
• 雑に説明すると即興interfacemodule君も一応いる
TypeScriptでの型
• ECMAScriptにいるやつ!
• DateとかArrayとかFunctionとか!• ブラウザにいるやつ!
• windowとかDOM系のやつとか↑結局classかinterface
TypeScript & JavaScript
• JSのライブラリが使いたい！!
• jQuery!• AngularJS!• mocha!• etc…!
• お任せください！
@Neri78さんの 解説を思い出そう！
DefinitelyTyped
definitely/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
型定義ファイル .d.ts
Over 450!
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 ! isValid(): boolean;
既存JSに型を後付けするhttp://momentjs.com/
goo.gl/9QnuC3
型定義ファイルの探し方
DefinitelyTypedで探す• github.com/borisyankov/DefinitelyTyped!
• GitHub!• t キーで頑張る!
• tsd!• definitelytyped.org/tsd/!
• NuGet!• www.nuget.org/packages?
q=DefinitelyTyped
世界貢献！
.d.ts 利用例• FunScript!
• F# to JavaScript!
• Scala.js!
• scala.js ts importer!
• dts-parser!
• TypedCoffeeScript by mizchi
in Pure JavaScript
• WebStorm (JetBrains社のIDE)!
• 通常のJSコード書きにも使える！!
• JavaScript > Libraries > Download > TypeScript community stubs
.d.ts = 大統一型定義ファイル
•つよい！!
•すごい！!
•やばい！
是非• TypeScript固有の事情が入るよね!
• WebIDLとか使ったほうがよくね？!
• しかし、多くの人は今すぐ使いたい!
• DefinitelyTyped、450もあるらしっすよ!
• ↑大正義より良い解が見つかるといいな
まとめ↓ JavaScriptより強い安全性を求め!
↓ 静的型チェックのない世界殺すマン!
↓ しかし既存JS資産は活用したい…!
↓ 型定義ファイル、必要です！!
↓ それ、DefinitelyTypedにあるよ
.d.ts 作る？
Pros/Cons• Pros!
• ライブラリへの理解が深まる!
• 後の安心が手に入る!
• Cons!
• 作業前工数が膨れ上がる!
• 書き方を学習するのが大変みんなはどう思うかな？
Pros/Cons• Pros!
• ライブラリへの理解が深まる!
• 後の安心が手に入る!
• Cons!
• 作業前工数が膨れ上がる!
• 書き方を学習するのが大変
作業工数？
弊社 No.2 TypeScripter
Grapswizさんの感想
作業工数？• ぶっちゃけ趣味プログラミング中ではマジであります。!
• 仕事の場合は最低限使える範囲をパパっとやって、終わりっ！!
• 型定義貯金!
• キッチリやると後々デバッグ時間の削減という形で還元されてくる
書き方の学習• 基本はTypeScriptを踏襲!
• トップレベルには declare をつける!
• 実装を書けないことに留意!
• モジュールの書き方!
• 内部モジュール!
• 外部モジュール
TypeScript 難易度の頂
.d.ts 作る！！
How to write .d.ts?
• 普通にライブラリ使う時と変わらない!
• APIリファレンスを読む!
• 実装を読む!
• 実行してみて確かめる
時間余ったら実演します
やってはいけない！
• 無駄に凝る
てきとーにやろ
結論
• コンパイルが通ればいいんだよ！
ただし—noImplicitAny 非対応はギルティ
向き・不向き• TypeScriptに不向きなライブラリもある!
• 独自のOOPの仕組みを持つもの!
• データ入れるとクラスが返るやつ!
• 主にDBのORマッパが多い!
• Sequelizeの例◯◯言語にある☓☓があれば解決するのに…
という悩み、結構ある
避けないほうがいい知識• 内部・外部モジュール!
• TypeScriptリファレンス参照!
• teppeisさんのBlog参照!
• www.typescriptlang.org/Handbook!
• 誰か許可とって翻訳してください＞＜!
• Class Decomposition が特に重要
anyを使う
• とりあえずコンパイル通る！!
• A. まずany、後から詳細化していく!
作れる = 正義！
anyを使う
• とりあえずコンパイル通る！!
• A. まずany、後から詳細化していく!
• B. 利用側コードに必要なとこ作る
PRはBの方が送りやすいdeclare var $: any; ←流石にコレは困る
new operator
• new 演算子を使う対象!
• class!
• interface (class decomposition)!
• 具体例!
• goo.gl/qD60Vi
interfaceが主流？
new operator• 何故クラスを分解するのか？!
• interfaceは後付で拡張できる!
• だいたいJavaScriptのせい!
• Aライブラリを勝手に拡張する
Bライブラリ!
• ↑interfaceじゃないと対応できない
new operator• interfaceの利点!
• 別ライブラリの拡張に耐える！!
• 具体例 goo.gl/nHMTqu!
• interfaceの欠点!
• 継承できない！!
• 具体例 goo.gl/QOO8yl
用途を考え classの利用を検討
命名規則• JSの流儀に従う!
• クラス名は先頭大文字 Sample!• モジュール名もかな…!
• 変数、メソッド キャメルケース fooBar!
• インタフェースは先頭I付き ISample!
• ↑賛否両論 ちょとおすすめ ぐらいC#erはメソッド先頭大文字多いですね
それはどうかと思うけど…
オブジェクト型リテラル
• キッチリ理解すると柔軟な表現が可能!
• これだけで1時間話せるレベル!
• TSチートシート goo.gl/QiXe8t!
• TSリファレンス goo.gl/G9gzeu
非インスタンス化モジュール• 型定義を作る時の便利なテクニック！!• 具体例 goo.gl/xVNmYD!• わかめの後悔!
• non instantiated module!• 非インスタンス化モジュールと訳した!
• 幽霊モジュール goo.gl/vlQGUF!
• ↑わかりやすい… DTコミッタ
@basarat 命名
オーバーロード
• any, Function, …args: any[] からの脱皮!
• より優れたコンパイル時エラー検出!
• 様々な引数に対応する!
• 文字列リテラルによる特殊化!
• 引数によって異なる型を返す
pull requestを送ろう！
作ったものは共有しよう
• 他の人が楽できるぞ！!
• 自分が楽できるのも誰かのおかげ！!
• 誰かが完成させてくれるかも？!
• 誰かがバグ直してくれるかも？
主に下2つが重要
pull request?
• GitHubにはpull requestがある!
• PRと略されることも!
• fork→commit→push→PR！!
• GitHub実践入門が良書らしい
PR童貞が許されるのは高校生までだよね～ｗ
具体的に
• Qiitaに解説記事書いた!
• DefinitelyTyped公式解説もある!
• コミッタに日本人がいる→!
• ↑当然日本語が喋れる!
• ちなみに英語は不自由
ん？• もし、あなたがPR未経験なら…!
• DefinitelyTypedにPRを出そう！!
• たくさんの型定義の集合!
• 全体を把握しなくても追加できる！!
• 1文字だけの修正のPRも大歓迎！
Live Writing
自分用メモ antigen theme imajes
⌘ Shift + ⌘ Shift 0
• 適当なライブラリを調べて書く!
• Bacon.js 良さそう!
• その場で選んでもらう？どっちにしよ？ 3分で決めよう！
かもん！しつもん！
だいたい全部書いてある
1時間で喋りきれない事 多すぎんよ～ｗｗ
Amazon(紙, Kindle)達人出版会(PDF)
