[TYPESCRIPT] 타입스크립트란? 자바스크립트와의 차이점

TypeScript

타입스크립트, TS, 타스라고 불리우는 언어로

공식 문서에서는 Strongly Typed Programming Langauge 라고 소개한다.

JavaScript With Syntax For Types.

해석하자면 자바스크립트에 타입을 강하게 부여한 언어이다.

 

 

Type?

타입이란 자료형을 의미한다.

자바스크립트에서 사용되던 number, string, boolean, array, object 등이 해당된다.

 

자바스크립트에서 타입을 아예 지정하지 않았던 것은 아니지만

타입스크립트는 보다 강하게, 거의 모든 상황에 타입을 명시해주는 언어로 이해할 수 있다.

 

 

TypeScript vs JavaScript

자바스크립트와 타입스크립트의 차이점을 표로 정리하자면 아래와 같다.

JavaScript	TypeScript
동적 언어 런타임에 타입 결정 / 오류 발견	정적 언어 컴파일 타임에 타입 결정 / 오류 발견
	타입 안정성을 가짐 - 코드에 버그가 줄어든다 - 런타임 에러가 줄어든다 - 생산성이 늘어난다

 

컴파일 타임과 런타임

Compile Time

• 작성된 소스코드를 기계 또는 응용 프로그램이 읽을 수 있는 형태로 변환(compile)이 이루어지는 때

Run Time

• 컴파일 과정을 마친 기계나 응용 프로그램이 사용자에 의해서 실행(run)되는 때

 

동적 언어와 정적 언어

동적 타입 언어. Dynamic Typed Language

• 런타임에 변수의 타입이 결정되면서 타입 오류가 발견된다.
• 대표적으로 Python, JavaScript
• 타입에 대한 제한이 없어 유연성이 높은 것이 장점이다.
• 오탈자를 포함한 모든 에러를 런타임에서 확인해야 하는 부분이 단점이다.

정적 타입 언어. Static Typed Language

• 컴파일 타임에 변수의 타입이 결정되면서 타입 오류가 발견된다.
• 대표적으로 C++, Java, TypeScript
• 컴파일 과정에서 타입 에러 해결이 가능해 안정성이 높고, 실행 속도가 빠른 점이 장점이다.
• 코드 작성 시 유연함이 떨어지는 것이 단점이다.

 

정적 타입 언어, 타입스크립트

소스 코드만 언뜻 보기에는 JavaScript와 크게 다른 부분이 없다.

오로지 TypeScript가 타입 추론을 한다는 것.

하지만 이 부분이 큰 차이를 만들어낸다.

 

브라우저는 TypeScript를 바로 이해하지 못하기 때문에 JavaScript로 변환(컴파일) 해주는 과정을 거친다.

TypeScript는 이 컴파일이 이루어지기 이전에 코드를 읽고 에러를 미리 판단한다.

실행 이전에 타입이 미지정된 곳에는 지정해달라는 안내를 띄우고, 잘못된 곳에는 오류를 표시해준다.

 

만약 TypeScript로 작성된 파일(확장자 .ts)이 성공적으로 컴파일 된다면?

그것이 타입스크립트 코드를 제대로 작성했다는 의미가 된다.

 

이런 순서를 인지함으로써 '안정성을 갖는다', '생산성이 높다'와 같은 장점을 제대로 이해할 수 있게 된다.

 

 

코드 맛보기

본격적으로 타입스크립트를 알아가기 이전에 코드를 찍먹해보자.

 

아래 예시 코드를 각각 JavaScript, TypeScript 에서 작성해보면 얻을 수 있는 결과이다.

[1, 2, 3, 4] + false 
// JS ? 1,2,3,4false
// TS ? Errors in code : Operator '+' cannot be applied to types 'number[]' and 'boolean'.

JavaScript는 문제가 없다. 하지만 TypeScript는 컴파일 에러가 발생한다.

[1, 2, 3, 4] 는 배열이고, false 는 불리언이기 때문에 서로를 + 로 결합할 수 없다는 것이 이유이다.

 

 

다음은 JavaScript로 작성한 코드다.

// JS
function addJS(num1, num2){
  console.log(num1 + num2);
}
addJS(1); // ? NaN
addJS(1, 2); // ? 3
addJS("hello", "world"); // ? helloworld

인자값을 한 개만 받은 경우에 NaN를 반환하고,

인자로 숫자를 받거나 문자를 받거나 상관 없이 덧셈을 진행할 수 있다.

 

이번에는 위 코드를 TypeScript로 조금 변환하여 작성한 코드다.

// TS
function addTS(num1:number, num2:number){ // 숫자 타입 지정
  console.log(num1 + num2);
}
// addTS(1); // 에러로 실행 불가
addTS(1, 2); // ? 3
// addTS("hello", "world"); // 에러로 실행 불가

각 인자의 타입을 미리 지정해주어야만 하기 때문에 : 을 이용해 num1:number 와 같이 작성해준다.

이로써, 두 인자로는 숫자를 받아야만 한다.

인자값을 한 개만 받은 경우와 문자를 받은 경우는 에러로 실행할 수 없게 된다.

 

 

이렇게 타입스크립트 찍먹은 마무리하고, 다음 글에서 제대로된 타입스크립트를 공부해보자.

 

 

---

참고

타입스크립트 공식문서

노마드코더 - TypeScript로 블록체인 만들기

코딩애플 - 타입스크립트 쓰는 이유 & 필수 문법 10분 정리