TypeScript 型エイリアスとは？

2024-05-12

TypeScriptにおける予約ワード「type」

型エイリアスは、既存の型に新しい名前を割り当てることができる機能です。これにより、コードをより読みやすく、理解しやすくなります。

type MyNumber = number; // number 型に MyNumber というエイリアスを定義

let myVariable: MyNumber = 10; // MyNumber 型の変数 myVariable を宣言

上記の例では、number 型に MyNumber という名前を割り当てています。これにより、number 型の変数を宣言する際に、より分かりやすい名前を使用することができます。

型ガードは、変数の型をより具体的に判断するための構文です。条件分岐やジェネリック型などでよく使用されます。

function add(x: number, y: number): number {
  if (typeof x === 'string') {
    x = parseInt(x); // x を number 型に変換
  }

  return x + y;
}

let result = add('10', 20); // number 型の値を返す

上記の例では、add 関数の引数 x の型を number 型と指定していますが、typeof x === 'string' という条件分岐で x が文字列型であるかどうかを判断しています。もし文字列型であれば、parseInt(x) で数値に変換してから計算を行っています。

このように、type キーワードは、型エイリアスと型ガードという2つの重要な機能で使用され、TypeScript のコードをより読みやすく、理解しやすく、安全にするために役立ちます。

その他の予約ワード

TypeScript には、type キーワード以外にも多くの予約ワードがあります。主な予約ワードは以下の通りです。

abstract
implements
interface
let
private
protected
public
static
var

これらの予約ワードは、TypeScript の構文で使用されるため、変数名や関数名として使用することはできません。

type キーワードは、TypeScript の重要な機能である型エイリアスと型ガードで使用されます。これらの機能を活用することで、コードをより読みやすく、理解しやすく、安全にすることができます。

TypeScript 型エイリアスサンプルコード

例1：プリミティブ型のエイリアス

type MyString = string;
type MyNumber = number;
type MyBoolean = boolean;

let myString: MyString = "Hello";
let myNumber: MyNumber = 10;
let myBoolean: MyBoolean = true;

この例では、string、number、boolean 型それぞれに、MyString、MyNumber、MyBoolean というエイリアスを定義しています。これらのエイリアスを使用することで、変数宣言時により分かりやすい名前を使用することができます。

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

type User = {
  name: string;
  age: number;
  email: string;
};

let user: User = {
  name: "Taro Yamada",
  age: 30,
  email: "[email protected]"
};

この例では、name、age、email というプロパティを持つオブジェクト型を User という名前で定義しています。このエイリアスを使用することで、オブジェクト型変数を宣言する際に、より分かりやすい名前と、プロパティの型情報を同時に記述することができます。

例3：ユニオン型のエイリアス

type MyResponse = string | number;

let result: MyResponse = "Success";
result = 100;

この例では、string 型と number 型のどちらかの値を持つことができるユニオン型を MyResponse という名前で定義しています。このエイリアスを使用することで、変数に複数の型の値を格納できることを明確に示すことができます。

例4：関数の型エイリアス

type MyFunction = (x: number) => number;

let add: MyFunction = (x: number) => x + 10;

let result = add(20); // 30 という値を返す

この例では、1つの引数を受け取り、その引数に10を足した値を返す関数を MyFunction という名前で定義しています。このエイリアスを使用することで、関数の引数と戻り値の型情報を明確に記述することができます。

これらの例は、TypeScriptにおける型エイリアスの基本的な使用方法を示すものです。型エイリアスを正しく活用することで、コードをより読みやすく、理解しやすく、そして安全にすることができます。

TypeScript 型エイリアス：高度な使用方法

型パラメータを使用することで、汎用的な型エイリアスを作成することができます。

type MyContainer<T> = {
  value: T;
};

let numberContainer: MyContainer<number> = { value: 10 };
let stringContainer: MyContainer<string> = { value: "Hello" };

この例では、MyContainer という型エイリアスを定義し、内部に value というプロパティを持つオブジェクト型を表現しています。ここで、T という型パラメータを使用することで、MyContainer 型がどのような型の値を格納できるかを指定することができます。上記の例では、numberContainer は number 型の値を、stringContainer は string 型の値を格納することができます。

インデックスシグネチャを使用することで、オブジェクト型エイリアスのプロパティの型を動的に指定することができます。

type MyMap = {
  [key: string]: number;
};

let myMap: MyMap = {
  "key1": 10,
  "key2": 20,
};

この例では、MyMap という型エイリアスを定義し、すべてのプロパティが string 型のキーと number 型の値を持つオブジェクト型を表現しています。インデックスシグネチャを使用することで、オブジェクトのプロパティ名が事前に分からなくても、その型を指定することができます。

ジェネリック型を使用することで、型エイリアスをさらに汎用的にすることができます。

type MyPromise<T> = Promise<T>;

let promise1: MyPromise<number> = Promise.resolve(10);
let promise2: MyPromise<string> = Promise.resolve("Hello");

型エイリアスの再定義

型エイリアスは、既存の型エイリアスを再定義することができます。

type Point2D = { x: number; y: number };
type Point3D = Point2D & { z: number };

let point2D: Point2D = { x: 10, y: 20 };
let point3D: Point3D = { x: 10, y: 20, z: 30 };

この例では、Point2D という型エイリアスを定義し、x と y というプロパティを持つオブジェクト型を表現しています。そして、Point3D という型エイリアスを定義し、Point2D の型に z というプロパティを追加した型を表現しています。

このように、型エイリアスを再定義することで、既存の型を拡張することができます。

型エイリアスとインターフェースは、どちらも型を定義するために使用できる機能ですが、いくつかの違いがあります。

型エイリアス は、既存の型に新しい名前を付けるためのものです。一方、インターフェース は、新しい型の形状を定義するためのものです。
型エイリアス は、プリミティブ型、ユニオン型、関数の型など、さまざまな型に対して使用することができます。一方、インターフェース は、オブジェクト型に対してのみ使用することができます。
型エイリアス は、型パラメータを使用することができます。一方、インターフェース は、型パラメータを使用することはできません。

一般的に、以下のケースでは型エイリアスを使用し、以下のケースではインターフェースを使用するのが一般的です。