配列を返す汎用関数｜コードで実践

TypeScript型設計：オブジェクト・状態・ジェネリクス

interface、optional property、readonly、union・リテラル型、型ガード、ジェネリクスを扱う全23レッスンの型設計コースです。Profile・Work・ApplicationStateを題材に、APIや画面で扱うデータと状態を壊れにくい型として設計します。既存JavaScriptプロジェクトの移行は次のコースで扱います。

入口も出口も T[] にする

前のレッスンの first は、T[] を受け取って T を返しました。返すものも配列なら、戻り値にも T[] と書きます。

TypeScript

function duplicateAll<T>(items: T[]): T[] {
  return items.concat(items);
}

T は 1 本の関数の中で何度出てきても同じ型を指します。だからこの 1 行で、受け取った配列と同じ要素型の配列が返る、という関係が伝わります。

TypeScript

const titles = ["プロフィールサイト", "自己紹介カード"];
const doubled = duplicateAll(titles); // string[] に決まる

途中の変数にも T を使う

関数の中で新しい配列を組み立てるときは、その変数にも T[] と書けます。

TypeScript

function withoutFirst<T>(items: T[]): T[] {
  const result: T[] = [];
  for (let i = 1; i < items.length; i++) {
    result.push(items[i]);
  }
  return result;
}

const result = [] とだけ書くと、TypeScript は要素の型を決められません。T[] と宣言しておけば、push に違う型を入れようとした時点でエラーになります。

元の配列を書き換えない

汎用関数は、いろいろな場所から呼ばれます。渡された配列そのものを並べ替えると、呼んだ側の配列まで変わってしまいます。

TypeScript

items.reverse();      // 渡された配列そのものが逆順になる
[...items].reverse(); // コピーを作ってから逆順にする

新しい配列を作って返す、を基本にしてください。汎用にするほど、呼び出し元が見えなくなるからです。

手を動かす

演習では、配列を逆順にして返す関数を書きます。型引数を 1 つ宣言して、引数と戻り値の両方に使ってください。処理の中身も途中までしか書いてありません。元の配列は変えずに、新しい配列を返します。

入口も出口も T[] にする

前のレッスンの first は、T[] を受け取って T を返しました。返すものも配列なら、戻り値にも T[] と書きます。

TypeScript

function duplicateAll<T>(items: T[]): T[] {
  return items.concat(items);
}

TypeScript

const titles = ["プロフィールサイト", "自己紹介カード"];
const doubled = duplicateAll(titles); // string[] に決まる

途中の変数にも T を使う

関数の中で新しい配列を組み立てるときは、その変数にも T[] と書けます。

TypeScript

function withoutFirst<T>(items: T[]): T[] {
  const result: T[] = [];
  for (let i = 1; i < items.length; i++) {
    result.push(items[i]);
  }
  return result;
}

元の配列を書き換えない

汎用関数は、いろいろな場所から呼ばれます。渡された配列そのものを並べ替えると、呼んだ側の配列まで変わってしまいます。

TypeScript

items.reverse();      // 渡された配列そのものが逆順になる
[...items].reverse(); // コピーを作ってから逆順にする

新しい配列を作って返す、を基本にしてください。汎用にするほど、呼び出し元が見えなくなるからです。

配列を返す汎用関数

入口も出口も T[] にする

途中の変数にも T を使う

元の配列を書き換えない

手を動かす

要件

入出力例

ヒント

メモ

配列を返す汎用関数

入口も出口も T[] にする

途中の変数にも T を使う

元の配列を書き換えない

手を動かす

要件

入出力例

ヒント

メモ