[타입스크립트] 개념 및 배경

타입스크립트를 공부하게 된 이유

요즘 타입스트립트의 지식을 요구하는 기업이 많아졌다.

프로젝트를 진행했을 때는 자바스크립트로 했었기 때문에 타입스크립트의 존재를 잘 몰랐었지만,

요즘 워낙 중요하게 받아들여지고 있는 언어여서 관심을 가지게 되었는데,

타입스크립트를 사용하면 확실히 매우 큰 장점을 가지고 있는 것 같아 공부해보려고 한다.

 

타입스크립트란?

타입스크립트는 자바스크립트의 단점을 보완하기 위해 만들어진 정적 타입 언어이다.

 

※동적 타입과 정적 타입

동적 타입

타입이 컴파일 실행되는 시점에 결정되는 것.

타입 없이 변수만 선언하여 값을 지정할 수 있다.

int num = 1;
float num2 = 1.01

 

정적 타입

타입이 컴파일 실행 전에 결정되는 것.

변수에 들어갈 값의 형태에 따라 자료형을 지정해주어야 한다.

컴파일 시에 자료형에 맞지 않은 값이 들어있으면 컴파일 에러가 발생한다.

num = 1
num2 = 1.01

 

타입스크립트를 왜 사용하는가?

예를 들어 숫자1 과 숫자2 를 더하는 함수를 만든다고 가정해보자.

//JS

function add(num1, num2) {
  return num1 + num2
}

add(1, 2) // 3
add(1, 2, 3) // 3
add('10', '20') // 1020

 

위의 코드는 자바스크립트로 add 함수를 실행했을 때 첫 번째 함수는 정의한 함수에 맞게 작동하지만 2번과 3번은 에러는 나지 않지만 우리가 생각하는 함수로 작동하는 것이 아니다.

 

이번에는 타입스크립트로 똑같은 함수를 작성해보자.

// TS

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

add(1, 2); // 3
add('1', '2'); // Argument of type 'string' is not assignable to parameter of type 'number'.

 

첫 번째 함수는 정상적으로 작동하지만, add('1', '2')의 함수는 함수에서 number로 타입을 지정했기 때문에 문자열을 파라미터로 넣은 함수는 오류가 난다. 

 

이처럼 자바스크립트 대신 타입스크립트를 이용하면 컴파일 이전에 오류를 사전에 방지할 수 있는 장점이 있다.

다음 글부터는 타입스크립트의 기본 타입들부터 차근차근 공부해보면서 최종적으로 프로젝트에 타입스크립트를 적용해볼 예정이다.

 

※ 타입스크립트 연습하기 좋은 사이트

https://www.typescriptlang.org/