[Javascript] TypeScript 1 - 타입스크립트란? (자바스크립트를 타입스크립트처럼 써보자)

1. 타입스크립트란?

타입스크립트란 이름 그대로 자바스크립트에 타입을 부여한 언어이다.

공식문서의 설명을 그대로 빌리자면, 타입스크립트는 브라우저에서 실행하기 위해 파일을 한번 변환해주어야 한다. 이 변한 과정을 우리는 컴파일(compile)이라고 부른다(수많은 공식문서들 중에 가장 친절한 설명인 것 같다).

 

자바스크립트의 특정 값을 한눈에 확인할 수 있는 확장된 언어라고 볼 수 있다.

 

 

2. 왜 타입스크립트를 써야할까?

에러 방지

에러방지는 타입스크립트의 궁극적인 목적이라 할 수 있다.

아래의 코드를 보자.

//sample.js
function sum(a, b){
	return a + b;
}


//sample.ts
function sum(a: number:, b: number) {
	return a + b;
}

두 함수 모두 합을 구하는 함수지만 하나는 자바스크립트, 하나는 타입스크립트로 작성했다.

두 함수를 호출한다고 해보자.

sum(20, 20); //40

두 인자값을 더했으니 40이 나올 것이다.

그런데 문자열을 전달하면 어떻게 될까?

//sample.js
sum('40','40'); // '4040'

//sample.ts
sum('40','40'); // Error

'string' 타입은 'number'타입의 변수에 할당될 수 없다는 것을 확인할 수 있다.

 

 

3. 자바스크립트를 타입스크립트처럼 써보자

//sample.js
//자바스크립트를 타입스크립트처럼 사용하기

// @ts-check
/**
 * 
 * @param { number } a 첫번째 값
 * @param { number } b 두번째 값
 * @returns 
 */
function gugudan(a, b){
    return a * b;
}


gugudan(3 , '7');

해당 소스는 js 파일에서 작성하였기에 만약 타입을 지정해주지 않았다면 절대 에러가 발생하지 않았을 것이지만

// @ts-check 를 기재해주면 자동으로 함수에 타입스크립트가 적용되어 위처럼 컴파일 과정에서 에러를 감지하여 개발자에게 알려주는 것을 확인할 수 있다.

그리고 @param 을 명시해주면 위와 같이 함수의 인자값에 대한 Description을 추가할 수 있기 때문에 협업 측면에서도 유리하다.