Typescript 재정리

김병호·2022년 9월 8일

JavaScript type typescript

#타입스크립트 재정리

사용 목적

변수나 함수에 '타입'이라는 의도적인 제약을 가해서,
빌드 및 배포를 하기 전에 관련된 오류를 미리 찾아내고 해결하기 위해서 사용하고,
결과적으로 안정성과 편의성을 보다 쉽게 확보하기 위하여 사용합니다.

특징

변수에 타입을 정할 수 있고 함수는 파라미터와 반환 값에 대한 타입을 정할 수 있다.

기본 예시

변수

<script> 
  const a = 3;
  const b = '5';
</script>

<script lang='ts'>
  const a:number = 3;
  const b:string = '5';
</script>

함수

<script> 
  function getId(id) {
    return new Promise((resolve)=>{
    	resolve('TEST');
    });
  }
</script>

<script lang='ts'>

  function getId(id:number):Promise<string> {
    return new Promise((resolve)=>{
    	resolve('TEST');
    });
  }

  // 또는
  declare function getId(id: number): Promise<string>;
</script>

장점

충분한 피드백
변수에 지정한 타입 이외의 값이 할당되는 경우는 오류로 검출된다.
오류 메시지를 통해 정상 동작에 필요한 피드백을 충분히 받을 수 있다.
연동 작업에 소요되는 리소스 감소
- API에게 전달할 요청 파라미터, API로부터 전달받을 응답 파라미터를 명확하게 표현할 수 있음.
- 인터페이스를 정의하고 보다 맞춤식의 타입을 정의할 수 있음
- 구현 이후 테스트 시, 연동 규격서나 관련코드를 다시 들여다봐야하는 일이 적어짐
프로덕션 내의 휴먼 에러 감소
- 협업 과정에서 발생할 수 있는 커뮤니케이션 로스가 있는 경우, 깜박하고 미처 구현하지 못한 경우
- 빌드 전에 오류로 검출되므로 실수로 인한 코드가 빌드 & 배포될 일이 적어진다.
백엔드 프론트엔드 통합
- 풀스택으로 타입스크립트를 사용할 경우, 공통의 타입을 정의하고 레퍼런스하도록 구현함으로써
- 데이터 포맷을 강제할 수 있기에 개발 안정성을 쉽게 확보할 수 있다.
API 문서화, 연동 테스트 등등, 코드 작성 이후 단계에서 품질을 보장할 수 있는 방법에 의존하는 것 보다 코드 작성 단계에서 IDE에서 제공하는 자동 완성 및 피드백에 의존하는 것이 개인의 생산성과 조직의 생산성에서 보다 더 좋다.

단점

요구사항 변경, 기능변경, 리팩토링으로 인해 any로 도배될 가능성-> 안하는게 나음
(적재 적소에 타입을 지정하는 요령이 필요)
Advance Type, Utility Type 등, 제공하는 기능의 컨셉이 생소할 수 있다.
(문제 해결을 위한 자원들에 대한 개념, 활용법을 습득해야한다.)
런타임 이전의 변수, 함수의 정합성을 보장하는 것이지, 런타임 이후의 동작을 보장하는 것이 아니다.
(보장하는 범위에 한계가 있음을 유의하여 Type guard를 작성하거나, 기타 라이브러리를 사용해야한다.)