왜 타입스크립트를 사용하는가? (javascript vs typescript)

타입스크립트

요즘은 웹 개발을 하기 위해서 꼭 배워야 할 언어 중에 typescript가 있습니다. javascript로도 잘 개발해왔는데, 왜 typescript를 사용할까요?

본 글에서는 javascript와 typescript의 차이를 살펴보면서 typescript에 대해 살펴봅니다.

 

javascript vs typescript

javascript

예전부터 사용해오던 javascript는 타입이라는게 없어서 편하기도 하면서, 많은 버그들을 만들어 우리들을 괴롭혀왔습니다.

 

예를들면, 두 수를 더해주는 메소드를 구현해보겠습니다.

function sum(numA, numB) {
    return numA + numB;
}

 

일반적으로는 우리는 numA와 numB에 숫자 형태의 값을 넣어서 사용할 것입니다. 아래와 같이 말이죠

console.log(sum(1, 3)) // 4
console.log(sum(7, 10)) // 17

 

만약, 동료 개발자가 문자열 형태의 숫자를 넣게되면 어떻게 될까요? 저희가 의도한 값과 전혀 다른 결과가 나올 것입니다.

console.log(sum("1", 3)) // "13"
console.log(sum(7, "10")) // "710"

 

그렇다면 이런 상황을 막기 위해서, 우리는 어떻게 해야할까요? 아래와 같이 유효성 검사를 해야할까요?

function sum(numA, numB) {
    if(typeof numA !== "number" || typeof numB !== "number") throw Error("숫자 타입의 값만 넣을 수 있습니다.");
    return numA + numB;
}

매번 이렇게 유효성 검사 로직을 추가하기엔 번거롭고, 안넣으면 버그가 생길 위험이 있습니다.

 

typescript

타입스크립트를 사용하게되면 이런 문제를 쉽게 해결할 수 있습니다. 타입스크립트는 쉽게 설명하면 javascript에 타입을 지정할 수 있다고 생각하면 됩니다.

 

위 예제를 다시 typescript로 구현해보겠습니다.

function sum(numA: number, numB: number): number {
    return numA + numB;
}

 

위처럼 인자 옆에 타입을 지정할 수 있어서, 예시와 같이 number로 지정하게되면 해당 인자에는 이제 숫자 밖에 못들어갑니다.

만약 동료 개발자가 아래와 같이 인자로 문자열을 넘기게 되면, IDE에서도 빨간줄로 표시가 되고, 컴파일도 실패하게되어 사전에 버그가 생기는 것을 막을 수 있습니다.

 

타입스크립트 playgroud에서 실행 확인

 

컴파일이 실해파면 아래와 같이 이렇게 에러까지 친절하게 알려줘서, 컴파일이 실패한 원인도 상대적으로 쉽게 찾을 수 있습니다.

Argument of type 'string' is not assignable to parameter of type 'number'.

 

개발할 때 javascript보다 더 복잡한거 같다고 생각이 들 수도 있지만, 안정적인 서비스를 제공하기 위해 타입스크립트가 엄청난 이점을 가져다 준다는 것을 깨닫게 될 것입니다. (특히 프로젝트가 규모가 클 수록 더 와닿을거 같네요)

 

타입 스크립트 Playground

웹에서 타입스크립트를 사용해보고 싶은 분은 https://www.typescriptlang.org/play에서 간단한 코드를 작성해볼 수 있습니다.

TS Playground - An online editor for exploring TypeScript and JavaScript