📚챕터

TypeScript 기본 개념들에 대하여

📆 학습 날짜

2024 / 01 / 03 (수)

---

👨🏻‍💻 학습 내용

🎯타입스크립트는 무엇인가?

요즘 프론트엔드 트렌드는 타입스크립트는 선택이 아닌 필수과정인것 같다.
어딜가나 타입스크립트기반으로 프로젝트를 코딩하였는가 , 다른 개발자가 코딩한 코드들을 살펴보기전에 "제발 타입스크립트 선언 되어있기를 ..! " 기도까지 하는 개발자도 있다고한다.

타입스크립트는 사실 자바스크립트와 크게 차이점이 없다고한다.
즉 , 타입스크립트는 자바스크립트의 확장판(superSet) 이라고도 불린다.
타입스크립트 홈페이지에는 타입스크립트를 명확히 설명하는 한 문장이 있는데 바로 "TypeScript is JavaScript with syntax for types"다.
기존 자바스크립트 문법에 타입을 가미한 것이 바로 타입스크립트라고 볼 수 있다. 자바스크립트는 동적 타입(Daynamic Type)언어이기 때문에 대부분의 에러를 코드를 실행했을 때만 확인할 수 있다는 문제점이 있다.
동적 타입 언어라는 점은 개발자에게 자유를 선사하기도 하지만 코드의 규모가 커질수록 오히려 유지보수 및 보완하기 어렵다는 경우가 많다고 한다.

<script>
function calculator(a,b){
	return a * b 
}

calculator(5,5)//25
calculator('오','육') // NaN
</script>

calculator 함수는 두 인수를 받아 곱셈한 결과를 반환하는데, 이는 어디까지나 a,b가 숫자일 때만 가능하고, 그 외의 경우에는 함수를 사용하는 개발자가 원하지 않은 결과(또는 함수를 제공하는 측에서 원치 않는 결과)를 만들어 낼 것이다. 물론 자바스크립트에서 타입을 체크해서 이러한 문제를 방지할 수 있다.

<script>
function calculator(a,b){
if(typeof a !== 'number' || typeof b !== 'number'){
	throw new Error('a와 b 모두 숫자여야 합니다.')
}
	return a * b 
}

calculator(5,5)//25
calculator('오','육') //Uncaught Error: a와 b 모두 숫자여야 합니다.
</script>

그러나 모든 함수와 변수에 이러한 타입 확인 연산자인 typeof를 적용해서 체크하는 것은 너무 번거롭고 코드의 크기를 과도하게 키우게 된다. 모든 인수에 대해,그리고 인수가 객체라면 내부 프로퍼티에 대해 모두 체크한다면
자바스크립트 내에서는 사용할 수 있는 가장 완벽한 방법이지만 개발자에겐 너무나도 번거로운 작업이다.

타입스크립트는 이러한 자바스크립트의 한계를 벗어나 타입 체크를 정적으로 런타임이 아닌 빌드(트랜스파일)타임에 수행할 수 있게 해준다.

<script>
function calculator(a: number, b: number){
	return a * b 
}

// tsc로 이 코드를 자바스크립트로 트랜스파일하면
/* Argument of type 'string' is 
not assignable to parameter of type 'number.' 에러가 발생한다.*/
// 이 코드는 타입 문제가 해결되기 전까지 사용 불가능하다.
calculator('오','육') 
</script>

타입스크립트는 변수에 타입으르 설정할 수 있으므로 예제의 a와 b변수에 number 타입을 지정하면 코드를 작성할 때 오직 숫자만 할당할 수 있게 된다.
이러한 특징 덕분에 런타임까지 가지 않아도 코드를 빌드하는 시점에 이미 에러가 발생할 가능성이 있는 코드를 확인해준다.

➡️ 다음글에서는 타입스크립트를 리액트 코드에서 활용하는 방법에 대해 살펴보자.