[Typescript] 타입스크립트 시작하기(Typescript)

 

---

타입스크립트 특징

1. 컴파일 언어, 정적 타입 언어

자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있습니다. 이에 반해 타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환됩니다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있습니다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있습니다.

 

2. 자바스크립트 슈퍼셋(Superset)

타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어입니다. 따라서 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있습니다.

 

3. 객체 지향 프로그래밍 지원

타입스크립트는 ES6에서 새롭게 사용된 문법을 포함하고 있으며, 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공합니다.

 

 

타입스크립트를 사용하는 이유

1. 에러의 사전 방지

타입스크립트는 에러를 사전에 미리 예방할 수 있습니다.

javascript

typescript

두 코드 모두 두 숫자의 합을 구하는 함수 코드인데, 위는 자바스크립트로 아래는 타입스크립트로 작성했습니다.

실제로 코드를 작성해 본다면 아래와 같은데, 자바스크립트라면 아래 함수는 문자열 + 문자열로 인식하게 되어 1020이라는 결과가 나타나는 것을 볼 수 있습니다.

sum(10,20); 	// 30
sum('10','20'); // 1020

이처럼 의도하지 않은 코드의 동작을 예방할 수 있습니다. 아래와 같은 오류로 확인할 수 있습니다.

Argument of type 'string' is not assignable to parameter of type 'number'.ts

2. 코드 자동 완성과 가이드

타입스크립트의 또 다른 장점은 코드를 작성할 때 개발 툴의 기능을 최대로 활용할 수 있다는 것입니다. 요즘에 프론트엔드 개발을 할 때 가장 많이 사용되는 VSCode는 툴의 내부가 타입스크립트로 작성되어 있어 타입스크립트 개발에 최적화 되어 있습니다.

 

개발자 관점에서 자바스크립트에 타입이 더해졌을 때 어떠한 장점이 있는지 살펴보기 위해 아래 예시를 보겠습니다.

var total = sum(10, 20);
total.toLocaleString(); //'30'

위 코드는 앞의 sum()함수를 이용해 두 숫자의 합을 구한 다음 toLocalString()을 적용한 코드입니다.

위와 같이 코드를 작성할 때 total이라는 변수의 타입이 코드를 작성하는 시점에 number이라는 것을 자바스크립트가 인지하지 못하고 있습니다.

 

달리 말하자면, 개발자가 스스로 sum()함수의 결과를 예상하고 타입이 number라고 가정한 상태에서 numberdml API인 toLocaleString()을 코딩하게 되는 것 입니다.

 

total이라는 값이 정해져 있지 않기 때문에 자바스크립트 Number에서 제공하는 API인 toLocaleString()을 일일이 작성했습니. 만약 오탈자라도 난다면 브라우저에서 실행했을 때 만 오류를 확인할 수 있었을 것 입니다.

 

만약, 타입스크립트로 작성한다면 어떻게 될까요?

변수 total에 대한 타입이 지정되어 있기 때문에 VSCode에서 해당 타입에 대한 API를 미리 보기로 띄워줄 수 있고 따라서, API를 일일이 치는 것이 아니라 tab으로 빠르고 정확하게 작성해 나갈 수 있습니다.

 

---

참고:

https://serokell.io/blog/why-typescript

Why You Should Use TypeScript

https://www.inflearn.com/course/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8#

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의