[ typescript ] Object 타입의 속성을 모두 명시하여 중복 사용하지 않고 간단하게 사용할 수 있는 방법.

JooKit 주킷 2021. 1. 31. 11:41
목차 접기
728x90
반응형
function fetchTodoItems(): { id: number; title: string; done: boolean }[] {
  const todos = [
    { id: 1, title: '안녕', done: false },
    { id: 2, title: '타입', done: false },
    { id: 3, title: '스크립트', done: false },
  ];
  return todos;
}
  • 자바스크립트 코드를 타입스크립트로 변환하면서
    위의 객체 배열 타입을 의미하는 객체의 속성을 모두 명시해주는 중복 코드가 발생하게 된다.

해결 방법 2가지

  • Type 별칭 부여
  • interface 사용

Type 별칭 부여

type Todo = {
  id: number;
  title: string;
  done: boolean;
};

interface 사용

interface Todo {
  id: number;
  title: string;
  done: boolean;
}

type 별칭 또는 interface 사용 후,

let todoItems: Todo[];

// api
function fetchTodoItems(): Todo[] {
  const todos = [
    { id: 1, title: '안녕', done: false },
    { id: 2, title: '타입', done: false },
    { id: 3, title: '스크립트', done: false },
  ];
  return todos;
}

두가지 방법 중 interface를 추천.

728x90
반응형
LIST