TypeScriptでUnion Typesを使って複数の型を持つ配列を定義する方法

2024-04-02

TypeScriptで複数の型を持つ配列を定義する方法

複数の型を持つ配列の定義方法

Array<T> 型を使用する

Array<T>型は、要素が全て T 型である配列を表します。T には、number、string、boolean などのプリミティブ型や、オブジェクト型、タプル型など、様々な型を指定することができます。

// 数値のみの配列
const numbers: Array<number> = [1, 2, 3, 4, 5];

// 文字列のみの配列
const strings: Array<string> = ["Hello", "World"];

// オブジェクト型の配列
interface Person {
  name: string;
  age: number;
}

const people: Array<Person> = [
  { name: "John", age: 30 },
  { name: "Mary", age: 25 },
];

any[] 型を使用する

any[] 型は、要素がどのような型でも構わない配列を表します。これは、要素の型が事前にわからない場合や、様々な型の要素を格納したい場合に便利です。

// 要素の型が異なる配列
const mixedArray: any[] = [1, "Hello", true, { name: "John" }];

Union Types 型は、複数の型を組み合わせた型を表します。これは、要素が複数の型からいずれか 1 つである場合に便利です。

// 数値または文字列のみの配列
const numbersOrStrings: (number | string)[] = [1, 2, "Hello", "World"];

// null または undefined を含む配列
const nullableArray: (number | string | null | undefined)[] = [
  1,
  "Hello",
  null,
  undefined,
];

複数の型を持つ配列のメリット

複数のデータ型を扱うことができる
コードの可読性と保守性を向上させる
型安全性により、実行時エラーを防ぐ

複数の型を持つ配列の注意点

すべての要素が同じ型であるとは限らないため、コードを書く際には注意が必要
any[] 型は型安全性がないため、使用する場合は注意が必要

TypeScriptで複数の型を持つ配列を定義する方法について解説しました。複数の型を持つ配列は、様々なデータ型を扱う必要がある場合に非常に便利です。上記の解説を参考に、ぜひ活用してみてください。

Array<T> 型を使用する

// 数値のみの配列
const numbers: Array<number> = [1, 2, 3, 4, 5];

// 数値の合計を計算する関数
function sumNumbers(numbers: Array<number>): number {
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
}

// 関数を実行
const sum = sumNumbers(numbers);
console.log(sum); // 15

// 文字列のみの配列
const strings: Array<string> = ["Hello", "World"];

// 文字列を連結する関数
function concatenateStrings(strings: Array<string>): string {
  let result = "";
  for (const string of strings) {
    result += string;
  }
  return result;
}

// 関数を実行
const message = concatenateStrings(strings);
console.log(message); // Hello World

// オブジェクト型の配列
interface Person {
  name: string;
  age: number;
}

const people: Array<Person> = [
  { name: "John", age: 30 },
  { name: "Mary", age: 25 },
];

// 年齢の平均値を計算する関数
function calculateAverageAge(people: Array<Person>): number {
  let totalAge = 0;
  for (const person of people) {
    totalAge += person.age;
  }
  return totalAge / people.length;
}

// 関数を実行
const averageAge = calculateAverageAge(people);
console.log(averageAge); // 27.5

any[] 型を使用する

// 要素の型が異なる配列
const mixedArray: any[] = [1, "Hello", true, { name: "John" }];

// 配列の要素を出力する関数
function printMixedArray(mixedArray: any[]): void {
  for (const element of mixedArray) {
    console.log(element);
  }
}

// 関数を実行
printMixedArray(mixedArray);

// 1
// Hello
// true
// { name: 'John' }

Union Types 型を使用する

// 数値または文字列のみの配列
const numbersOrStrings: (number | string)[] = [1, 2, "Hello", "World"];

// 配列の要素を出力する関数
function printNumbersOrStrings(numbersOrStrings: (number | string)[]): void {
  for (const element of numbersOrStrings) {
    console.log(element);
  }
}

// 関数を実行
printNumbersOrStrings(numbersOrStrings);

// 1
// 2
// Hello
// World

// null または undefined を含む配列
const nullableArray: (number | string | null | undefined)[] = [
  1,
  "Hello",
  null,
  undefined,
];

// 配列の要素を出力する関数
function printNullableArray(nullableArray: (number | string | null | undefined)[]): void {
  for (const element of nullableArray) {
    console.log(element);
  }
}

// 関数を実行
printNullableArray(nullableArray);

// 1
// Hello
// null
// undefined

複数の型を持つ配列を定義する他の方法

interface を使用して、複数の型を持つオブジェクト型を定義することができます。

interface MyObject {
  name: string;
  age: number;
  // 好きな色 (string または null)
  favoriteColor: string | null;
}

// MyObject 型の配列
const objects: MyObject[] = [
  { name: "John", age: 30, favoriteColor: "red" },
  { name: "Mary", age: 25, favoriteColor: null },
];

enum Color {
  Red,
  Green,
  Blue,
}

// Color 型の配列
const colors: Color[] = [Color.Red, Color.Green, Color.Blue];

readonly 修飾子を使用して、配列の要素を変更できないようにすることができます。

const numbers: readonly number[] = [1, 2, 3, 4, 5];

// numbers[0] = 10; // エラー: 'numbers' は 'readonly' 型です

// 配列の要素へのアクセスは可能
console.log(numbers[0]); // 1

tuple 型を使用して、要素の型と順番が固定された配列を定義することができます。

type MyTuple = [string, number, boolean];

// MyTuple 型の配列
const tuple: MyTuple = ["Hello", 10, true];

// 要素へのアクセス
const name = tuple[0]; // "Hello"
const age = tuple[1]; // 10
const isLoggedIn = tuple[2]; // true