Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScript の便利な型変形を なんとかして Scala.js で使う / Emula...
Search
TATSUNO Yasuhiro
April 17, 2020
Programming
2
2k
TypeScript の便利な型変形を なんとかして Scala.js で使う / Emulating TypeScript Utility Types in ScalaJS
https://opt.connpass.com/event/169724/
TATSUNO Yasuhiro
April 17, 2020
Tweet
Share
More Decks by TATSUNO Yasuhiro
See All by TATSUNO Yasuhiro
Scala 3 で GLSL のための c-like-for を実装してみた
exoego
1
590
Bun に LCOV 出力を実装した
exoego
2
230
terraform-provider-aws にプルリクして マージされるまで
exoego
2
430
ライブラリをパブリッシュせずにすばやく試す
exoego
2
290
esbuild 最適化芸人
exoego
3
2.1k
いい感じに AWS を組み合わせたビルディングブロックでアプリ開発を支援する / TdTechTalk 2022 11
exoego
0
750
Empowering App Dev by Nicely-Crafted High-Level AWS Components
exoego
0
79
月間数十億リクエストのマイクロサービスを支える JVM+AWS フルサーバーレス開発事例 / Now and Future of Fully Serverless development at Chatwork
exoego
1
760
Scala と AWS でフルサーバーレス開発事例 / How Chatworks uses Scala and Serverless
exoego
3
1.5k
Other Decks in Programming
See All in Programming
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
360
A2A プロトコルを試してみる
azukiazusa1
2
1.1k
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
400
5つのアンチパターンから学ぶLT設計
narihara
1
110
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
570
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
850
WindowInsetsだってテストしたい
ryunen344
1
190
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
180
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Scaling GitHub
holman
459
140k
Designing Experiences People Love
moore
142
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
The Language of Interfaces
destraynor
158
25k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
The Cult of Friendly URLs
andyhume
79
6.5k
Writing Fast Ruby
sferik
628
61k
Transcript
TypeScript の便利な型変形を なんとかして Scala.js で使う Tatsuno | exoego | 2020-04-16
| #typefesta
自己紹介 長野県から参加してます Scala.js で GUI や AWS Lambda を 書いて暮らしてます
exoego exoego
今日言いたいこと3つ TypeScript には「型から型を作る関数」みたいな型、 Mapped Type があります Scala(.js) ではマクロで型を生成したり加工できます Mapped Type
を Scala マクロでエミュレーションし てみたが微妙なので、Scala 強い人たすけて!
JS (JavaScript) が使われる場所多い Web やスマホアプリ、そのサーバー Web ブラウザの拡張 Google Apps Script、Office
Scripts PC アプリ(electron)
でも JS はあまり書きたくない 動的型付け言語なので、 • 数値渡すところに文字列渡しちゃったり • Object 型のキー名を TYPO
しちゃったり 動かしてもなかなか気づけなくて時間を浪費
そこで静的型付け Alt-JS (JS 代替言語) Haskell Elm OCaml Reason F# Fable
Scala Scala.js 使い慣れた言語、ツールセットで、 JS をターゲットに開発できます 元言語: Alt-JS:
型システムなど Scala 言語機能が使える • パターンマッチ • for内包表記 • 既存の型に安全にメソッドを追加 •
継承関係がなくても型が満たすべき制約を書ける(型クラス) • マクロでコードを自動生成(型プロバイダーなど) Scala ライブラリがけっこう使える Scala 対応 IDE/エディタで快適に開発 Scala.js ⇔ JS 相互呼出できる Scala.js の特徴
JS コードを型安全に呼ぶには 開発では様々な外部の JS コードを使う • ランタイムの API: Web ブラウザ、Node.js…
• フレームワーク: React、Vue、Angular … • 開発キット: Google Apps Script、Kintone、AWS… 幸い、Alt-JS 言語には、こうした外部の JS に型定義 をつけて、型安全に呼び出せる仕組みが結構ある
型定義の例 (Scala.js)
こんな型定義を メンテするのは大変 そこで…
本日も何度か出てきた、静的型付け Alt-JS 巨大なコミュニティが多数の JS ライブラリに TS 用 型定義を整備している 最近では、ライブラリ本体が型定義を提供したり、 本体が
TS で開発される事例も増えてきている
巨人(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
ブラウザで試せます。★付けたり issue いただけると嬉しい https://www.exoego.net/scala-js-ts-importer
しかし そう簡単には いかなかった!!
TypeScript の 型システムはヤバい…
https://www.typescriptlang.org/docs/handbook/utility-types.html “ TypeScript は、よくある 型変形 (type transformation) を手助けするいくつかの 便利な型を提供します ”
TypeScript の型システムでは 型を別の型に変形(型から別な型を作成) する関数のような型を定義できます。 このように作られた型を TypeScript では Mapped Type と呼ぶようです。
(TS詳しくないので間違ってたら教えてください)
1. Partial<T> T のプロパティを省略可能にする title を省略 使用箇所 以降のコード片は typescriptlang.org より引用
2. Readonly<T> T のプロパティを読取専用にする 再代入をエラーに 使用箇所
3. Pick<T, K> T から プロパティ K だけ残した型を作る 使用箇所 title
と completed は 元の Todo から引き継いでる リテラル型(プロパティ名) のユニオン型
4. Exclude<T, U> U に代入可能なプロパティを T から除いた型を作る
5. keyof T keyof オペレータは、T のプロパティの集合を返す これまでの型変形のいくつかは keyof を活用。このように作られ た型が
Mapped type
これで React のこ~んな型が 完全に理解できますね…!?
さきほど Alt-JS の型定義変換ツールを紹介しましたが 型変形/Mapped Type って 他言語の型システムに どう対応させればいいの?
Scala.js で やってみよう
戦略 Scala 2 には型変形 / Mapped Type 相当はないが… マクロで AST
を変形して型にプロパティを追加し たり、新しい型を生成したりできる !! Scala マクロ作る勉強のネタにやってみよう !!
アノテーション マクロ コンパイル後
アノテーション マクロ コンパイル後 除外
やってみた感想 マクロおもしろいけど、Mapped Type の完全再現は ムリそうな気がしてます… https://github.com/exoego/scalajs-util-types で開発 してるので、使ってみたい人、改良してみたい方は おチカラを…!!! Scala
言語機能にも Mapped Type っぽいの欲しい !!! JS 関係なく便利そうです
今日言いたいこと3つ TypeScript には「型から型を作る関数」みたいな型、 Mapped Type があります Scala(.js) ではマクロで型を生成したり加工できます Mapped Type
を Scala マクロでエミュレーションし てみたが微妙なので、Scala 強い人たすけて!
Scala.js は 覚悟があればいいぞ