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
CSC305 Lecture 04
javiergs
PRO
0
250
CSC509 Lecture 06
javiergs
PRO
0
240
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
390
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
680
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
480
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.8k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
130
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
920
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
330
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
Being A Developer After 40
akosma
91
590k
A designer walks into a library…
pauljervisheath
209
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Building Applications with DynamoDB
mza
96
6.6k
Facilitating Awesome Meetings
lara
56
6.6k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
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が入っている環境なら、簡単に型テストを 書き始められる • 型テストがあると、型のリファクタリングや機能追 加をやりやすくなる