インタフェース

interface

インタフェースは、異なるタイプのPropertyからなる新しいタイプを定義するものと見なすことができます.インタフェースを使用してPropertyまたは関数の実装を事前に定義することで、一貫性を維持し、コードの再利用性を向上させることができます.
すなわち,インタフェースは互いに定義された約束やルールである.タイプスクリプトのインタフェースでは、通常、次のカテゴリの規則を定義できます.

オブジェクトの構造(PropertyとPropertyタイプ)

関数のパラメータタイプ(受信オブジェクトのパラメータ)

関数のspec(構造)タイプ(関数のパラメータと戻り値タイプ)

配列とオブジェクトのアクセス方法(propertyキーのタイプとproperty値のタイプ)

カテゴリ

オブジェクト構造を定義するインタフェース

変数用インタフェース(オブジェクトをバインドする変数)

// main.ts
interface User {
    name: string;
    age: number;
}

// User 인터페이스를 활용
// User 인터페이스에 정의한 구조를 갖는 객체를 바인딩해야 한다
var donghyun: User = {
    name: 'donghyun',
    age: 25
};

上記の例に示すように、Userというインタフェースを作成し、構造例を作成しました.
すなわち、ユーザインタフェースはオブジェクトタイプであり、オブジェクトの名前構成には文字列タイプ(すなわち文字列タイプ)があり、ageという構成にはnumber(すなわち数値タイプ)がある.
ユーザーインタフェースを使用する変数は、nameとage Propertyを同時に持つオブジェクトをバインドする必要があります.各Propertyのタイプにも、ユーザーインタフェースで定義されたタイプの値が必要です.

関数パラメータを定義するインタフェース(オブジェクトを渡すパラメータ)

// main.ts
interface User {
    name: string;
    age: number;
}

// 객체를 인수로 전달받는 매개변수에 인터페이스 활용
function getUser(user: User) {
    console.log(user);
}

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

getUser(donghyun);

getUser関数のパラメータuserは、オブジェクトを引数として渡すパラメータであり、Userインタフェースで構造を定義するオブジェクトにのみ渡すことができます.
すなわち、getUser関数を呼び出すときに渡されるオブジェクトの構造には、ユーザーインタフェースで定義されたname propertyとage propertyが必要であり、各property値にはstringとnumberタイプが必要である.
渡されるオブジェクトには、nameとageという構成キーが必要ですが、他の構成キーは使用できません.各Propertyキーには、指定したタイプの値が必要です.
これは、オブジェクトのコンフィギュレーションキーの名前、コンフィギュレーション数、およびコンフィギュレーション値のタイプをインタフェースとして定義できることを意味します.

関数spec(構造)を定義するインタフェース

// main.ts
// 함수의 스펙(매개변수와 반환값)에 인터페이스를 활용
interface sumFunction {
    (a: number, b: number): number;
}

var sum: SumFunction;

sum = function(a: number, b: number): number {
    return a + b;
}

sumFunctionインタフェースを使用して関数の構造を事前定義し、内部(,,)でパラメータとパラメータのタイプを指定し、関数の戻り値のタイプを指定します.
また、sumという名前の変数は、sumFunctionインタフェースで定義された関数からなる関数を指定する必要があります.すなわち、2つのパラメータを宣言し、2つのパラメータにnumberタイプを持たなければならない.関数の戻り値もnumberタイプでなければなりません.
すなわち、関数のパラメータタイプと戻り値タイプをインタフェースとして定義することができる.

インデックス方式のインタフェースの定義

// main.ts
// 인덱싱 방식을 정의하는 인터페이스
interface StringArray {
    [index: number]: string;
}

var arr: StringArray = ['a', 'b', 'c'];
arr[0]; // 'a'

StringArrayインタフェースの[index: number]は、インデックスがnumberタイプであり、各要素がstringタイプの配列であることを示す.arr変数にStringArrayインタフェースを指定すると、arr変数に割り当てられた配列のインデックスはnumber値でなければなりません.各要素にはstringタイプが必要です.
すなわち、配列のインデックスタイプと要素のタイプをインタフェースとして定義することができる.

ディクソンパターンのインタフェースの定義

// main.js
// 딕셔너리 패턴
interface StringRegexDictionary {
    [key: string]: RegExp;
}

var obj: StringRegexDictionary = {
    cssFile: /\.css$/,
    jsFile: /\.js$/
};

StringRegexDictionaryインタフェースの[key: string]は、RegExp(正規表現モード)を持つオブジェクトを表すPropertyキーのタイプ文字列です.
すなわち、オブジェクトのコンフィギュレーションキータイプとコンフィギュレーション値タイプをインタフェースとして指定できます.

拡張インタフェース

// main.ts
// 인페이스 확장
interface Person {
    name: string,
    age: number
}

interface Developer extends Person {
    skill: string;
}

var donghyun: Developer = {
    name: 'donghyun',
    age: 25,
    skill: 'ts'
};

Personインタフェースをextendsで継承し拡張することにより,Developerというインタフェースを定義した.すなわち,開発者インタフェースはPersonに定義された名称とage Propertyを継承し,拡張によりLanguageというPropertyを定義してStringタイプを得る.