Stranger Typings

NGK2017Bで発表したLT。

1. JSライブラリをScala.jsから使いやすくする型定義をラクに得る戦略
2. その戦略の障害となっている TypeScript の奇妙な型

の紹介。

Transcript

1. @smogami 2017-12-02 #NGK2017B
2. 冬の夜長に ストレンジャーシングス
3. 話者: @smogami 所属: JAWS-UG, FP in Scala読書会, 来栖川電算 職歴: 製造業系SIer 6年→ベンチャー 1.5年 業務: ScalaとAWSでSaaS開発
4. 本日のお話 1. JSに型をつけてScalaから呼ぶ 2. TypeScriptというaltJSの変な型
5. altJSって？ • 今日何度目だ「JS書きたくない」 • JSに代わる言語で書いたコードをJSに変換して、 ブラウザやnodejsなどで動かす仕組み • JSにはない便利機能を使えたり、JSの嫌なところ を意識せず書けたりするのがメリット • 古くはGWT（JavaでAjaxアプリ開発）
6. 色んなaltJS 動的型付け • CoffeeScript • ClojureScript 静的型付け • TypeScript • Haxe • Scala.js（私） • Elm • ocamljs 名古屋で 使われてる
7. Scala.js採用してる理由 1. 強力な型システムや言語機能 2. JavaやScalaの人材と資産の活用 3. JetBrains IDEの強力なサポート Scala/Scala.jsで製品開発・運用中
8. TypeScriptやScala.jsなどの 静的型付け系altJSの大きなメリット JSライブラリに型定義をつけることで • 型を間違えた引数を関数に与えたりすると、 IDEやエディタがすぐにエラーを教えてくれる • オブジェクトが持つメソッドや属性を入力補完 できて、すばやくミスなくコードを書ける Binding or Façade
9. Scala.jsと型定義: 有名どころあり • jQuery, React, Vue, Angular • D3, Three.js, highcharts, Paper.js, Velocity.js… • Google Maps, YouTube, WebRTC, moment.js… • https://www.scala-js.org/libraries/facades.html に詳しい
10. 静的型付け系altJSの悩みどころ • 有名ライブラリだと公式・コミュニティベースの 型定義が充実してきたが… • マイナーライブラリの型定義作るコスト • メチャクチャなオーバーロードだらけの便利関数 に型つけるつらさ 型安全の恩恵を得るには型定義メンテの代償が必要
11. できるだけラクに 型定義が欲しい!! エンジニア三大美徳 怠惰・短気・傲慢
12. JSライブラリにTypeScript用の型定義が普及してきた 巨人の肩に乗る
13. JSライブラリにTypeScript用の型定義が普及してきた ↑をScala.js用に変換するツール by Scala.js開発者 https://github.com/sjrd/scala-js-ts-importer 巨人の肩に乗る
14. JSライブラリにTypeScript用の型定義が普及してきた ↑をScala.js用に変換するツール by Scala.js開発者 https://github.com/sjrd/scala-js-ts-importer ↑をブラウザで手軽に試せるようにしました（実演） http://exoego.net/scala-js-ts-importer/ 巨人の肩に乗る
15. scala-js-ts-importerどうなの？ • 完璧ではないが十分使える。これベースに、より Scalaらしく書けるラッパーを作ると生産性高い • TypeScriptとScalaの型システムは一致しないので、 小一時間の手作業はどうしても必要 • TSが「JSに型つけるためにがんばり過ぎ」な所は サポートが追いついていない ここを何とかしたらScala.jsの未来も明るい
16. ほそぼそと改善が続いている Me
17. scala-js-ts-importerハッカソン https://scala-tokai.connpass.com/event/72650/ 日時：明日 12/3 (日) 10:00～18:00 場所：名古屋 来栖川電算, JR/地下鉄 鶴舞駅 特典：フリードリンク、ピザ or 回らない寿司（宅配） 現在参加者3名…興味湧いたらぜひ!!
18. 時間があったら TypeScriptの奇妙な型
19. こんなのどうやって Scala.jsに変換すれば いいんだ…
20. 奇妙1. Literal type ある特定のリテラル値である、というような型。 Scalaにも欲しい（Scala 3で入る予定がある） type EventName = "ready" | "click" | "submit" type TimeUnit = "day" | "hour" | "minute" | "s" | "ms" type HttpResponse = 100 | 200 | 404 | ... let name: EventName = "NGK" // error!!
21. 奇妙2. Type Predicate Union type（A または B、 A | B）のいずれかである ことを表せる特別なbooleanみたいなもの function isFish(pet: Fish | Bird): pet is Fish { return (<Fish>pet).swim !== undefined; } let pet = getSmallPet(); if ((<Fish>pet).swim) { (<Fish>pet).swim(); } else { (<Bird>pet).fly(); } if (isFish(pet)) { pet.swim(); } else { pet.fly(); } キャスト必要 キャスト不要 Type predicateを返すfunction=Type Guard
22. 奇妙3. Index type オブジェクトの持つメンバーを型安全に参照できる。 型TのIndex type＝メンバー名のstring literal typeのunion interface Person { name: string; age: number; location: string; } type K1 = keyof Person; // "name" | "age" | "location" type K2 = keyof Person[]; // "length" | "push" | "pop" | "concat" | …
23. 奇妙4. Indexed access type Index typeの双対（dual）。 メンバーの型をメンバーの名前で参照できる type P1 = Person["name"]; // string type P2 = Person["name" | "age"]; // string | number type P3 = string["charAt"]; // (pos: number) => string type P4 = Person["foo"]; // error !! let myName: P1 = 30; // error!!
24. 奇妙5. Mapped type Index typeとIndexed access typeを組み合わせることで 型TのメンバーPを加工した型をシンプルに定義できる type Nullable<T> = { [P in keyof T]: T[P] | null } type Partial<T> = { [P in keyof T]?: T[P] } type Proxy<T> = { get(): T; set(value: T): void; } type Proxify<T> = { [P in keyof T]: Proxy<T[P]>; }
25. まとめ • TypeScriptの型システムは、JavaScriptにとにかく型を つけようとがんばってる • TypeScript用の型定義をScala.js用に変換すると、比較 的ラクに型定義を得られる • 明日のscala-js-ts-importerハッカソン来てね！ https://scala-tokai.connpass.com/event/72650/ • NetflixのStranger Thingsオススメ！
26. 参考 • TypeScriptの高度な型 https://www.typescriptlang.org/docs/handbook/advance d-types.html • Scala.js用の型定義の代表例 http://www.scala-js.org/libraries/facades.html • Scala.js用型定義を集めたサイト https://definitelyscala.com/