※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。

【TypeScript】型エイリアス

型エイリアス TypeScript 型付き言語

投稿日：2020年12月16日

TypeScriptの型エイリアスの機能について解説しています。

実践

使い方【基礎】

TypeScriptでは型に名前をつける型エイリアス（type alias）の機能があります。型エイリアスにはtypeという宣言を使用します。

type name = string;

let username: name = "marsquai";

型エイリアスはinterfaceの様に使うことができます。

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

let user1: Person = {
    name: "marsquai",
    age: 26,
};

let user2: Person = {
    // [ Error ] プロパティ 'age' は型 '{ name: string; }' にありませんが、型 'Person' では必須です。
    name: "marsquai",
};

let user3: Person = {
    // [ Error ] オブジェクト リテラルは既知のプロパティのみ指定できます。'height' は型 'Person' に存在しません。
    name: "marsquai",
    age: 26,
    height: 170,
};

型エイリアスはその型が何の目的で利用されているのかを明確化したい場合や、その型を繰り返し利用する場合などに訳に立ちます。

型エイリアスの拡張

型エイリアスは交差（intersection）や合併（union）を使って拡張することができます。

型の交差は&を使います。

typeの宣言で&により２つ以上の型を指定すると、それらの型全てを満たすような型が宣言できます。

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

// type Personを拡張
type SuperUser = User & {
    id: number;
    password: string;
};

let superUser1: SuperUser = {
    name: "marsquai",
    age: 26,
    id: 123456,
    password: "kfis04djf82",
};

let superUser2: SuperUser = {
    // [ Error ] 型 '{ name: string; age: number; }' には 型 '{ id: number; password: string; }' からの次のプロパティがありません: id, password
    name: "marsquai",
    age: 26,
};

型の合併には|を使います。

型の宣言で|で２つ以上の型を指定すると、それらのいずれかの型、または両方の型を満たすような型を宣言できます。

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

type Dog = {
    barks: boolean;
    speed: number;
};

type PersonOrDog = Person | Dog;

let person: Person = {
    name: "marsquai",
    age: 26,
};

let dog: PersonOrDog = {
    speed: 100,
    barks: true,
};

let werewolf: PersonOrDog = {
    name: "marsquai",
    age: 1026,
    speed: 200,
    barks: true,
};

let UMA: PersonOrDog = {
    // [ Error ] オブジェクト リテラルは既知のプロパティのみ指定できます。'power' は型 'PersonOrDog' に存在しません。
    name: "marsquai",
    age: 1,
    speed: 200,
    power: 2000,
};

型の合併は関数の返り値などでよく利用されます。

type Returns = string | null;

/**
 * 文字列、またはnullを返す
 */
function sampleFunc(str: string): Returns {
    if (str == "marsquai") {
        return str;
    } else {
        return null;
    }
}

汎用型エイリアス

型エイリアスではinterfaceと同様に汎用型エイリアスを作成することができます。

汎用型エイリアスは次のような再帰的な型を定義する際に効果的に利用できます。

// 汎用Typeを定義
type EvoType<T> = T & { next: EvoType<T>; previous: EvoType<T> };

// 汎用Typeを利用して再帰的なTypeを定義
type Digimon = {
    name: string;
};
type DigimonEvo = EvoType<Digimon>;

// 再帰的な変数を定義
let agumon: DigimonEvo = { name: "Agumon", next: null, previous: null };
let greymon: DigimonEvo = { name: "Greymon", next: null, previous: agumon };
let metalGreymon: DigimonEvo = {
    name: "Metal Greymon",
    next: null,
    previous: greymon,
};
greymon.next = metalGreymon;
agumon.next = greymon;

記事へのコメント

【TypeScript】型エイリアス

実践

使い方【基礎】

型エイリアスの拡張

汎用型エイリアス

検索

カテゴリ

Web開発

機械学習

プログラミング

その他

サーバー開発

Linux

目次