TypeScript - インターフェース

公開日：2019-02-06 更新日：2019-05-14

1. 概要

インターフェースを使うと、オブジェクトが持つ性質(プロパティ、メソッド)を定義できます。
これにより、オブジェクトの型を抽象化して、オブジェクトを汎用的に使えるようになります。

interface インターフェース名 {
	変数名: 型;
	メソッド名(変数名: 型, 変数名: 型, ・・・): 型;
}

2.1 サンプル

オブジェクトリテラルで代入する場合は、インターフェースと完全に一致している必要があります。
一度別の変数に入れてから代入する場合には問題ありません。

interface IType {
	a: number;
	b: string;
}
let data1: IType = { a: 123, b: "abc" };
//let data2: IType = { a: "def", b: 456 };        //NG:型不一致
//let data3: IType = { a: 123 };                  //NG:プロパティ不足
//let data4: IType = { a: 123, b: "abc", c:456 }; //NG:プロパティ過剰

console.log(data1.a); //123
console.log(data1.b); //abc

2.2 サンプル - プロパティの省略

変数名の後ろに ? を付けると、省略可能になります。

interface IType {
	a : number;
	b?: string; //省略可能
}
let data1: IType = { a: 123 };
console.log(data1.a); //123
console.log(data1.b); //undefined

let data2: IType = { a: 123, b: "abc" };
console.log(data2.a); //123
console.log(data2.b); //abc

2.3 サンプル - リテラルオブジェクトに使用

プロパティの時と同様に、リテラルオブジェクトで使用する場合は、
インターフェースと完全に一致させる必要があります。
interface IType1 {
	result: number;
	add(value1: number, value2: number): number;
}

let obj: IType1 = {
	result: 0,
	add: function (value1: number, value2: number) {
		this.result = value1 + value2;
		return this.result;
	}
}
console.log(obj.add(1, 2)); //3
console.log(obj.result);    //3

2.4 サンプル - クラスに使用

interface IType1 {
	result: number;
	add(value1: number, value2: number): number;
}

class TestClass implements IType1 {
	result: number;
	add(value1: number, value2: number):number {
		this.result = value1 + value2;
		return this.result;
	}
	
	//リテラルオブジェクトの時と異なり、
	//プロパティ・メソッドが多くてもエラーにならない
	value: number;
	test(): void {}
}

let obj: TestClass = new TestClass();
console.log(obj.add(10, 20)); //30
console.log(obj.result);      //30

2.5 サンプル - インターフェースの継承

interface IType1 {
	result: number;
}

interface IType1Ex extends IType1 {
	add(value1: number, value2: number): number
}

let obj: IType1Ex = {
	result: 0,
	add: function (value1: number, value2: number) {
		this.result = value1 + value2;
		return this.result;
	}
}

console.log(obj.add(100, 200)); //300
console.log(obj.result);        //300


Tag

New Article