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
2.9k
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
1k
Pros and Cons で考える Vue 2 Composition API
mascii
4
1.1k
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
550
TypeScript で Optional Chaining を使ってみた
mascii
1
730
Vue.jsでCSS Modulesを使ってみた
mascii
0
140
不変量
mascii
1
180
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.4k
JavaScriptのバージョンの話
mascii
1
2.3k
あなたのお家に眠るラズパイを救出したい
mascii
4
3k
Other Decks in Programming
See All in Programming
ふつうの技術スタックでアート作品を作ってみる
akira888
0
220
Create a website using Spatial Web
akkeylab
0
310
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
330
Team operations that are not burdened by SRE
kazatohiei
1
280
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
20250613-SSKMvol.15
diostray
0
100
Goで作る、開発・CI環境
sin392
0
180
PicoRuby on Rails
makicamel
2
110
PipeCDのプラグイン化で目指すところ
warashi
1
220
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
210
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
280
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Why Our Code Smells
bkeepers
PRO
337
57k
GitHub's CSS Performance
jonrohan
1031
460k
Designing Experiences People Love
moore
142
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Typedesign – Prime Four
hannesfritz
42
2.7k
RailsConf 2023
tenderlove
30
1.1k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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が入っている環境なら、簡単に型テストを 書き始められる • 型テストがあると、型のリファクタリングや機能追 加をやりやすくなる