タイプ別名

タイプ別名

タイプ別名とは、特定のタイプまたはインタフェースを参照できるタイプ変数です.
すなわち、タイプ別名は新しいタイプを作成するのではなく、定義されたタイプをタイプ変数に割り当てます.

// main.ts
// string 타입을 사용
const name: string = 'donghyun';

// string 타입을 가리키는 MyName 타입 별칭 선언
type MyName = string;
const name: MyName = 'donghyun';

キーワードtypeを使用してタイプ別名を宣言し、「特定のタイプ」または「インタフェース」を値として指定します.
インタフェースは、タイプ別名としても使用できます.

// main.ts
// 객체 구조 인터페이스를 가리키는 타입 별칭 Developer 선언
type Developer = {
    name: string;
    skill: string;
}

// 함수 스펙 인터페이스를 가리키는 타입 별칭 SumFunc 선언
type SumFunc = {
    (a: number, b: number): number;
}

// 배열 스펙 인터페이스를 타입 별칭으로 선언
type StringArray = {
    [index: number]: string;
}

// 객체 스펙 인터페이스를 가리키는 타입 별칭 StringObj 선언
type StringObj = {
    [key: string]: RegExp;
}

typeキーワードを使用してタイプ別名を宣言し、インタフェースの仕様を値として指定できます.

タイプ別名のフィーチャー

1.Previewを表示

インタフェースとタイプ別名の違いから、タイプ別名の特徴を理解しましょう.

// main.ts
// MyName 인터페이스 정의
interface MyName {
    name: string;
    age: number;
}

const user: MyName = {
    name: 'donghyun',
    age: 25
};  

MyNameという名前のインタフェースを定義し、MyNameインタフェースを使用してユーザー変数のタイプを定義した場合、ユーザー変数の横にあるMyNameにカーソルを置くと、以下のウィンドウとpreviewウィンドウが表示されます.

上図に示すように、interface MyNameのみが表示されます.
タイプ別名の場合、次のpreviewウィンドウが表示されます.

つまり、MyNameタイプエイリアスが指す「タイプの構造」がプレビューウィンドウに表示されます.

2. extends

最大の違いは、インタフェースはextendsキーワードに拡張できますが、タイプ別名に拡張できません.
したがって、タイプ別名をtypeとして宣言するのではなく、インタフェースを定義して使用することをお勧めします.