[TypeScript] 타입스크립트란?

 

 

타입스크립트란?

타입스크립트는 자바스크립트에 타입을 부여한 언어이다. 자바스크립트의 확장된 언어라고도 할 수 있다.

타입스크립트는 자바스크립트와 다르게 브라우저에서 실행하기 위해 파일을 한 번 변환해줘야 한다. 이 변환 과정을 컴파일이라 부른다.

 

즉, 자바스크립트의 모든 단점을 보완해 만든 언어이다.

타입스크립트는 동적인 자바스크립트 언어에 타입을 미리 부여하여 컴파일 시 에러를 잡을 수 있다.

 

 

 

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

 

1) 에러의 사전 방지

 

타입스크립트는 타입을 미리 부여하기 때문에 코드 작성시 지정한 타입과 맞지 않은 타입을 넣거나, 아예 넣지 않은 경우에 미리 오류를 알려주어 사전에 에러를 방지할 수 있습니다.

 

만약 변수 num의 type을 number로 지정하였다고 예시를 들어보자.

let num:number;

그런데 num에 number type이 아닌 string 타입으로 대입을 한다고 가정해보자.

num = "text";

위와 같이 지정한 type과 맞지 않은 값을 대입하였을 때 VSCode에서는 "text" 형식의 인수는 'number' 형식의 매개 변수에 할당될 수 없다는 알림창이 뜰 것이다.

만약 자바스크립트를 사용하였다면 우리는 디버깅을 한 후 브라우저에서 해당 오류를 확인할 수 있었을 것이다.

하지만, 타입스크립트를 사용하여 타입을 미리 지정하고, 그 타입과 맞지 않을 때 미리 오류를 알 수 있어 에러에 대해 사전적으로 방지할 수 있다.

 

 

2) 코드 자동 완성 가이드

 

타입스크립트를 사용하면 코드를 작성할 때 개발 툴의 기능을 최대로 활용할 수 있다.

특히 VSCode의 경우 해당 개발 툴의 내부가 타입스크립트로 작성되어 있기 때문에 타입스크립트 개발에 최적화되어 있다.

 

function add(a: number, b: number): number {
  return a + b;
}

let result = add(20, 30);

타입스크립트로 작성한 위의 코드 예시를 보자.

해당 함수를 보면 매개변수의 타입을 미리 지정하고 함수 반환 값의 타입도 미리 지정할 수 있다.

 

▶ add(20, 30) 처럼 매개변수에 number 타입이 아닌 add(20, '30') 처럼 다른 타입이 들어왔을 시 오류 메시지를 사전에 띄워준다.

 

▶ 함수 반환 값의 타입을 미리 지정해주었다. 따라서 변수 result에 타입이 지정되어 있기 때문에 해당 타입에 대한 API를 미리보기로 띄워줄 수 있다. 

 

예를 들어, Number에서 제공하는 API인 toLocaleString(), toString() 등을 일일이 작성해 줄 필요가 없다.