Typescript 긴 어노테이션 해결하기

Typescript로 개발하면서 함수에 인자로 받아줄 때 그 인자의 개수가 많아지면 어노테이션으로 작성하다가 불편 하고 가독성이 떨어지기 마련이다. 

 

const myBlog = {
  name : 'devilfront',
  year : 2022,
  opended : true
};

const consoleBlog = (blog:{name : string; year: number; opended: boolean}) : void => {
  console.log(`name : ${blog.name}`);
  console.log(`when : ${blog.year}`);
  console.log(`open? : ${blog.opended}`);
}

 

이렇게 blog 객체의 프로퍼티들에 대한 타입을 정해주는데 3개라서 적당해보이지만 만약 10개 타입을 일일이 지정해준다고 생각하면 상당히 비효율적이고 다른 함수에서도 만약 인자로 받아서 쓴다면 또 같은 작업을 해줘야 한다. 

 

 

인터페이스는 한 마디로 우리가 커스텀 해 쓸 타입 덩어리라고 생각하면 되겠다. 

 

인터페이스를 이용해서 한번 재사용성도 늘리고 가독성도 좋게 만들어보면

 

interface Blog {
  name:string;
  year:number;
  opended: boolean;
}

const oldBlog = {
  name : 'devilfront',
  year : 2022,
  opended : true
};

const consoleBlog = (blog:Blog) : void => {
  console.log(`name : ${blog.name}`);
  console.log(`when : ${blog.year}`);
  console.log(`open? : ${blog.opended}`);
}

 

물론 다른 함수에 쓸 때도 같은 데이터 타입을 가졌다면 재사용 할 수 있다.