요즘 채용공고를 보면, 타입스크립트를 사용하는 회사들이 늘어나고 있음을 파악할 수 있다.
왜 기업들은 TypeScript를 사용하며 이는 정확하게 무엇일까?

TypeScript를 한번도 사용해보지 않았기에 스터디들 통해 이를 정복해보고자 한다.
첫 단계로 간략하게 TypeScript에 대한 정의와 등장 배경에 대해 알아보자❗️

✨ TypeScript란?

자바스크립트에 타입을 부여한 언어이다.

대규모 애플리케이션을 개발하는 데에 있어서 자바스크립트는 어렵고, 불편하다는 단점이 발생되기에 등장한 언어라고 볼 수 있다. 자바스크립트의 확장된 언어라고 말할 수 있다.

👇 확장된 구조는 아래와 같다.

타입스크립트는 자바스크립트(ES5)의 문법을 그대로 사용할 수 있으며, ES6의 새로운 기능들 또한 별도의 작업없이 Node.js와 같은 브라우저 엔진에서 사용이 가능하다.

🤔 자바스크립트만을 사용하는 것도 복잡하고 어려운데, 왜 타입스크립트를 많이 사용하는 것일까?????

✨ 장점

정적 타입의 지원

타입스크립트는 정적 타입을 지원하기 때문에, 에러를 사전에 미리 예방할 수 있다는 것이 가장 큰 장점이다.

예제 코드로 이해하기

• 자바스크립트

function minus(a, b) {
  return a - b;
}

console.log(minus("2", "3"));	// -1

자바스크립트에서 빼기 함수를 실행하면 문자열 2와 3을 입력받아도 알아서 -1로 결과 값을 출력하도록 되어있다.

function add(a, b) {
  return a + b;
}
console.log(add("10", "21"));	// "1021"

또한, 더하기 함수를 작성하여 문자열 10, 21을 입력받으면 31이 아닌 1021이라는 문자열을 만들어 의도하지 않은 결과값이 발생하게 된다.

이러한 상황이 발생한 이유는 변수나 반환값의 타입을 사전에 지정하지 않는 자바스크립트의 동적 타이핑(Dynamic Typing)에 의한 것이다.

하지만 이를 타입스크립트로 작성하면 어떻게 되는지 살펴보자.

• 타입스크립트

function minus(a: number, b: number) {
  return a - b;
}
console.log(minus('2', '3'));	// Error

자바스크립트와 달리, 타입스크립트에서의 minus함수에 문자열 2와 3을 넣으면 형식이 맞지 않다는 오류가 아래처럼 발생하게 된다

'string' 형식의 인수는 'number' 형식의 매개 변수에 할당될 수 없습니다.ts(2345)

이에 대한 오류를 수정한 코드이다.👇

function minus(a: number, b: number) {
  return a - b;
}
console.log(minus(2, 3));	// -1

number형식에 맞춰 입력해야 오류 없이 minus함수가 실행되는 것을 알 수 있다.
더하기 함수도 마찬가지이다.

function add(a:number, b:number) {
  return a + b;
}
console.log(add("10", "21"));

'string' 형식의 인수는 'number' 형식의 매개 변수에 할당될 수 없습니다.ts(2345)이라는 오류를 발생시키며,

console.log(add(10,21)); // 31

위와 같이 number형식으로 작성해야 정확하게 숫자 31을 반환받을 수 있다.

이처럼 TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있다.
명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술하여 코드의 가독성을 높이고, 예측과 디버깅을 쉽게 유도한다.

🌈 결론

TypeScript를 정확하게 사용하는 방법을 알게 되면, 대규모 애플리케이션을 관리/유지/보수하는 것에 용이할 것이라 생각되어진다.
자바스크립트만 사용했던 나에게 타입스크립트는 굉장히 💖 매력적인 💖 언어로 다가왔다. 이에 대한 스터디를 진행하면서 이번에 TypeScript를 제대로 공부할 것이다.

📚 학습할 때, 참고한 자료 📚

• 타입스크립트란?
• TypeScript #1 타입스크립트란 무엇인가?
• 타입스크립트(TypeScript)란?