[TypeScript] Introduction to TypeScript

Jaehyeong Kwon·2022년 4월 14일

💻 TypeScript

개발자들이 배워보고 싶은 언어 Go, Python, Kotlin 이후에 4등으로 위치해 있는 언어가 TypeScript이다.

왜 사람들이 타입스크립트에 관심을 갖고 이 언어가 왜 생겨났는 지를 살펴보고자 한다.

기본적인 타입스크립트란 다음과 같다.

타입이 있는 자바스크립트이다.

대규모 애플리케이션을 개발하는 데에 있어 자바스크립트를 사용하면 어렵고, 불편한 부분이 있기에 등장한 언어이다. 자바스크립트의 확장 버젼이라고 생각하면 쉽다.

앞 서 언급했 듯이 확장된 자바스크립트가 타입스크립트라고 이야기하였다.
이를 시각화하면 아래와 같다.

타입스크립트 내에 ES6, ES5 또한 포함되어 있어 별도의 작업 없이 Node.js에서도 이용이 가능하다.

대규모 어플리케이션을 구현하는데 있어 자바스크립트를 사용하면 어렵고 불편한 부분이 있다고 앞 서 이야기 하였다. 이번에는 구체적인 예시를 통해 타입스크립트를 이용해야하는 이유를 알아보고자 한다.

function minus(x, y) {
	return x - y ;
}
console.log(minus("2","3")); // -1

위에 간단한 뺄셈함 수에서 함수를 실행하면 결과 값이 -1이 나온다. Argument의 Type이 String이 들어감에도 불구하고 정수로 계산이 된다.

function plus(x, y) {
	return x + y ;
}
console.log(plus("2","3")); // "23"

위의 덧셈 함수에 대해 살펴보자. 문자열 2,3을 입력 받으면 5가 아닌 23의 문자열을 만들게 된다.
이러한 이유는 C와는 다른 자바스크립트의 동적 타이핑에 의한 것이다.

동적타이핑(Dynamic Typing) 이란?
변수나 반환 값의 타입을 사전에 지정하지 않는 것이다.

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

function minus(x: number, y: number) : number{
	return x - y ;
}
console.log(minus("2","3")); // Error

타입스크립트에서는 위의 함수에 문자열을 넣으면 형식이 맞지 않다는 오류가 발생한다. 함수를 정의할 때 매개 변수의 타입을 지정해 주었기 때문이다. 매개 변수의 타입 뿐 아니라 return 값의 타입도 지정해 줄 수 있다.

타입스크립트는 정적 타이핑을 지원한다. 인터프리터 언어인 자바스크립트와는 다르게 컴파일 단계에서 오류를 잡아낼 수 있다.

물론 컴파일 과정이 포함되기 때문에 시간이 오래 걸릴 수 있는 단점도 존재하기는 한다.

나무와 같이 성장하는 사람