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.7k
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
960
Pros and Cons で考える Vue 2 Composition API
mascii
4
1.1k
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
530
TypeScript で Optional Chaining を使ってみた
mascii
1
700
Vue.jsでCSS Modulesを使ってみた
mascii
0
130
不変量
mascii
1
150
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.3k
JavaScriptのバージョンの話
mascii
1
2.2k
あなたのお家に眠るラズパイを救出したい
mascii
4
3k
Other Decks in Programming
See All in Programming
Formの複雑さに立ち向かう
bmthd
1
940
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
Rubyと自由とAIと
yotii23
6
1.8k
Ça bouge du côté des animations CSS !
goetter
2
160
GoとPHPのインターフェイスの違い
shimabox
2
210
はじめての Go * WASM *OCR
sgash708
1
110
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
41
16k
AIプログラミング雑キャッチアップ
yuheinakasaka
19
4.9k
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
19
4.1k
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
280
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Scaling GitHub
holman
459
140k
Code Reviewing Like a Champion
maltzj
521
39k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Statistics for Hackers
jakevdp
797
220k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
Rails Girls Zürich Keynote
gr2m
94
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
Site-Speed That Sticks
csswizardry
4
410
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
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が入っている環境なら、簡単に型テストを 書き始められる • 型テストがあると、型のリファクタリングや機能追 加をやりやすくなる