TypeScript?

JavaScript vs TypeScript

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

add();

위의 코드를 봤을 때 결과값은 어떻게 나올까?
예상한대로 NaN이 나온다.
이처럼 JavaScript는 아무런 힌트도, 에러도 주지 않는다.

JavaScript는 동적 타입 언어로 실행되는 시점 즉, 런타임에 타입이 결정되고 오류가 있으면 그 때 발견된다.
따라서 개발자가 실수하게 된다면 사용자가 그 오류를 그대로 볼 수 있다.
이러한 문제점을 해결하기 위해 우리는 TypeScript를 알아볼 필요가 있다.

TypeScript

//          👇 a, b가 number타입임을 명시   👇 이 함수가 반환하는 값이 number임을 명시
function add(a: number,b: number): number {
	return a+b
}

const result = add(1,'2'); // 인자 '2'의 타입이 'number'가 아닙니다라는 경고 띄워줌
console.log(result)

TypeScript는 위와 같이 작성한다.
기존에 사용하던 JavaScript와는 다른 부분이 보일텐데, 바로 number라는 타입이 적혀있다는 것이다.
어떠한 값에 대해 타입을 명시적으로 작성할 수 있는 기능을 TypeScript에서 제공하고 있다.

TypeScript를 사용하는 이유

TypeScript는 JavaScript 기반의 정적 타입 문법을 추가한 프로그래밍 언어로 컴파일시 파일 오류가 발견된다. 이러한 TypeScript는 동적 언어인 JavaScript를 보완할 수 있다.
TypeScript를 사용하는 이유에는 여러가지가 존재한다.

타입 시스템

언어의 이름에서도 알 수 있듯이 'Type'이 가장 큰 이유가 될 수 있다.
'Type'이란 한글로 자료형이라고 할 수 있다.
어떠한 변수가 문자인지, 숫자인지 등 추상 형태이다.
컴파일 과정에서 타입을 결정하게 되는데, 변수에 들어갈 값의 형태에 따라 자료형을 지정해 주어야 한다는 것이다.

높은 생산성

JavaScript로 코드를 작성할 때, 함수의 매개변수로 들어오는 값이 무엇인지 알기 위해 여러 파일을 살펴야했지만, TypeScript를 사용하면 변수의 이름 뿐만 아니라 데이터의 자료형까지 알 수 있게 된다.
즉, 개발자는 로직과 같은 커다란 구조에 집중할 수 있다.
또한, 객체 안의 필드값을 다 기억할 필요 없이 IDE가 자동으로 리스트 업을 해주기 때문에 높은 생산성을 자랑한다.

TypeScript의 단점

초기 세팅의 어려움

TypeScript는 독자적인 언어가 아니기 때문에 기존의 JavaScript 엔진에서 실행된다.
따라서 기본적으로 설치해야하는 모듈들이 존재하고 컴파일을 위한 옵션도 설정해야한다.

생산성 저하

TypeScript가 높은 생산성을 자랑하는데 왜 반대인 생산성 저하가 단점인지 의문이 들 것이다.
매번 타입을 지정해줘야하는 번거로움과 타입 에러로 실제 개발보다 시간을 더 할애할 수 있기에 TypeScript에 익숙하지 않은 개발자는 오히려 생산성이 저하될 수 있다.