TypeScript_インターフェース
インターフェース
implementsキーワード
implementsキーワードを使用して、インターフェースを実装します。
インターフェースを実装している場合、インターフェースに存在するメンバーと同じ名前のメンバーが
必ず存在している必要があります。
interface MyInterface{
name: string;
myMethod(): void;
}
class MyClass implements MyInterface {
// メンバーがない場合コンパイルエラーとなります。
name: string;
myMethod () {
console.log('implement');
}
}
let obj: MyClass = new MyClass();
obj.myMethod();
関数パラメーターの定義
関数引数として、オブジェクトを渡す際にインターフェースを使用することができます。
interface MyParams {
param1:string;
param2:number;
param3:boolean;
param4:{key:string};
}
interface MyInterface {
name: string;
myMethod(params: MyParams): void;
}
class MyClass implements MyInterface{
name: string;
myMethod (params: MyParams) {
console.log(params.param4['key']);
}
}
let obj: MyClass = new MyClass();
let data = {
param1: 'parameter',
param2: 1,
param3: false,
param4: { 'key': 'value' },
};
obj.myMethod(data);
インターフェースの継承
extendsキーワード
インターフェースはクラス同様にextendsキーワードを使用して継承することができます。
interface MyParams {
param1:string;
param2:number;
}
interface SubParams extends MyParams {
param3:boolean;
param4:{key:string};
}
interface MyInterface {
name: string;
}
interface SubInterface extends MyInterface {
printName(): void;
}
class MyClass implements SubInterface{
name: string;
constructor (params: SubParams) {
this.name = params.param4['key'];
}
printName () {
console.log(this.name);
}
}
let data = {
param1: 'parameter',
param2: 1,
param3: false,
param4: { 'key': 'value' },
};
let obj: MyClass = new MyClass(data);
obj.printName();
複数インターフェースを継承する。
インターフェース名をカンマで区切ることで複数のインターフェースを継承することができます。
interface Isample1 {
name: string;
}
interface Isample2 {
flag: boolean;
print(): void;
}
class MyClass implements Isample1, Isample2 {
name: string = 'multi implements';
flag: boolean = true;
print(): void {
if (this.flag) {
console.log(this.name)
}
}
}
let obj: MyClass = new MyClass();
obj.print();
関連ページ
- JavaScript
- TypeScript_環境設定
- TypeScript_変数
- TypeScript_制御構文
- TypeScript_関数
- TypeScript_クラス
- TypeScript_インターフェース
- TypeScript_jQueryの利用