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
as(型アサーション)を書く前にできること
Search
maroKanatani
November 16, 2024
Programming
4.4k
11
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
as(型アサーション)を書く前にできること
TSKaigiKansai 2024
maroKanatani
November 16, 2024
More Decks by maroKanatani
See All by maroKanatani
App Router を実プロダクトで採用して見えてきた勘所をちょっとだけ紹介
marokanatani
3
2.3k
長期運用に耐えるフロントエンド目指して
marokanatani
2
46k
S3のキー設計でハマった話
marokanatani
0
1.6k
Other Decks in Programming
See All in Programming
アルゴリズムは何を圧縮しているのか ─ Haskell から育った「圧縮代数」というメンタルモデル
naoya
16
3.8k
壊れたパーサから始める関数型設計と構成的なパーサ #fp_matsuri
raiga0310
2
440
PHP Application における Kubernetes 内 gRPC 通信
ganchiku
0
580
torikago - Ruby::Boxで照らすモジュラモノリスの実行境界
se4weed
1
330
freee が目指す データ マネジメント戦略 AI-Ready 時代を支える 攻めのガバナンスとは
freee
PRO
0
250
そこに3びきプロダクトがいるじゃろう——生成AI時代における“価値が届かない理由”の構造
kosuket
0
400
自動化したのに回らないテスト運用の壁ーAI時代の品質責任と生産性
mfunaki
0
120
「人を評価する AI」の設計と実装
ryoyanara
0
150
Claude Code全社展開のためにやったことn選~プラグイン302個・コミッター271人を支えるために~
kenchan
4
1.3k
Detecting Compromised CI with eBPF and Cilium Tetragon
lizrice
0
130
全PRの83%がAIレビューだけでマージできるようになった開発組織はその後どうなったか
athug
1
1.4k
PHPだって関数型したい 〜できること、できないこと〜 / fp-in-php
jsoizo
1
270
Featured
See All Featured
Technical Leadership for Architectural Decision Making
baasie
3
460
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
119
120k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
3
1.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
63
45k
Deep Space Network (abreviated)
tonyrice
0
250
A designer walks into a library…
pauljervisheath
211
24k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
240
ラッコキーワード サービス紹介資料
rakko
1
4.2M
It's Worth the Effort
3n
188
29k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
630
Transcript
クラスメソッド株式会社 TSKaigi Kansai 2024.11.16 as(型アサーション)を書く前にできること maroKanatani
Classmethod 自己紹介 Frontend Ops ...etc maroKanatani ソフトウェアエンジニア ほぼフロントエンドエンジニア Japan AWS
All Certifications Engineer (2022~2024)
as 使ってますか?
TSのコードレビューをしていて感じること any の濫用はよくない という風潮はある程度広まってきた …しかし as の濫用については any ほど広まってなさそう 有効な場面もあるが、カジュアルに使われることも多い印象
(適切に使っている人には釈迦に説法な話かも) > 理解が浅い人が真似することで良くない使い方が割れ窓的に広がることがある
なぜ as の濫用は良くないのか コンパイラの挙動を上書きしてしまう コンパイラよりも型について理解している場合は as を用いても良い? > 力には責任が伴う 潜在的に
any と同様の副作用があるとも言える >(自分は理解しているつもりでも)チームの他のメンバーは違うかもしれない とはいえ全く使わないのは難しい > スコープを最小限に留める、コメントを書くなどして用法用量を守る あくまで「濫用」が良くない
こんなコード書いていませんか?
こんなコード書いていませんか? いずれもサブタイプ関係にあるスーパータイプを サブタイプで型アサーションしているのが良くない
こんなコード書いていませんか?(修正版)
こんなコード書いていませんか?(修正版) 基本的にはちゃんと型ガードする
タグ付きユニオンを使ったリファクタ
タグ付きユニオンを使ったリファクタ 個別のプロパティをチェックするサンプルが多いが 判別用のプロパティを生やすのも場合によっては有効
zod を使った Scheme First なリファクタ
zod を使った Scheme First なリファクタ 型はスキーマから作成 パースする
インターフェース境界での as には要注意
インターフェース境界での as には要注意 role が string型に推論されるため as を使っている
インターフェース境界での as には要注意 role が string型に推論されるため as を使っている プロパティが増減した場合に 型エラーが発生しない
インターフェース境界での as には要注意(修正版)
インターフェース境界での as には要注意(修正版) 型制約をつける or satisfies を使う
as が必要な例
as が必要な例 result をミュータブルな オブジェクトとして扱っている 参考: 敗北者のTypeScript (https://qiita.com/uhyo/items/aae57ba0734e36ee846a) as が有効なスコープが最小限に留まっている
as を書く前に 型ガードや型制約、satisfiesで済ませられないか? 必要になる根本的な原因は何か? 割れ窓的に広がらないように必要に応じてコメントも書こう 実態に合わせてきちんとメンテすることで読み手側の負荷はきっと下がる その as はなぜ必要なのか? 必要な場合はスコープを小さく
型はドキュメント
ご清聴ありがとうございました