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
1.9k
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
Bun に LCOV 出力を実装した
exoego
2
130
terraform-provider-aws にプルリクして マージされるまで
exoego
2
370
ライブラリをパブリッシュせずにすばやく試す
exoego
2
250
esbuild 最適化芸人
exoego
3
1.8k
いい感じに AWS を組み合わせたビルディングブロックでアプリ開発を支援する / TdTechTalk 2022 11
exoego
0
650
Empowering App Dev by Nicely-Crafted High-Level AWS Components
exoego
0
51
月間数十億リクエストのマイクロサービスを支える JVM+AWS フルサーバーレス開発事例 / Now and Future of Fully Serverless development at Chatwork
exoego
1
710
Scala と AWS でフルサーバーレス開発事例 / How Chatworks uses Scala and Serverless
exoego
3
1.4k
忙しい Scala 開発者の超時間節約術 / Big Timesavers for Busy Scala Developers
exoego
1
1.1k
Other Decks in Programming
See All in Programming
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Open source software: how to live long and go far
gaelvaroquaux
0
620
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
時計仕掛けのCompose
mkeeda
1
280
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
We Have a Design System, Now What?
morganepeng
51
7.4k
A designer walks into a library…
pauljervisheath
205
24k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The Language of Interfaces
destraynor
156
24k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Scaling GitHub
holman
459
140k
The Invisible Side of Design
smashingmag
299
50k
Optimizing for Happiness
mojombo
376
70k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
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 は 覚悟があればいいぞ