TypeScript 1일차 (사용하는 이유와 장점)

React에서 TypeScript를 활용할 수 있다는 정보를 접한 후 프로젝트에서 활용하고 싶어서 배우기 시작했습니다.

 

📌 TypeScript를 적용하지 않을 때 발생하는 문제들

function printItem(arr) {
  arr.forEach(v => {
    console.log(v);
  }
}


function sum(num1, num2) {
  console.log(num1 + num2);
}

일반적인 JS를 활용한 함수입니다.
TypeScript를 사용하지 않을 때 나타나는 큰 차이점은 함수를 호출할 때 나타납니다.

 

printItem([1, 2, 3]); // 1 2 3
printItem(1, 2, 3);   // 숫자에는 forEach라는 메서드가 없기에 오류가 발생합니다.


sum(1, 2);			  // 3

sum();				  // NaN -> 매개변수가 없어 undefined + undefined가 되어 NaN이 출력됩니다.
sum(10);			  // NaN -> 10 + undefined가 되어 NaN을 출력합니다.

위 코드의 결과를 보면 JavaScript는 동적타입 언어라 런타임에서 오류가 발견(printItem(1, 2, 3))되거나
오류가 발생하지 않습니다.(sum(), sum(10))

이러면 오류를 발견하기 어렵고, 하나를 해결하면 다른 하나가 오류가 나 고치는데 비효율적입니다.

 

만약 위와 같은 문제들을 해결하고 싶다면 TypeScript를 활용해야 합니다.

 

📌 TypeScript를 적용하면 좋은 점

function printItem(arr:number[]) {
  arr.forEach(v => {
    console.log(v);
  });
}

function sum(num1:number, num2:number) {
  console.log(num1 + num2);
}

TypeScript를 활용하면 대표적인 특징은 변수들에 데이터타입을 지정할 수 있다는 것입니다.
< num1:데이터타입 > 이런 형태로 개발자의 의도를 명확하게 표현하는 것에 큰 도움이 됩니다.

만약 데이터타입을 지정하지 않았다면 자동으로 any 라고 인식하게 됩니다.

 

printItem([1, 2, 3]);
printItem(1, 2, 3);   // 매개변수와 맞지 않은 데이터타입이 와 오류가 발생합니다.

sum(1, 2);

sum();				  // 매개변수에 맞는 값이 들어오지 않아 오류가 발생합니다.
sum(10);			  // 마찬가지로 동일한 오류가 발생합니다.

TypeScript는 정적타입 언어라서 컴파일될 때 오류를 확인할 수 있습니다.
따라서 실행하면서 오류 하나씩 해결하는 것이 아닌, 한 번에 어떤 오류들이 있는지 확인이 가능합니다.

이러면 오류를 찾아내는데 시간이 더 호율적이고 함수를 개발자 의도대로 활용할 수 있게 됩니다.