Slide 1

Slide 1 text

@mascii_k WeJS 42nd @freee Vitestを使った 型テストの始め方

Slide 2

Slide 2 text

自己紹介 ますきー (X:@mascii_k) freee K.K. エンジニア / WeJS 運営メンバー 最近は Go,TypeScript を書いています

Slide 3

Slide 3 text

テスト環境の準備

Slide 4

Slide 4 text

テスト環境の準備 ● Vitestでランタイムのテストができていれば、追加パッ ケージのインストールは不要 ● npm run typecheck で型テストをできるようにする ○ package.json に以下を追加 { "scripts": { "typecheck": "vitest typecheck" } }

Slide 5

Slide 5 text

型テストを書いてみよう

Slide 6

Slide 6 text

テスト対象 ● "user:Alice" のような文字列を key, value にパース するような関数を考える > parse("user:Alice") { key: 'user', value: 'Alice' } 実行例 function parse(kv: `${T}:${U}`) { const [key, value] = kv.split(":"); return { key, value } as { key: T; value: U }; }

Slide 7

Slide 7 text

function parse(kv: `${T}:${U}`) { const [key, value] = kv.split(":"); return { key, value } as { key: T; value: U }; } テスト対象 ● "user:Alice" のような文字列を key, value にパース するような関数を考える 関数のジェネリクス テンプレートリテラル型 型アサーション 配列の 分割代入 オブジェクトリテラルの 省略記法 オブジェクト型 黄: JavaScriptの記法 青: TypeScriptの型に関する記法

Slide 8

Slide 8 text

テストを書く 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 に 型テストを記述する

Slide 9

Slide 9 text

型テストの書き味 ● Vitestを走らせなくても、テスト結果をリアルタイム に確認できる ○ 慣れればランタイムのテストよりクイックに書けるかも?

Slide 10

Slide 10 text

活用例

Slide 11

Slide 11 text

活用例1: 複雑な戻り値型の関数 ● 型テストを導入後、リファクタリングや新機能の追加が やりやすくなった function toObject(form: T): ToObjectOutput { // etc... } type ToObjectOutput = { [K in keyof T as T[K] extends PrivateField | ((...args: any[]) => any) ? never : K] : T[K] extends Form ? ToObjectOutput : T[K] extends FieldWithPreferredType ? U2 : T[K] extends FormsField ? ToObjectOutput>[] : never; }; vue-yup-form https://github.com/mascii/vue-yup-form

Slide 12

Slide 12 text

活用例2: Reactコンポーネントのprops ● 「あるpropが指定された場合はchildrenを持てない」 といったテストを *.test-d.tsx で書くことができる import { Route } from "react-router-dom"; test("Route", () => { assertType( // @ts-expect-error index 指定時は children を持てません ); });

Slide 13

Slide 13 text

まとめ

Slide 14

Slide 14 text

まとめ ● Vitestが入っている環境なら、簡単に型テストを 書き始められる ● 型テストがあると、型のリファクタリングや機能追 加をやりやすくなる