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
Vitestを使った型テストの始め方
Search
Masaki Koyanagi
September 26, 2023
Programming
6
3k
Vitestを使った型テストの始め方
WeJS @ 42nd
https://wajs.connpass.com/event/293440/
Masaki Koyanagi
September 26, 2023
Tweet
Share
More Decks by Masaki Koyanagi
See All by Masaki Koyanagi
WebHID API でリングコン のセンサー値を取得してみた
mascii
1
1.1k
Pros and Cons で考える Vue 2 Composition API
mascii
4
1.1k
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
570
TypeScript で Optional Chaining を使ってみた
mascii
1
740
Vue.jsでCSS Modulesを使ってみた
mascii
0
140
不変量
mascii
1
200
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.4k
JavaScriptのバージョンの話
mascii
1
2.3k
あなたのお家に眠るラズパイを救出したい
mascii
4
3.1k
Other Decks in Programming
See All in Programming
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
contribution to astral-sh/uv
shunsock
0
490
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
100
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
Introduce Hono CLI
yusukebe
6
3.1k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.1k
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
480
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
780
Developer Joy - The New Paradigm
hollycummins
1
350
iOSでSVG画像を扱う
kishikawakatsumi
0
160
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
A Modern Web Designer's Workflow
chriscoyier
697
190k
RailsConf 2023
tenderlove
30
1.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
KATA
mclloyd
PRO
32
15k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Transcript
@mascii_k WeJS 42nd @freee Vitestを使った 型テストの始め方
自己紹介 ますきー (X:@mascii_k) freee K.K. エンジニア / WeJS 運営メンバー 最近は
Go,TypeScript を書いています
テスト環境の準備
テスト環境の準備 • Vitestでランタイムのテストができていれば、追加パッ ケージのインストールは不要 • npm run typecheck で型テストをできるようにする ◦
package.json に以下を追加 { "scripts": { "typecheck": "vitest typecheck" } }
型テストを書いてみよう
テスト対象 • "user:Alice" のような文字列を key, value にパース するような関数を考える > parse("user:Alice")
{ key: 'user', value: 'Alice' } 実行例 function parse<T extends string, U extends string>(kv: `${T}:${U}`) { const [key, value] = kv.split(":"); return { key, value } as { key: T; value: U }; }
function parse<T extends string, U extends string>(kv: `${T}:${U}`) { const
[key, value] = kv.split(":"); return { key, value } as { key: T; value: U }; } テスト対象 • "user:Alice" のような文字列を key, value にパース するような関数を考える 関数のジェネリクス テンプレートリテラル型 型アサーション 配列の 分割代入 オブジェクトリテラルの 省略記法 オブジェクト型 黄: JavaScriptの記法 青: TypeScriptの型に関する記法
テストを書く test("parse", () => { expect(parse("user:Alice")) .toEqual({ key: "user", value:
"Alice", }); }); test("parse", () => { expectTypeOf(parse("user:Alice")) .toEqualTypeOf<{ key: "user"; value: "Alice"; }>(); }); • *.test.ts に ランタイムのテスト を記述する • *.test-d.ts に 型テストを記述する
型テストの書き味 • Vitestを走らせなくても、テスト結果をリアルタイム に確認できる ◦ 慣れればランタイムのテストよりクイックに書けるかも?
活用例
活用例1: 複雑な戻り値型の関数 • 型テストを導入後、リファクタリングや新機能の追加が やりやすくなった function toObject<T extends Form>(form: T):
ToObjectOutput<T> { // etc... } type ToObjectOutput<T extends Form> = { [K in keyof T as T[K] extends PrivateField<any> | ((...args: any[]) => any) ? never : K] : T[K] extends Form ? ToObjectOutput<T[K]> : T[K] extends FieldWithPreferredType<infer U1, infer U2> ? U2 : T[K] extends FormsField<infer U> ? ToObjectOutput<ReturnType<U>>[] : never; }; vue-yup-form https://github.com/mascii/vue-yup-form
活用例2: Reactコンポーネントのprops • 「あるpropが指定された場合はchildrenを持てない」 といったテストを *.test-d.tsx で書くことができる import { Route
} from "react-router-dom"; test("Route", () => { assertType( // @ts-expect-error index 指定時は children を持てません <Route path="/settings" index> <Route path="/account" /> <Route path="/notifications" /> </Route> ); });
まとめ
まとめ • Vitestが入っている環境なら、簡単に型テストを 書き始められる • 型テストがあると、型のリファクタリングや機能追 加をやりやすくなる