인터페이스

• 인터페이스(interface)를 통해 값이 따라야 할 타입을 표현 할 수 있다. 인터페이스 타입을 통해 값의 형태, 값이 어떤 멤버를 가져야 하는지 그 멤버의 타입은 어때야 하는지 나타낼 수 있다.

interface

• interface 키워드를 사용하여 값이 특정한 형태를 갖도록 제약할 수 있다.

interface User {
  name: string;
  height: number;
}

• 객체 타입에서 처럼 인터페이스의 속성을 읽기 전용 속성(readonly 사용)이나 선택 속성으로 정의할 수도 있다.

interface User {
  name: string;
  readonly height: number;
}
const author: User = { name: 'danbi', height: 163 };
author.height = 173; // 에러. height는 읽기 전용 속성이므로 접근할 수 없다.

함수 인터페이스

• 인터페이스를 사용하여 함수 타입도 표현할 수 있다. 함수 타입 표현을 위해서 시그니쳐(call signature)를 제공해야 하는데, 함수 타입 정의와 유사한 문법을 사용한다.

(매개변수1 이름: 매개변수1 타입, 매개변수2 이름: 매개변수2 타입, ...): 반환 타입

예를 들어, User 타입의 값 user를 받아 이름을 반환하는 함수 인터페이스를 아래와 같이 만들 수 있다.

interface GetUserName {
  (user: User): string;
}
const getUserName: GetUserName = function (user) {
  return user.name;
};

실제 함수 정의와 인터페이스에서의 매개변수 이름이 꼭 같을 필요는 없다. 매개변수명을 user라고 하지 않고 u로 사용해도 매개변수의 타입 순서가 일치한다면 에러는 발생하지 않는다.

const getUserName: GetUserName = function (u) {
  return u.name;
};

하이브리드 타입

• 자바스크립트에서는 jQuery의 $ 처럼 호출 가능한(callable) 동시에 추가적으로 여러 속성을 갖는 객체가 존재할 수 있다. 이런 객체의 타입을 표현하기 위해 호출 시그니쳐와 속성 타입 정의를 동시에 할 수 있다.

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}
function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}
let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

• 위의 Counter 타입의 값은 함수로서 호출 할 수 있기 때문에 호출 시그니쳐를 갖는다. 이 인터페이스는 추가적으로 interval과 reset 이라는 속성을 갖고 있다. 따라서 인터페이스는 해당 속성의 타입 정보도 포함하고 있다.

• 위 처럼 호출 시그니쳐와 속성 타입을 동시에 갖는 인터페이스를 하이브리드 타입(hybrid type)이라고 한다.

제너릭 인터페이스

• 인터페이스 이름 뒤에 타입 변수 정의를 붙여 제너릭 인터페이스(generic interface)를 정의할 수 있다.

interface MyResponse<Data> { // 제너릭 인터페이스
  data: Data;
  status: number;
  ok: boolean;
}
inteface User {
  name: string;
  readonly height: number;
}
const user: MyReponse<User> = await getUserApiCall(userId);
user.name; // user.name이 string인 것을 알 수 있다.

• 함수 인터페이스 정의에서도 제너릭을 사용할 수 있는데, 이 때 타입 변수는 매개변수 앞에 정의한다.

interface GetData {
  <Data>(response: MyResponse<Data>): Data;
}

실제 프로젝트 사용 예

interface Buttonprops {
  buttonName: "PRIMARY" | "SECONDARY";
  isEnable: boolean;
  buttonText: string;
  onClick: () => void;
  styleExist?: React.ComponentState;
  brandExist?: React.ComponentState;
  isConfirmed?: boolean;
  isConfirmedValues?: number | undefined;
}

interface ButtonLayoutProps {
  buttonName: string;
  isEnable: boolean;
  isStyle?: string;
  isBrand?: string;
  isConfirmed?: boolean;
  isConfirmedValues?: number | undefined;
}