TypeScript 의 Interface 사용하기

 

🌸 TIL

 

 

 

TypeScript 를 사용하게 되면 함수의 반환 값의 타입을 지정해줄 수 있다.

 

const func = async(foo: object): Promise<object> => {
  try {
      const res = await fetch(url, options);
      return await res.json();
  } catch (err) {
  	  let errCode = {ok: false, data: err}
      return errCode;
  }
};

 

위와 같은 async await 을 사용한 비동기 함수가 있다면 반환 값의 타입으로 Promise<object> 를 사용하여 타입을 지정해줄 수 있는데 

반환 값의 타입이 항상 같을 수 없을 때가 있다.

 

const func = async(foo: object): Promise<object | boolean> => {
  try {
      const res = await fetch(url, options);
      return await res.json();
  } catch (err) {
      return false;
  }
};

 

위의 코드는 반환 값이 false일 때가 있고 객체일 때가 있는데 이런 경우 Promise<object | boolean> 으로 object이거나 boolean 을 지정해줌으로써 두 가지 타입을 지정해줄 수 있다.

 

 

 

하지만 클라이언트 측에서 처리하여 반환하는 return 값과 서버에서 받아온 값이나 다른 외부 함수에서 받아온 값을 return 하는 경우 값이 여러개일 경우가 많아지면서 함수의 반환 타입을 여러개 지정하게 되면 오류가 발생하기 쉽다.

 

실제로 여러개의 타입을 지정해주다보니까 클라이언트 측에서 이 데이터를 사용할 때, 데이터를 전달할 때 타입 에러가 빈번하게 일어나서 코드 작성이 번거로워짐을 느꼈고, 타입을 지정해주었으니 그에 맞추려고 억지로 변수에 담거나, 객체로 만들거나 등등 불필요한 데이터 래핑을 매번 해주어야 하는 불편함을 느꼈다. 아직 typescript 사용에 있어서 능숙하지 못했기 때문이라고 생각한다.

 

 

해결한 방법으로는 서버에서 반환하는 값의 타입과 클라이언트에서 반환하는 타입을 interface를 사용하여 맞춰주는 방법을 사용하였다.

 

export interface OK {
  ok: boolean;
  data: any;
}

export const isOK = (data: string): OK => ({ ok: true, data });
export const isNotOK = (data: string): OK => ({ ok: false, data });

 

내가 지정한 interface OK 와 같이 서버에서도 돌려주는 값이 OK와 같은 객체임을 알게되었고 이 점을 응용하여 isOk와 isNotOk 함수를 만들어 성공한 데이터 값은 isOk 함수의 매개변수 data에 넣어 들어오는 데이터 값과 ok: true를 포함한 객체를 리턴하고 마찬가지로 에러일 경우에는 isNotOk 함수를 사용하여 늘 객체를 리턴할 수 있도록 함수를 만들어주었다.

 

이 함수의 반환 타입은 intefface OK로 지정하였기 때문에 서버와 통신하는 외부 함수들도 이 OK 타입을 재사용할 수 있게 되었고 함수의 반환 타입을 여러개 지정해주지 않을 수 있게 되었다.

 

또한 이 isOk, isNotOk 함수를 모듈화 함으로써 서버에서 반환되는 값, 클라이언트에서 처리하여 반환하는 값을 더 쉽게 예상할 수 있게 되어서 디버깅하기 쉬워졌고, 일관성있는 코드 작성이 가능해지며 코드의 가독성도 좋아졌다.

 

 

 

 

---

 

 

😜 느낀 점

 

사실 TypeScript를 공부하면서 위에 다 적지는 못했지만 Interface를 왜 사용해야하는지 잘 몰랐는데 좋은 경험을 할 수 있었다.

interface 를 사용함으로써 런타임 에러를 막을 수 있었고, 내가 실수로 낸 오타나 다른 개발자가 작성한 코드를 수정해야할 때 옳바른 값을 주고받을 수 있다는 점이 좋았다.

 

( TypeScript를 사용하니까 뭔가 내가 코드를 제어하는 느낌...? "모든 코드의 제어는 내가 할테니 너는 나를 믿고 코드를 실행시키기만 해" 이런 기분....? )