TypeScript 型付き配列入門

TypeScript 型付き配列の使用について (Japanese)

型付き配列とは?

TypeScriptでは、配列の要素の型を指定することができます。これにより、コードの型安全性を向上させ、バグを早期に発見することができます。

型付き配列の宣言

型付き配列を宣言するには、配列の型と要素の型を指定します。

let numbers: number[] = [1, 2, 3];
let strings: string[] = ["apple", "banana", "orange"];

型付き配列に対しては、通常の配列と同じ操作を行うことができます。

numbers.push(4);
console.log(numbers[0]);

型の推論

TypeScriptでは、型を明示的に指定しなくても、コンパイラが型を推論することができます。

let fruits = ["apple", "banana", "orange"]; // 型は string[] に推論される

ジェネリック型

型付き配列の要素の型を汎用的に指定するために、ジェネリック型を使用することができます。

function printArray<T>(array: T[]): void {
  for (let item of array) {
    console.log(item);
  }
}

printArray([1, 2, 3]);
printArray(["apple", "banana", "orange"]);

読みやすさと型安全性の向上

型付き配列を使用することで、コードの読みやすさと型安全性を向上させることができます。これにより、バグを減らし、コードの品質を改善することができます。

具体的な例

interface Person {
  name: string;
  age: number;
}

let people: Person[] = [
  { name: "Alice", age: 30 },
  { name: "Bob", age: 25 },
];

function getAverageAge(people: Person[]): number {
  let totalAge = people.reduce((sum, person) => sum + person.age, 0);
  return totalAge / people.length;
}

console.log(getAverageAge(people));

基本的な型付き配列

// 数値の配列
let numbers: number[] = [1, 2, 3, 4, 5];

// 文字列の配列
let fruits: string[] = ["apple", "banana", "orange"];

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

let people: Person[] = [
  { name: "Alice", age: 30 },
  { name: "Bob", age: 25 },
];

let mixedArray = [1, "hello", true]; // 型は any[] に推論される

function printArray<T>(array: T[]): void {
  for (let item of array) {
    console.log(item);
  }
}

printArray([1, 2, 3]);
printArray(["apple", "banana", "orange"]);

配列メソッド

numbers.push(6); // 配列の末尾に要素を追加
numbers.pop(); // 配列の末尾から要素を削除
numbers.shift(); // 配列の先頭から要素を削除
numbers.unshift(0); // 配列の先頭に要素を追加

配列の操作

let filteredNumbers = numbers.filter(num => num > 3); // 3より大きい数値を抽出
let mappedStrings = fruits.map(fruit => fruit.toUpperCase()); // 文字列を大文字に変換
let reducedSum = numbers.reduce((sum, num) => sum + num, 0); // 数値の合計を計算

型ガード

function printPerson(person: any): void {
  if (person.name && person.age) {
    console.log(`${person.name} is ${person.age} years old.`);
  } else {
    console.log("Invalid person object.");
  }
}

• 機能性
  TypeScriptの型システムを活用して、より強力なコードを書くことができます。
• 読みやすさ
  コードの意図が明確になり、理解しやすくなります。
• 型安全
  コンパイル時に型エラーを検出できるため、バグを減らすことができます。

インターフェースの使用

interface Person {
  name: string;
  age: number;
}

let people: Person[] = [
  { name: "Alice", age: 30 },
  { name: "Bob", age: 25 },
];

型エイリアス

type Person = {
  name: string;
  age: number;
};

let people: Person[] = [
  { name: "Alice", age: 30 },
  { name: "Bob", age: 25 },
];

タプル

let personTuple: [string, number] = ["Alice", 30];

Readonly配列

let readonlyNumbers: readonly number[] = [1, 2, 3];
// readonlyNumbers.push(4); // エラー: Readonly配列は変更できません

型ガード

function printPerson(person: any): void {
  if (isPerson(person)) {
    console.log(`${person.name} is ${person.age} years old.`);
  } else {
    console.log("Invalid person object.");
  }
}

function isPerson(obj: any): obj is Person {
  return obj && typeof obj === "object" && "name" in obj && "age" in obj;
}

型推論

let fruits = ["apple", "banana", "orange"]; // 型は string[] に推論される

function printArray<T>(array: T[]): void {
  for (let item of array) {
    console.log(item);
  }
}

配列メソッド

numbers.push(6); // 配列の末尾に要素を追加
numbers.pop(); // 配列の末尾から要素を削除
numbers.shift(); // 配列の先頭から要素を削除
numbers.unshift(0); // 配列の先頭に要素を追加

配列の操作

let filteredNumbers = numbers.filter(num => num > 3); // 3より大きい数値を抽出
let mappedStrings = fruits.map(fruit => fruit.toUpperCase()); // 文字列を大文字に変換
let reducedSum = numbers.reduce((sum, num) => sum + num, 0); // 数値の合計を計算