TypeScript の型エイリアスを解説!配列・オブジェクト・ユニオンも解説!

こんにちは!駆け出しエンジニアのガッキー(@ExplorerZine)です。

今回は TypeScript の型エイリアスについてご紹介します!

今回も一緒に学んでいきましょう~

型エイリアスとは?

型エイリアスとは既存の型に別名をつけることです!

複雑な型を短い名前にしたり、再利用可能な型を定義する際に便利です。

型エイリアスは type 文を使って定義します!

型エイリアスの書き方

type Name = string;

const user: Name = "Hoge太郎";

こちらのサンプルでは Name という型エイリアスを定義し変数 user に適用しています。

user には文字列である”Hoge 太郎”が代入できますね!

因みに型エイリアスはパスカルケースで定義します。

(単語の最初の文字を大文字にする形式)

サンプルである Name であったり、複数の単語を組み合わせる場合は UserData といった書き方になります。

ここからは色々な型エイリアスを見ていきましょう!

配列の型エイリアス

  // 配列の型エイリアス
  type Numbers = number[];

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

リテラル型の型エイリアス

// 数値のリテラル型
type Age = 30; // 30という値のみを持つ型

// 文字列のリテラル型
type Gender = "male" | "female"; // "male" または "female" のみを持つ型

// 真偽値のリテラル型
type Status = true; // true という値のみを持つ型

// 複数のリテラル型を組み合わせたユニオン型
type Direction = "north" | "east" | "south" | "west"; // 指定された値のいずれかを持つ型

オブジェクトの型エイリアス

// オブジェクトの型エイリアス
type PersonData = {
  name: string;
  age: number;
  hobbies: string[];
};

const person: PersonData = {
  name: "Alice",
  age: 30,
  hobbies: ["reading", "hiking"],
};

まとめ

いかがでしたか??

TypeScript の型エイリアスについてご紹介してきました!

引き続きブログをお楽しみいただければ嬉しいです。

よかったら Twitter も@ExplorerZine覗いてみてくださいね ♪

これからも一緒に学習しましょう~

🔽 デスクツアー開催しました 🔽

by
関連記事