TypeScript の便利な型変形をなんとかして Scala.js で使う / Emulating TypeScript Utility Types in ScalaJS

by TATSUNO Yasuhiro

Slide 1

Slide 1 text

TypeScript の便利な型変形をなんとかして Scala.js で使う Tatsuno | exoego | 2020-04-16 | #typefesta

Slide 2

Slide 2 text

自己紹介長野県から参加してます Scala.js で GUI や AWS Lambda を書いて暮らしてます exoego exoego

Slide 3

Slide 3 text

今日言いたいこと3つ TypeScript には「型から型を作る関数」みたいな型、 Mapped Type があります Scala(.js) ではマクロで型を生成したり加工できます Mapped Type を Scala マクロでエミュレーションしてみたが微妙なので、Scala 強い人たすけて！

Slide 4

Slide 4 text

JS (JavaScript) が使われる場所多い Web やスマホアプリ、そのサーバー Web ブラウザの拡張 Google Apps Script、Office Scripts PC アプリ（electron）

Slide 5

Slide 5 text

でも JS はあまり書きたくない動的型付け言語なので、 • 数値渡すところに文字列渡しちゃったり • Object 型のキー名を TYPO しちゃったり動かしてもなかなか気づけなくて時間を浪費

Slide 6

Slide 6 text

そこで静的型付け Alt-JS (JS 代替言語) Haskell Elm OCaml Reason F# Fable Scala Scala.js 使い慣れた言語、ツールセットで、 JS をターゲットに開発できます元言語: Alt-JS:

Slide 7

Slide 7 text

型システムなど Scala 言語機能が使える • パターンマッチ • for内包表記 • 既存の型に安全にメソッドを追加 • 継承関係がなくても型が満たすべき制約を書ける（型クラス） • マクロでコードを自動生成（型プロバイダーなど） Scala ライブラリがけっこう使える Scala 対応 IDE/エディタで快適に開発 Scala.js ⇔ JS 相互呼出できる Scala.js の特徴

Slide 8

Slide 8 text

JS コードを型安全に呼ぶには開発では様々な外部の JS コードを使う • ランタイムの API: Web ブラウザ、Node.js… • フレームワーク: React、Vue、Angular … • 開発キット: Google Apps Script、Kintone、AWS… 幸い、Alt-JS 言語には、こうした外部の JS に型定義をつけて、型安全に呼び出せる仕組みが結構ある

Slide 9

Slide 9 text

型定義の例 (Scala.js)

Slide 10

Slide 10 text

こんな型定義をメンテするのは大変そこで…

Slide 11

Slide 11 text

本日も何度か出てきた、静的型付け Alt-JS 巨大なコミュニティが多数の JS ライブラリに TS 用型定義を整備している最近では、ライブラリ本体が型定義を提供したり、本体が TS で開発される事例も増えてきている

Slide 12

Slide 12 text

巨人（TypeScript）の肩に乗れ TypeScript 用型定義を別の言語に変換するツールを使えば、複雑な型定義を書く手間を大きく削減 !!!! Scala.js https://scalablytyped.org https://www.exoego.net/scala-js-ts-importer Fable https://github.com/fable-compiler/ts2fable Reason https://github.com/cristianoc/genType

Slide 13

Slide 13 text

ブラウザで試せます。★付けたり issue いただけると嬉しい https://www.exoego.net/scala-js-ts-importer

Slide 14

Slide 14 text

しかしそう簡単にはいかなかった！！

Slide 15

Slide 15 text

TypeScript の型システムはヤバい…

Slide 16

Slide 16 text

https://www.typescriptlang.org/docs/handbook/utility-types.html “ TypeScript は、よくある型変形 (type transformation) を手助けするいくつかの便利な型を提供します ”

Slide 17

Slide 17 text

TypeScript の型システムでは型を別の型に変形（型から別な型を作成）する関数のような型を定義できます。このように作られた型を TypeScript では Mapped Type と呼ぶようです。（TS詳しくないので間違ってたら教えてください）

Slide 18

Slide 18 text

1. Partial T のプロパティを省略可能にする title を省略使用箇所以降のコード片は typescriptlang.org より引用

Slide 19

Slide 19 text

2. Readonly T のプロパティを読取専用にする再代入をエラーに使用箇所

Slide 20

Slide 20 text

3. Pick T からプロパティ K だけ残した型を作る使用箇所 title と completed は元の Todo から引き継いでるリテラル型（プロパティ名）のユニオン型

Slide 21

Slide 21 text

4. Exclude U に代入可能なプロパティを T から除いた型を作る

Slide 22

Slide 22 text

5. keyof T keyof オペレータは、T のプロパティの集合を返すこれまでの型変形のいくつかは keyof を活用。このように作られた型が Mapped type

Slide 23

Slide 23 text

これで React のこ～んな型が完全に理解できますね…!?

Slide 24

Slide 24 text

さきほど Alt-JS の型定義変換ツールを紹介しましたが型変形/Mapped Type って他言語の型システムにどう対応させればいいの？

Slide 25

Slide 25 text

Scala.js でやってみよう

Slide 26

Slide 26 text

戦略 Scala 2 には型変形 / Mapped Type 相当はないが… マクロで AST を変形して型にプロパティを追加したり、新しい型を生成したりできる !! Scala マクロ作る勉強のネタにやってみよう !!

Slide 27

Slide 27 text

アノテーションマクロコンパイル後

Slide 28

Slide 28 text

アノテーションマクロコンパイル後除外

Slide 29

Slide 29 text

やってみた感想マクロおもしろいけど、Mapped Type の完全再現はムリそうな気がしてます… https://github.com/exoego/scalajs-util-types で開発してるので、使ってみたい人、改良してみたい方はおチカラを…!!! Scala 言語機能にも Mapped Type っぽいの欲しい !!! JS 関係なく便利そうです