머리말

요새 JS를 공부하면서 확장하여 심화된 공부할 부분을 찾아보다가 타입스크립트에 대해 알게 되었다. 웹 개발 채용 직군 공고를 보더라도 심심찮게 필수 요건으로서 TypeScript 기술 스택을 요구하는 곳을 굉장히 많이 볼 수 있다.

따라서 이번 시간에는 TypeScript에 대해 간단하게 알아보고자 한다.

TypeScript란?

역시 언제나 새로운 언어/라이브러리/프레임워크/모듈/엔진 등을 공부할 때에는 공식 홈페이지 소개와 공식 문서를 보는 것보다 좋은 방법은 없는 것 같다.

위의 이미지는 공식 홈페이지 메인 화면이다. 이미지를 보면 알 수 있듯이, 간단하게 보면

타입스크립트는 "type"에 대한 문법 개념을 더한 JS이다.

타입스크립트는 MS에서 개발한 자바스크립트의 상위 집합으로 볼 수 있는 프로래밍 언어로, js에 타입 시스템을 추가한 방식이다. 이를 통해 코드의 품질을 높이고 오류를 줄이는 이점이 있다.

---

왜 TypeScript를 사용하는가?

JS는 interpreter 언어이기 때문에,

런타임 환경에서 즉시 실행가능한 코드이지만

별도의 컴파일 과정을 거치지 않기 때문에 에러를 캐치하는 것 또한

런타임에서만 발견이 가능하다는 명확한 단점이 존재한다.

반면에 이제 TypeScript와 같은 경우는, 정적 타입 시스템을 도입한 컴파일 언어이기 때문에,

코드 작성 시점에서 컴파일 에러를 검출할 수 있고,

TypeScript 컴파일러(tsc)를 통해 TS to JS로 변환 과정을 거친 후 실행되기 때문에

안전성과 유지보수성을 높일 수 있다.

---

간단한 예제 : JS vs TS

간단하게 이제 예제를 사용해 보자.

가령 다음과 같은 기능을 만드는 상황을 가정해보자.

인사말을 주기 위해 "Hello, 이름!" 을 출력하도록 하자!

이를 JS로 만든다고 할 때,

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("JavaScript"));			// normal flow
console.log(greet(20241107)); 				// 의도치 않은 동작

우리는 일반적으로 문자열의 이름을 생각하지만,
js에서는 매개변수에 대해서 타입 지정을 하지 않기 때문에 다음과 같이 number 타입의 매개변수를 전달해도 오류없이 실행이 된다.

반면, typescript의 경우

function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("TypeScript"));
console.log(greet(20241107)); // 컴파일 오류: 'number' 형식은 'string' 형식에 할당될 수 없음

매개변수 뿐만 아니라 리턴값에 대해서도 타입을 명시적으로 지정이 가능하며,
타입에 대해 불일치가 일어나면 컴파일 단계에서 오류가 발생하여 이를 수정할 수 있으니 안정성이 더 높아졌다고 볼 수 있다.