[TypeScript] 타입스크립트 첫걸음

솔로 프로젝트를 기획하는 중에 누군가 타입스크립트를 써보는 게 어떠냐는 제안을 했다. 생각해보니 JD를 보면 타입스크립트를 사용하는 곳들도 꽤 있었던 기억이다. 좋아, 그럼 한번 해보지 뭐 생각하고 프로젝트에 도입해보기로 했다. 그런데...타입스크립트가 뭐지?

*What is TypeScript

자바스크립트의 특징 중 하나는 타입 시스템이 없다는 점이다. Java 등의 언어에서는 변수에 타입을 미리 지정해서 사용하는 반면, 자바스크립트에서는 변수에 다양한 타입의 값을 사용할 수 있다. 전자를 정적 타입 언어, 후자를 동적 타입 언어라고 한다.

동적 타입 언어의 경우 개발 환경이 유연 장점이 있으나, 런타임 환경에서 쉽게 에러가 발생한다는 단점이 있다. 반대로 정적 타입의 언어는 프로젝트 초기에 소요되는 시간이 많지만, 프로그램 실행 전에 상당수의 오류를 잡아낼 수 있다는 장점이 있다. 동적 타입 언어인 자바스크립트에 정적 타입 시스템이 있었다면 약 15%의 버그를 사전에 예방할 수 있다는 연구결과도 있다고 한다.

여기까지 왔다면 대략적인 감이 잡힌다. 자바스크립트에 강한 타입 시스템을 도입한 것이 바로 타입스크립트(TypeScript)다.

타입스크립트는 마이크로소프트에서 개발했다. 따라서 VSCode와 함께 쓰면 궁합이 매우 좋다고 한다! (놀라운 자동완성기능)

 

*타입 표기 / 타입 종류

타입스크립트에서는 변수 선언 시 아래와 같이 세미콜론(:)을 사용해 미리 타입을 지정해준다. 

// sample typescript variables
const food: string = 'aglio olio';
const price: number = 12000;
const like: boolean = true;

기본 타입 불리언, 숫자, 문자열, null/underfined 외에 특별한 타입인 any, void, never를 가지고 있다. 각 설명은 아래와 같다.

- any : 모든 타입에 사용 가능하다. 변수 타입을 any로 설정해 놓으면 모든 타입의 값이 올 수 있다. (하지만 any의 사용은 최대한 지양되는 게 좋다고)

- void : null과 undefined만을 값으로 가질 수 있다. 아무런 값도 반환하지 않는 함수의 반환 타입을 표시할 때 사용한다.

- never : 아무런 값도 가질 수 없는 타입이다.

 

*  Reference :

자바스크립트 개발자를 위한 타입스크립트 (https://ahnheejong.gitbook.io/ts-for-jsdev/01-introducing-typescript/static-type-analysis)

Ben Awad Youtube : Typescript vs. Javascript (https://www.youtube.com/watch?v=D6or2gdrHRE)

Heropy Tech (https://heropy.blog/2020/01/27/typescript/)