타입스크립트를 쓰는 이유와 장점

2021.02.19 작성

 

타입스크립트에 대한 관심이 높아지면서 공식 홈페이지에서 문서도 찾아보고 강의를 들은 내용을 정리해야겠다는 생각이 들어 관련 카테고리를 하나 더 만들었습니다. 타입스크립트 홈페이지에서는 핸드북이 정말 상세하게 작성되어있도 타입스크립트 로 작성된 코드를 자바스크립트 로 변환을 하는 Playground 로 제공이 됩니다.

 

필자는 인프런에서 캡틴 판교님의 강의를 수강하면서 직접 테스트를 해보고 관련 서적을 찾아본 내용을 정리하고 합니다. 

 

Why is Typescript 

---

타입스크립트를 사용하기 전에 왜 사용할는 걸까? 자바스크립트에는 typeof로 value의 데이터 타입을 반환하는 연산자가 있다고 해도 동적타입특성상 어떤값이 할당이 될지 힘듭니다. 아래의 코드를 확인해 합시다.

/**
 * @param {number} num_1 첫번째 숫자
 * @param {number} num_2 두번째 숫자
 */
function sum_js(num_1, num_2) {
    return num_1+num_2
}
sum_js(10, '20'); // 1020

작성된 코드의 결과가 어떻게 출력이 될까? 파라미터 타입이 '20' 은 number 타입이 아니기 때문에 1020 값이 출력이 됩니다. 중요한 점은  sum_js 가 string 타입의 파라미터를 받게 되더라로 함수가 에러없이 실행이 된다는 점입니다. 만약 위 함수가 서비스 로직으로 동작중이 였다면 매우 위험한 상황이 생길수도 있다(금액적인 부분이 연결이 되었다면 분명 손해배상 청구에 대한 신고가 들어올것입니다. ㅠㅠ) 

 

타입이 가져올수 있는 위험성을 인지 해야한다 그렇다면 어떻게 인지를 해야할까 ? 컴파일 전 자바스크립트파일에서 인지를 할수 있는 방법이 있다. 해당 코드에 // @ts-check 를 입력해 보자.

@ts-check Javascript 타입 체크

그럼 컴파일을 하기 전에 타입에 대한 에러를 출력을 합니다. 주석으로 작성해놓은 @param 의 타입을 확인하고 //@ts-check에서 타입 체크를 하여 sum_test() 함수를 호출할때 파라미터가 타입이 맞지 않다고 에러를 출력을  하는것입니다.위 코드를 확인해 보셨다면 자바스크립트에서도 타입에 대한 체크가 가능하다는것을 확인할수가 있었습니다. 

 

하지만 주석으로 매번 타입에대한 내용을 주석으로 작성하고 파일마다 @ts-check를 하는것은 코드상 중복이 되는 내용을 많아 보기가 좋지 않을수 있습니다. 이부분을 좀더 간결하고 유연성이 좋게 개발을 도와주는 것이 Typescript 가 해줍니다. 

 

 

ts 파일로 작성한 함수

코드 자동완성 제공 

---

타입스크립트는 타입에 대한 자동 추론으로 각 타입에 대한 API를 자동 완성을 제공합니다. 

 

타입스크립트를 사용하였을때 코드의 품질과 에러 방지 및 생산성이 높아지는것 같습니다. 

 

 

참고 URL 
캡틴 판교님 타입스크립트 핸드북 : https://joshua1988.github.io/ts/

타입스크립트 공식 홈페이지 : https://www.typescriptlang.org/

ECMA Script : https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8