타입스크립트 2. 인터페이스

TypeScript의 핵심 원칙 중 하나는 타입 검사가 값의 형태에 초점을 맞추고 있다는 것이다.

TypeScript에서 인터페이스는 이런 타입들의 이름을 짓는 역할을 하고 코드 안의 계약을 정의한다.

컴파일러는 최한 필요한 프로퍼티가 있는지와 타입이 잘 맞는지만 검사한다.

interface LabeledValue {
  label: string;
}

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

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

myObj는 label: string 이외의 값도 포함하고 있지만 label: string을 가지고 있기 때문에 함수에 전달된 객체가 나열된 요구 조건을 충족하면, 허용된다.

선택적 프로퍼티

인터페이스의 모든 프로퍼티가 필요한 것은 아니다. 어떤 조건에서만 존재하거나 아예 없을 수 도 있다. 선택적 프로퍼티들은 객체 안의 몇 개의 프로퍼티만 채워 함수에 전달하는 “option bags”같은 패턴을 만들 때 유용하다.

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

function createSquare(config: SquareConfig): {color: string, area: number} {
  let newSuare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSuare({color: "black"});

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

선택적 프로퍼티의 이점은 인터페이스에 속하지 않는 프로퍼티의 사용을 방지하면서, 사용 가능한 속성을 기술한다.

읽기 전용 프로퍼티

일부 프로퍼티들의 객체가 처음 생성될 때만 수정 가능해야한다. 프로퍼티 이름 앞에 readonly 를 넣어서 이를 지정할 수 있다.

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

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

초과 프로퍼티 검사

타입스크립트는 인터페이스에 정의 되지 않은 다른 값을 넣는 것을 허용해주었다. 또한 선택적 프로퍼티가 유용하다는 것을 배웠다.

하지만, 그냥 그 둘을 결합하면 에러가 발생할 수 있다.

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

function createSquare(config: SquareConfig): { color: string; area: number } {
  // ...
}

let mySquare = createSquare({ colour: "red", width: 100 });

에서 width 프로퍼티는 적합하고, color 프로퍼티는 없고, 추가 colour 프로퍼티는 중요하지 않기 때문에, 이 프로그램이 올바르게 작성되었다고 생각할 수 있다.

하지만 타입스크립트는 이 코드에 버그가 있을 수 있다고 생각한다. 객체 리터럴은 다른 변수에 할당할 때나 인수로 전달할 때, 특별한 처리를 받고, 초과 프로퍼티 검사를 받는다. 만약 객체 리터럴이 “대상 타입”이 갖고 있지 않은 프로퍼티를 갖고 있으면, 에러가 발생한다.

초과 프로퍼티 에러의 대부분은 실제 버그이다. 초과 프로퍼티 검사를 피하는 방법이 있지만 넘어가도록하겠다.

함수타입

인터페이스는 자바스크립트 객체가 가질 수 있는 넓은 범위의 형태를 기술할 수 있다. 프로퍼티로 객체를 기술하는 것 외에, 인터페이스는 함수 타입 기술할 수 있다.

인터페이스에 함수 타입을 기술하기 위해, 인터페이스에 호출 서명을 전달한다. 이는 매개변수 목록과 반환 타입만 주어진 함수 선언과 비슷하다.

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

한번 정의되면, 함수 타입 인터페이스는 다른 인터페이스처럼 사용할 수 있다.