mosya<TC> - 配列同士を結合する型を作ろう

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

問題

以下のようにJavaScript のArray.concat関数を型システムに実装します。この型は 2つの引数を受け取り、受け取ったイテレータの要素を順に含む新しい配列を返します。

type Result = Concat<[1], [2]>; // expected to be [1, 2]

前提知識

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

1. ジェネリクスを理解する
2. スプレッド演算子を理解する

ジェネリクスを理解する

まず、<T>というのは、ジェネリクスと呼ばれる機能です。ジェネリクスは、型をパラメータとして受け取ることができる機能です。

この受け取った値を使って、新しい型を生成することができます。
受け取った型を活用して、新しい型を生成することができるので、型の再利用性が高くなります。

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

type Foo<T> = {
  bar: T;
};

この型は、Tという型を受け取り、barというプロパティにTを代入する型です。

この型を使うと、以下のように型を指定することができます。

type FooString = Foo<string>; // { bar: string }
type FooNumber = Foo<number>; // { bar: number }

このようにジェネリクスは型を引数として受け取って、新しい型を生成することができます。

型の制約

Tはextendsをつけることで制約をつけることができます。
例えば、T extends stringとすると、Tはstring型かstring型を継承した型に制約されます。

スプレッド演算子を理解する

スプレッド演算子...は、配列やオブジェクトの中身を展開する演算子です。
これを使うと配列やオブジェクトの中身を展開して、新しい配列やオブジェクトを生成することができます。
実際の値だけでなく型にもこの演算子を使うことができます。

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

type Foo = [1, 2, 3];

type Bar = [...Foo, 4]; // [1, 2, 3, 4]

解答例

以上の前提知識を使うことで、以下のように解答することができます。
Tに対して、extendsをつけることで配列しか受け取れないように制約をかけるのがポイントです。

type Concat<
  T extends any[],
  U extends any[]
> = [...T, ...U];