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 で使う / Emulating TypeScript Utility Types in ScalaJS
Search
TATSUNO Yasuhiro
April 17, 2020
Programming
2
1.7k
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
いい感じに AWS を組み合わせたビルディングブロックでアプリ開発を支援する / TdTechTalk 2022 11
exoego
0
430
Empowering App Dev by Nicely-Crafted High-Level AWS Components
exoego
0
17
月間数十億リクエストのマイクロサービスを支える JVM+AWS フルサーバーレス開発事例 / Now and Future of Fully Serverless development at Chatwork
exoego
1
560
Scala と AWS でフルサーバーレス開発事例 / How Chatworks uses Scala and Serverless
exoego
3
1.3k
忙しい Scala 開発者の超時間節約術 / Big Timesavers for Busy Scala Developers
exoego
1
980
Lintでレビューをラクにしよう/ Easing Code Review with Lint for TypeScript
exoego
3
460
AIのビジネス利用を加速する教師データ作成の戦略 / Annotation Strategy to accelerate using AI for business
exoego
0
1.2k
SageMaker Ground Truthはどう使うべきか/When to use SageMaker Ground Truth
exoego
0
340
Serverless in Scala on Node.js
exoego
3
560
Other Decks in Programming
See All in Programming
Designing for tomorrow's programming workflows
honnibal
PRO
2
120
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
400
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
try! Swift Tokyo 初参加報告LT
hinakko2
0
210
PHPはいつから死んでいるかの調査
chiroruxx
1
340
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
160
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
Git Lint
bkuhlmann
4
750
ゆるい個人開発のススメ
kuroppe1819
10
970
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
210
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
840
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
The Language of Interfaces
destraynor
151
23k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Building Applications with DynamoDB
mza
88
5.6k
Gamification - CAS2011
davidbonilla
76
4.6k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
Designing the Hi-DPI Web
ddemaree
276
33k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Docker and Python
trallard
33
2.7k
What's in a price? How to price your products and services
michaelherold
237
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
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 は 覚悟があればいいぞ