인터페이스 소개

뭔가 형식을 설정하고, 새로운 객체 혹은 데이터 모음을 표현하는 타입으로 쓰이는 점에서는 java 의 interface 와 동일하다.

typescript 에서 interface는 여러가지 타입을 갖는 프로퍼티로 이루어진 커스텀 타입을 정의하는 것이다. interface 에 선언된 프로퍼티 또는 메서드의 구현을 강제하여, 일관성을 유지하도록 한다. 물론 당연히 재사용도 가능하다.

인터페이스 사용법

변수

interface 는 변수의 타입으로 사용하는 것이 가능하다. 이때 interface 타입으로 선언한 변수는 해당 interface 의 각 프로퍼티 타입들과 동일하게 만들어줘야 한다.

interface Todo {
  id: number;
  content: string;
  completed: boolean;
}
let todo: Todo;

todo = { id: 1, content: 'typescript', completed: false };

// recoil 적용하기
export interface ITodoTypes {
  id: number;
  contents: string;
  isCompleted: boolean;
}

// 각각의 id, contents, isCompleted는 모두 명시한 타입과 동일해야한다.
export const todosState = atom<ITodoTypes[]>({
  key: "todos",
  default: [
    {
      id: 1,
      contents: "Todo List를",
      isCompleted: false,
    },
    {
      id: 2,
      contents: "자유롭게",
      isCompleted: false,
    },
    {
      id: 3,
      contents: "추가해보세요!",
      isCompleted: false,
    },
  ],
});

함수

interface 는 함수의 타입으로도 사용이 가능하다. 이때 함수의 interface 에는 타입이 선언된 파라미터 리스트와 리턴 타입을 정의해야한다. interface 타입으로 선언한 함수 역시 해당 interface 의 각 프로퍼티 타입들과 동일하게 만들어줘야 한다.

interface SquareFunc {
  (num: number): number;
}

const squareFunc: SquareFunc = function (num: number) {
  return num * num;
}

console.log(squareFunc(10)); // 100

선택적 프로퍼티

일반적으로 interface 를 타입으로 지정한 변수, 함수, 클래스는 interface 내에 모든 프로퍼티 타입과 동일하게 명시해줘야한다. 만약 interface 의 구현체 마다 때때로 필요하지 않는 선택적 프로퍼티를 만들고 싶다면 뒤에 ?를 붙이면 된다.

interface UserInfo {
  username: string;
  password: string;
  age?    : number;
  address?: string;
}

const userInfo: UserInfo = {
  username: 'ungmo2@gmail.com',
  password: '123456'
}

console.log(userInfo);