typeScript - type alias vs interface

타입 알리아스 vs 인터페이스

 

type alias

- intersaction으로 상속.

상속은 interface와 type alias 둘 가능합니다.

type Tstyle = Color & Display & Geometry & { }

 

- 동일명의 타입알리아스가 존재할 수 없음

- 변수 타입이 모두 같은 경우 일괄적용 가능

export type TOnlyNumberValueObject = {
	[prop: string]: boolean;
}

 

 

interface

- extends로 상속받음. type alias와 interface 둘 다 상속 가능. 

interface Istyle extends Color, Display, Geometry, { }

- 동일명의 interface가 존재 시 서로 합쳐집니다.

- 변수 타입이 모두 같은 경우 일괄적용 가능

export interface IOnlyNumberValueObject {
	[key: string]: number;
}

- 함수 작성 방법

export interface IGetApi {
	(url: string, search?: string): Promise<string>;
}
※ 함수정의문이 아닌 함수정의식으로 써야한다. 주의할 것!
const getApi: IGetApi = (url, search = '') => {
	return new Promise(sesolve => resolve('Ok'))
};

- 인터페이스는 항상 public만 가능
export interface IReact {
	id: number; 
	x: number;
	y:number;
	width: number;
	height: number;
}

class React implements IReact {
	private id: number;  (불가능, 인터페이스에서 정의한 것은 public만 가능)
	x: number;
	y:number;
	width: number;
	height: number;
}

그렇다면 어떤 경우에 타입 알리아스와 인터페이스를 사용하면 좋을까요??

사실 타입 알리아스와 인터페이스는 문법적인 차이 외에는 거의 차이가 없습니다.
정확한 구분 기준은 없지만 대체로 데이터를 묘사할 때는 타입알리아스를 사용하고 
메소드와 같이구체적인 행위를 포함한 객체를 디자인할 때는 인터페이스를 사용하면 좋을 것 같습니다.
즉, class를 디자인할 때는 interface를 사용하고 일반적인 변수를 디자인할 때는 type alias를 사용하면 될 것 같습니다.

 

 

 

참고 - 고급 문법

인터페이스는 생성자의 규격을 기술할 수 있습니다.

함수를 이용하여 인자로 인터페이스를 받아 객체를 생성할 수 있습니다.

이 경우 클래스 생성자로 객체를 생성할 때보다 좀 더 다양한 객체를 생성할 수 있습니다.

interface IRectConstructor {
	new (x: number, y: number, width: number, height: number): IRect;
}

class React {
	id: number;
	x: number;
	y:number;
	width: number;
	height: number;

	constuctor(x: number, y: number, width: number, height: number): void {
		this.id = Math.random() * 100000;
		this.x = x;
		this.y = y;
		this.width = width;
		this.height = height;
	}
}

funcion createDefaultRect(cstor: IRectConstructor) {
	return new cstor(0, 0, 100, 100);
}

const rect1 = new React(0, 0, 100, 20); // 생성자 인터페이스가 필요없음.
const rect2 = createDefaultRect(React); // 여기서 React는 class이다.

rect1이 일반적으로 클래스 생성자로 객체를 생성한 경우입니다.

반면 rect2는 인터페이스를 파라미터로 받아 함수로 객체를 생성한 경우입니다.

후자의 경우 함수로 인터페이스 인자를 받기에 파라미터 인터페이스에 따라 다양한 객체를 생성할 수 있습니다.