mosya<TC> - 文字列をUnion型に変換するStringToUnion<T>を実装しようの解説

この記事はmosya<TC>の問題の一つであるStringToUnion型の解説になります。

問題

受け取った文字列を Union 型に変換する型を実装します。

例えば以下のようなコードを満たすようにStringToUnion型を実装しましょう。

type Test = "123";
type Result = StringToUnion<Test>; // expected to be "1" | "2" | "3"

前提知識

この問題を解くにあたって型についての以下の知識を理解しておく必要があります。

1. Conditional Typesを理解する
2. inferを理解する
3. Template Literal Typesを理解する
4. 再帰的な型を理解する

Conditional Typesを理解する

Conditional Typesは、条件によって型を変更することができる機能です。

例えば、以下のような型が考えられます。

type Foo<T> = T extends string
  ? string
  : number;

この型は、Tがstring型を継承している場合はstring型を、そうでない場合はnumber型を返します。

このように、extendsを使って条件を指定することで、型を変更することができます。

inferを理解する

inferは、型を推論することができる機能です。

例えば、以下のような型が考えられます。

type ArrayItem<T> =
  T extends (infer R)[] ? R : never;

この型は、Tが配列の場合は、配列の中の型を返します。

以下のように使うことができます。

type Foo = ArrayItem<string[]>; // string

この場合、infer Rにはstring[]型が当てはまるので、Rはstring型に推論され、Rを返すのでstring型が返されます。
このように推論される型を取得するのにinferは役立ちます。

Template Literal Typesを理解する

Template Literal Typesは、文字列リテラルを使って型を作成することができる機能です。型を組み合わせて新しい文字列の型を作成することができます。

例えば、以下のような型が考えられます。

type Foo<T> = `${T} World`;

type HelloWorld = Foo<"Hello">; // "Hello World"

このように、文字列リテラルを使って型を作成することができます。

再帰的な型を理解する

再帰的な型は、自分自身を参照する型のことです。
例えば、以下のような型が考えられます。

type Tree<T> = {
  value: T;
  left: Tree<T>;
  right: Tree<T>;
};

この型は、Treeという型がvalueというプロパティを持ち、leftとrightというプロパティはTree型を持つという型です。

以下のような使用例が考えられます。

// 使用例
const node: Tree = {
  value: 1,
  left: {
    value: 2,
    left: null,
    right: null,
  },
  right: {
    value: 3,
    left: null,
    right: {
      value: 4,
      left: null,
      right: null,
    },
  },
};

このように、再帰的な型は繰り返し同じ型を再利用したい場合に便利です。

解答例

以上の知識を使って、以下のように解答することができます。

type StringToUnion<T extends string> =
  T extends `${infer F}${infer R}`
    ? F | StringToUnion<R>
    : never;

まず、Tが文字列リテラルであることを指定するためにextends stringを条件に指定します。
次に、inferを使って文字列リテラルを分割します。もし、Tが'123'の場合は、Fには'1'、Rには'23'が当てはまります。この時、Fは'1'という文字列リテラルに推論され、Rは'23'という文字列リテラルに推論されます。
'23'には、同じ処理を繰り返す必要があるので、再帰的にStringToUnionを呼び出します。