実践的な数値型ユーティリティ
型レベルの算術を範囲や長さの制約に適用します。
「実践的な数値型ユーティリティ」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
理論からツールへ
算術と比較は、実用的なユーティリティとしてまとめると役立ちます。範囲、長さを強制する配列、範囲内に制限されたインデックスなどです。このレッスンでは、基本部品を実際のコードで使える形にします。
type BuildTuple<N extends number, Acc extends unknown[] = []> =
Acc["length"] extends N ? Acc : BuildTuple<N, [...Acc, unknown]>;0 から N-1 を列挙する
基本となるヘルパーを使うと、0からN-1までのすべての数値からなるユニオン型を生成できます。長さNのタプルを構築し、すべてのキーインデックスを読み取ります。
type Enumerate<N extends number, Acc extends number[] = []> =
Acc["length"] extends N
? Acc[number]
: Enumerate<N, [...Acc, Acc["length"]]>;
type A = Enumerate<4>; // 0 | 1 | 2 | 3範囲型
Range<Start, End>は、StartからEnd - 1までの数値を生成します。Enumerate<End>を取得し、Start未満の値を除外します。
type Range<S extends number, E extends number> =
Exclude<Enumerate<E>, Enumerate<S>>;
type A = Range<2, 6>; // 2 | 3 | 4 | 5パラメーターを制約する
範囲を使って、有効な引数を制限できます。小さなサイコロの出目だけを受け取る関数には、Range<1, 7>を指定すれば、コンパイラーが範囲外の値を拒否します。
type DiceFace = Range<1, 7>; // 1|2|3|4|5|6
declare function roll(face: DiceFace): void;
roll(4); // ok
// roll(8); // compile error配列の長さを強制する
固定長配列型を使うと、サイズが正しくない配列を拒否できます。再帰を使って、型Tの要素をN個持つタプルを構築します。
type FixedArray<T, N extends number, Acc extends T[] = []> =
Acc["length"] extends N ? Acc : FixedArray<T, N, [...Acc, T]>;
type RGB = FixedArray<number, 3>; // [number, number, number]固定長を使う
これで誤った使い方がコンパイルエラーになります。3Dの点は、座標を正確に3つ持たなければなりません。
type Vec3 = FixedArray<number, 3>;
const v: Vec3 = [1, 2, 3]; // ok
// const w: Vec3 = [1, 2]; // error: missing elementインデックスを範囲内に制限する
インデックス型を、有効な配列位置に制限できます。タプルの長さとEnumerateを組み合わせることで、範囲内のインデックスだけを受け付けます。
type Indices<T extends readonly unknown[]> = Enumerate<T["length"]>;
type Arr = readonly ["a", "b", "c"];
type I = Indices<Arr>; // 0 | 1 | 2安全なインデックスアクセス
有効なインデックス型を使うと、インデックス引数が範囲外にならない getter を記述でき、off-by-one エラーをコンパイル時に検出できます。
declare function at<T extends readonly unknown[]>(
arr: T,
i: Indices<T>
): T[Indices<T>];
const x = at(["a", "b", "c"] as const, 2); // ok
// at(["a", "b", "c"] as const, 3); // errorMin と Max のヘルパー
比較を上に重ねることで、2つの数値の大きい方または小さい方を選べます。値を範囲内に制限する場合に便利です。
type Max<A extends number, B extends number> =
GreaterThan<A, B> extends true ? A : B;
type Min<A extends number, B extends number> =
GreaterThan<A, B> extends true ? B : A;
type X = Max<3, 8>; // 8
type Y = Min<3, 8>; // 3ユーティリティを組み合わせる
これらのユーティリティは組み合わせて使えます。範囲内の長さを持つタプル、配列の範囲内に制限されたインデックス、Min と Max で上下を制限した値など、それぞれが小さく再利用可能な型レベル関数です。
type ValidPort = Range<1, 4>; // 1 | 2 | 3 (toy example)
type Slots = FixedArray<ValidPort, 2>; // [1|2|3, 1|2|3]使う価値がある場面
型レベルの算術は、RGBタプル、サイコロの面、ボード上の座標、プロトコルのフィールドサイズなど、小さく固定された上限に適しています。再帰の制限や複雑さが安全性を上回る大きな数値や動的な数値では、使う価値がありません。上限が小さく、その保証に価値がある場合に使いましょう。
type Board = FixedArray<FixedArray<0 | 1, 3>, 3>; // 3x3 grid理解度チェック
実用的な数値ユーティリティについて、理解度を確認しましょう。
まとめ
数値型ユーティリティの小さなライブラリを構築しました。
EnumerateとRangeは数値のユニオン型を生成します。FixedArrayは正確な長さを強制します。Indicesはアクセスを有効な位置に制限します。Min/Maxは値の上下限を設定します。
小さく固定された上限に対して使いましょう。次のコース23では、高カインド型をシミュレートします。
よくある質問
「実践的な数値型ユーティリティ」レッスンは無料ですか?
はい。「実践的な数値型ユーティリティ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「実践的な数値型ユーティリティ」で何を学びますか?
型レベルの算術を範囲や長さの制約に適用します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「実践的な数値型ユーティリティ」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか?
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- タプルの長さによるカウント
- 型レベルの加算と減算
- 型レベルの比較
- 実践的な数値型ユーティリティ