[TypeScript] TypeScript를 사용해야하는 이유

TypeScript는 JavaScript의 상위집합으로, 정적 타입을 지원하는 프로그래밍언어입니다.

JavaScript에 몇 가지 기능을 추가하여 개발자들이 코드를 더 잘 관리하고 유지보수 할 수 있도록 도와줍니다.

TypeScript를 사용해야 하는 이유에 대해 알아보겠습니다.

 

JavaScript는 dynamically typed 언어

JavaScript는 dynamically typed 언어입니다. 

이는 변수의 타입을 선언할 필요가 없고, 실행 중에 타입이 자동으로 결정되는 것을 의미합니다.
우리가 맨날 작성하는 코드나 메서드에 대해서 항상 기억을 가지고 있는 것은 힘든 일입니다.

 

예제를 보면서 분석해 보겠습니다.

function add(num1, num2) {
    return num1 + num2;
}

이렇게 num1과 num2를 더하는 함수를 만들어보았습니다.

여기서 변수를 num이라는 이름으로 지어뒀기 때문에 숫자가 들어가는구나 유추할 수 있습니다.

function add(var1, var2) {
    return var1 + var2;
}

하지만 이렇게 var라는 이름으로 함수를 만들어두었다면 나중에 이 함수를 봤을 때 혼란스러울 수 있습니다.

 

var1, var2에 String을 넣어서 실행해 보겠습니다.

function add(var1, var2) {
    return var1 + var2;
}
console.log(add(1, 2));
console.log(add(1, '2'));

의도하지 않은 String 값이 들어가도 실행이 잘되는 것을 확인할 수 있습니다.

 

JavaScript typeof

JavaScript의 typeof의 기능을 사용해도 되지 않을까?라고 생각할 수 있습니다.

function addTypeSafe(num1, num2) {
    if (typeof num1 === 'number' && typeof num2 === 'number') {
        return num1 + num2;
    } else {
        throw Error('숫자만 입력할 수 있습니다.');
    }
}
console.log(addTypeSafe(1, 2));
console.log(addTypeSafe(1, '2'));

위처럼 addTypeSafe 메서드를 만들어서 변수들의 type을 확인해 줄 수 있습니다.

 

실행해 보면 string을 넣었을 때 Error를 던져주는 것을 확인할 수 있습니다.

실제로 하고 싶은 것은 숫자를 두 개 더하는 코드인데 이 파라미터 argument들을 확인해 주기 위해서 함수가 길어졌습니다.

그리고 이 확인하는 방법도 실행해 봐야지만 에러를 확인할 수 있습니다.

 

이런 상황에 코드를 작성하는 순간에는 원하는 타입이 들어갔는지 알 수 없습니다.

 

TypeScript

위의 문제들을 해결해 줄 수 있는 게 TypeScript입니다.

ts 파일에 예제를 구현해서 확인해 보겠습니다.

 

number type을 명시적으로 선언하여 함수를 만들었습니다.

number 데이터만 입력한 경우에는 문제가 없지만 string 타입을 입력한 경우에는 빨간색 줄이 나타납니다.

 

에러 내용을 확인해 보면 Argument of type 'string' is not assignable to parameter of type 'number'라고 나옵니다.

말 그대로 string 타입을 number 타입에 넣을 수 없기 때문에 나는 에러입니다.

실행하기 전에도 정확하게 문제가 되는 부분을 알려줍니다.

 

그리고 실행을 해보면 컴파일이 안되기 때문에 실행이 안됩니다.

 

 

 

이처럼 TypeScript를 쓰게 되면 함수 정의, 변수 정의, 클래스 정의 이러한 모든 정의들을 조금 더 정확하게 할 수 있습니다.

그리고 처음에 원래 설계된 의도 그대로 사용할 수 있게 됩니다.