• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
 

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

on

  • 5,854 views

http://vshtc.doorkeeper.jp/events/11407

http://vshtc.doorkeeper.jp/events/11407

Statistics

Views

Total Views
5,854
Views on SlideShare
4,359
Embed Views
1,495

Actions

Likes
24
Downloads
25
Comments
0

6 Embeds 1,495

http://www.buildinsider.net 1195
https://twitter.com 287
http://s.deeeki.com 7
http://server01 3
http://pre-www.buildinsider.net 2
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 型定義ファイルのある開発 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とか使ったほうがよくね?! • しかし、多くの人は今すぐ使いたい! • 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 命名
    • 関数とモジュールの定義統合 • 具体例 goo.gl/F7tvg6! • なんでこんなことできるの?! • JavaScriptでできるから(たぶん
    • オーバーロード • any, Function, …args: any[] からの脱皮! • より優れたコンパイル時エラー検出! • 様々な引数に対応する! • 文字列リテラルによる特殊化! • 引数によって異なる型を返す
    • pull requestを送ろう!
    • 作ったものは共有しよう • 他の人が楽できるぞ!! • 自分が楽できるのも誰かのおかげ!! • 誰かが完成させてくれるかも?! • 誰かがバグ直してくれるかも? 主に下2つが重要
    • pull request? • GitHubにはpull requestがある! • PRと略されることも! • fork→commit→push→PR!! • GitHub実践入門が良書らしい PR童貞が許されるのは高校生までだよね∼w
    • 具体的に • Qiitaに解説記事書いた! • DefinitelyTyped公式解説もある! • コミッタに日本人がいる→! • ↑当然日本語が喋れる! • ちなみに英語は不自由
    • ん? • もし、あなたがPR未経験なら…! • DefinitelyTypedにPRを出そう!! • たくさんの型定義の集合! • 全体を把握しなくても追加できる!! • 1文字だけの修正のPRも大歓迎!
    • Live Writing 自分用メモ antigen theme imajes ⌘ Shift + ⌘ Shift 0
    • • 適当なライブラリを調べて書く! • Bacon.js 良さそう! • その場で選んでもらう? どっちにしよ? 3分で決めよう!
    • かもん!しつもん!
    • だいたい全部書いてある 1時間で喋りきれない事 多すぎんよ∼ww Amazon(紙, Kindle) 達人出版会(PDF)