TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部

型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部 @vvakame

わかめまさひろ GAE Android TypeScript AngularJS @vvakame

• Google App Engine! • Android! • Google Apps! などなど、! ! ! 技術に特化した会社です。! Microsoft?

宣伝 TypeScriptリファレンス紙･電子共好評発売中！ Amazon(紙, Kindle) 達人出版会(PDF)

おさらい:TypeScriptの特長 TypeScriptチートシート goo.gl/QiXe8t

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リファレンス参照! • 雑に説明すると即興interface module君も一応いる

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.org github.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 ! 既存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とか使ったほうがよくね？! • しかし、多くの人は今すぐ使いたい! • DeﬁnitelyTyped、450もあるらしっすよ! • ↑大正義より良い解が見つかるといいな

まとめ ↓ JavaScriptより強い安全性を求め! ↓ 静的型チェックのない世界殺すマン! ↓ しかし既存JS資産は活用したい…! ↓ 型定義ファイル、必要です！! ↓ それ、DeﬁnitelyTypedにあるよ

.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 命名

関数とモジュールの定義統合 • 具体例 goo.gl/F7tvg6! • なんでこんなことできるの？! • JavaScriptでできるから(たぶん

オーバーロード • any, Function, …args: any[] からの脱皮! • より優れたコンパイル時エラー検出! • 様々な引数に対応する! • 文字列リテラルによる特殊化! • 引数によって異なる型を返す

pull requestを送ろう！

作ったものは共有しよう • 他の人が楽できるぞ！! • 自分が楽できるのも誰かのおかげ！! • 誰かが完成させてくれるかも？! • 誰かがバグ直してくれるかも？主に下2つが重要

pull request? • GitHubにはpull requestがある! • PRと略されることも! • fork→commit→push→PR！! • GitHub実践入門が良書らしい PR童貞が許されるのは高校生までだよね∼ｗ

具体的に • Qiitaに解説記事書いた! • DeﬁnitelyTyped公式解説もある! • コミッタに日本人がいる→! • ↑当然日本語が喋れる! • ちなみに英語は不自由

ん？ • もし、あなたがPR未経験なら…! • DeﬁnitelyTypedにPRを出そう！! • たくさんの型定義の集合! • 全体を把握しなくても追加できる！! • 1文字だけの修正のPRも大歓迎！

Live Writing 自分用メモ antigen theme imajes ⌘ Shift + ⌘ Shift 0

• 適当なライブラリを調べて書く! • Bacon.js 良さそう! • その場で選んでもらう？どっちにしよ？ 3分で決めよう！

かもん！しつもん！

だいたい全部書いてある 1時間で喋りきれない事多すぎんよ∼ｗｗ Amazon(紙, Kindle) 達人出版会(PDF)

TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部

by Masahiro Wakame, Working at トップゲート

on Jun 14, 2014

Statistics

Views

Actions

1 Embed 25

Accessibility

Categories

Upload Details

Usage Rights

Report content

TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部 Presentation Transcript