TypeScript (2) 인터페이스

인터페이스 (Interface)

인터페이스는 TypeScript에서 타입들의 이름을 짓는 역할을 하고 코드 안의 계약을 정의하는 것 뿐만 아니라 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법이다.

function printLabel(labeledObj: { label: string }) {
 console.log(labeledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

위의 예제에서 printLabel 함수는 string 타입 label을 갖는 객체를 하나의 매개변수로 가진다. myObj 객체가 실제로는 더 많은 프로퍼티를 갖고 있지만, 컴파일러는 최소 필요한 프로퍼티가 있는지와 타입이 잘 맞는지만 검사한다.

선택적 프로퍼티 (Optional Properties)

항상 인터페이스의 모든 프로퍼티가 필요한 것은 아니다. 어떤 조건에서만 존재하거나 아예 없을 수도 있다. 선택적 프로퍼티는 인터페이스에 속하지 않는 프로퍼티의 사용을 방지하면서, 사용 가능한 속성을 기술한다는 이점을 가진다.

interface SqaureConfig {
 color?: string;
 width?: number;
}

선택적 프로퍼티를 갖는 인터페이스는 다른 인터페이스와 비슷하게 작성되고, 프로퍼티 이름 끝에 ?를 붙여 표시한다.

읽기 전용 프로퍼티 (Readonly Properties)

일부 프로퍼티들은 객체가 처음 생성될 때만 수정 가능해야 한다.

interface Point {
 readonly x: number;
 readonly y: number;
}

프로퍼티 이름 앞에 readonly를 넣어서 이를 지정할 수 있다.

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // Error

위의 readonly 속성을 가진 인터페이스를 할당하여 객체를 생성한 후, x, y는 수정할 수 없다.

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;

ro[0] = 12; // Error
ro.push(5); // Error
a = ro; // Error

TypeScript에서는 생성 후에 배열을 변경하지 못하게 Array<T>와 동일한 ReadonlyArray<T> 타입을 제공한다.

함수 타입 (Function Types)

인터페이스는 프로퍼티로 객체를 기술하는 것 외에, 함수 타입을 설명할 수 있다. 인터페이스로 함수 타입을 기술하기 위해 각 매개변수는 이름과 타입이 모두 필요하다.

interface SearchFunc {
 (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;

mySearch = function(source: string, subString: string) {
 let result = source.search(subString);
 return result > -1;
}

올바른 함수 타입 검사를 위해 매개변수의 이름이 같을 필요는 없다. 위의 예제를 아래와 같이 사용 가능하다.

let mySearch: SearchFunc;

mySearch = function(src: string, sub: string): boolean {
 let result = src.search(sub);
 return result > -1;
}

→ 함수 매개변수들은 같은 위치에 대응되는 매개변수끼리 하나씩 검사한다.

클래스 타입 (Class Types)

클래스가 특정 계약을 충족시키도록 명시적으로 강제한다.

interface ClockInterface {
 currentTime: Date;
 setTime(d: Date): void;
}

class Clock implements ClockInterface {
 currentTime: Date = new Date();
 setTime(d: Date) {
  this.currentTime = d;
 }
 constructor(h: number, m: number) {}
}

이 때 setTime처럼 클래스에 구현된 method를 인터페이스 안에서도 기술할 수 있다.

인터페이스 확장하기 (Extending Interfaces)

클래스처럼 인터페이스들도 extends가 가능하다. 이는 한 인터페이스의 멤버를 다른 인터페이스에 복사하는 것을 가능하게 하는데, 인터페이스를 재사용성 높은 컴포넌트로 쪼갤 때 유용하다.

interface Shape {
 color: string;
}

interface Square extends Shape {
 sideLength: number;
}

let square = {} as Square;

square.color = "blue";
square.sideLength = 10;

이 때 여러 개의 인터페이스를 확장할 수 있어 모든 인터페이스의 조합을 만들어낼 수 있다.

참고 문서