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
5
2.4k
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
880
Pros and Cons で考える Vue 2 Composition API
mascii
4
940
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
450
TypeScript で Optional Chaining を使ってみた
mascii
1
630
Vue.jsでCSS Modulesを使ってみた
mascii
0
120
不変量
mascii
1
110
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.1k
JavaScriptのバージョンの話
mascii
1
2k
あなたのお家に眠るラズパイを救出したい
mascii
4
2.9k
Other Decks in Programming
See All in Programming
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
最近追加した型の紹介とその振り返り
aki19035vc
0
180
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
CSC307 Lecture 11
javiergs
PRO
0
240
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
英語
s_shimotori
1
220
継続的な活動で築く地方エンジニアの道
myamashii
2
360
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
AHC035解説
terryu16
0
720
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
48
13k
How to Ace a Technical Interview
jacobian
274
23k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Done Done
chrislema
179
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Side Projects
sachag
451
42k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Fireside Chat
paigeccino
25
2.8k
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が入っている環境なら、簡単に型テストを 書き始められる • 型テストがあると、型のリファクタリングや機能追 加をやりやすくなる