#020　TypeScript（7）：型2

2024年7月7日 17:18

TypeScriptの配列の型付け方法

単一の型の配列

説明: 配列内のすべての要素が同じ型（例：すべて文字列、またはすべて数値）である場合に使用します。
記述方法: 型名[] または Array<型名>
サンプルコード:

const names: string[] = ['太郎', '花子'];

この方法では、指定した型以外の値を追加しようとするとエラーになります。

ユニオン型の配列

説明: 配列内に複数の型の要素を含めたい場合に使用します。
記述方法: (型A | 型B)[] または Array<型A | 型B>
サンプルコード:

const mixedArray: (string | number)[] = ['あああ', 123, '456'];

この方法では、指定した型（この場合は文字列か数値）以外の値を追加しようとするとエラーになります。

ユニオン型

タプル型

説明: 配列の長さと各位置の型が固定されている場合に使用します。
記述方法: [型A, 型B, 型C]

サンプルコード:

const person: [string, number, boolean] = ['山田太郎', 30, true];

この方法では、指定した順序と型に厳密に従う必要があります。順序や型が異なるとエラーになります。

これらの型付け方法のメリット

コードの意図が明確になる: 他の開発者が見たとき、配列に何が入るべきかすぐに理解できます。
エラーの早期発見: 間違った型の値を追加しようとした時に、コンパイル時にエラーが表示されます。
IDEのサポート: 適切な補完や提案が得られ、開発効率が向上します。

初心者向けの考え方

単一の型の配列は「この箱には文字列だけ入れてね」というルール
ユニオン型の配列は「この箱には文字列か数字のどちらかを入れてね」というルール
タプル型は「この箱には最初に文字列、次に数字、最後に真偽値を、この順番で入れてね」というルール

これらの型付け方法を適切に使用することで、より安全で保守しやすいTypeScriptコードを書くことができます。

ファイルの作成

tsファイル

tsファイル内容

// 配列の型付け方法の例

// 単一の型の配列
const namesArray: string[] = ['太郎', '花子'];
console.log("namesArray:", namesArray);

// ユニオン型の配列
const mixedArray: (string | number)[] = ['あああ', 123, '456'];
console.log("mixedArray:", mixedArray);

// タプル型
const person: [string, number, boolean] = ['山田太郎', 30, true];
console.log("person:", person);

コマンド実行

npm run build

index.html修正

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>タイプスクリプト</h1>
    <script src="./array_type.js"></script>
</body>
</html>

結果

終わりに

少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。

最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。