타입스크립트의 등장배경
자바스크립트로 작업하고 있던 어느 날.
갑자기 에러가 나기 시작해 원인을 찾아 몇시간이나 디버깅했지만
나중에 "변수 오타"가 문제였던 것을 알고 황망하기 그지없었다. 😩
문제
자바스크립트는 동적 타이핑 언어이다.
즉 변수의 자료형을 자유롭게 바꿔가며 사용가능하다.
nums = [1234];
// A few months later...
nums = 5;
// nums가 갑자기 배열에서 숫자 5로 재할당됨??위 특징은 자유롭다는 장점이 있으나 실수하기 쉽고 나중에 원인을 발견하기도 어렵다.
또한 자바스크립트는 인터프리터 언어이다.
따라서 코드를 실행하기 전에는 코드가 올바른지 검사할 방도가 없다.
온리 런타임오류로만 문제가 있는지 알아차릴 수 있다.
- 인터프리터 언어?: 소스 코드를 한 줄씩 읽어서 실행하는 언어.
- 런타임오류?: 프로그램 실행 도중에 발생하는 오류.
그래서 위 자바스크립트의 단점을 해결해줄 타입스크립트가 널리 쓰이기 시작하였다.
타입스크립트의 특징
- 타입스크립트는 코드가 실행되기 전 컴파일러를 거쳐서 기계어로 모두 변환되어 실행되는 컴파일 언어이다.
- 타입스크립트는 정적 타이핑을 지원한다. 동적타이핑의 반대되는 개념으로, 타입을 고정함.
- VS Code같은 에디터의 intellisense와 함께라면 효율이 1000배 증폭.
- TS는 자바스크립트에 문법을 추가해 사용하는 언어이다. 이를 슈퍼셋이라고 한다.
웹브라우저나 Node.js는 자바스크립트만 읽을 수 있기 때문에 TS코드는 그대로 실행할 수 없다. 따라서 JS로 변환한 파일을 실행해야한다.
타입스크립트 코드를 자바스크립트 코드로 트랜스파일해주는 도구를 타입스크립트 컴파일러(TSC)라고 한다.
-
컴파일러?: 컴파일하는 프로그램으로, 한프언어에서 다른프언어로 번역하는 것을 이야기한다. 보통 컴파일이라고 하면 소스코드를 컴퓨터가 실행할 수 있는 형태나 기계어로 변환하는 것을 뜻한다.
-
트랜스파일 Transpile: 또한 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 이라고 한다.
TSC
- 트랜스파일하기 전에 타입검사를 한다.
잘못된 타입, 오타등이 있다면 에러메세지를 보여준다. 따라서 개발자는 미리 코드에 있는 문제를 예상하고 수정가능하다. - TSconfig파일을 생성하며, 타겟파일에서 이용할 원하는 자바스크립트의 버젼설정이 가능하다. ES2017? ES2018? 그리고 strict모드의 사용유무 등 다양한 옵션을 설정할 수 있다.
- TSC가 트랜스파일을 완료하면 Node.js나 웹브라우저가 실행.
토막지식! Deno는 Node.js개발자들이 만든 런타임이다. Node.js와 비슷하지만 기본적으로 TS를 사용한다. 자체적으로 타입컴사와 트랜스파일링을 해주기 때문에 따로 TS를 위한 프로젝트 세팅을 할 필요가 없다고 함.
타입 검사
빌드해서 타입검사를 해보지 않아도 VS CODE의 intellisense가 미리 가르쳐준다!😸
추론을 통해 타입을 정하는 방법:
let size = 100;굳이 타입을 명시해주지 않은 모습.
직접 타입을 정하는 방법:
let size: number = 100;콜론을 써서 타입을 타입을 명시해준 모습.
값을 바로 할당하지않고 변수만 만들때는?:
let size: number;작업을 마치고 js파일로 transpile해보면 아래처럼 변환된다.
let size: 100;
size = 105;타입을 정의하는 부분은 사라진 것을 볼 수 있다.
타입 정의부분은 타입스크립트의 고유영역이며 타입은 타입검사하는데만쓰이고 실제 코드 실행에는 영향을 주지 않기 때문이다.
타입스크립트에서 타입오류를 읽는 방법
예시 1
const product = {
id: 'c001',
name: '라이트 윈드 브레이커',
price: 129000,
};
// ...
product.price = '139000원'; // 문자열은 넣을 수 없음!!!
// ...
const salePrice = product.price * 0.9;
console.log(`할인 가격: ${salePrice}`);만약 자바스크립트였다면 위 코드를 실행해서 문제를 일으킬때까지 숫자형 대신 문자형이 들어갔다고 눈치채지 못할 것이다.
그러나 타입스크립트에서는 실행하지 않고도 문제가 있음을 개발자에게 알려준다.
예시 2
let product = {
id: 'c001',
name: '라이트 윈드 브레이커',
price: 129000,
sizes: ['M', 'L', 'XL'],
};
// ...
const newProduct = {
id: 'c002',
name: '다크 윈드 브레이커',
price: 139000,
sizes: [90, 95, 100, 105, 100],
// 문자열 배열이 아닌 숫자형 배열??
};
// ...
product = newProduct; // 형태가 일치하지 않아 에러!문자열배열에 숫자형배열을 할당해주어 에러가 발생한다.
에러메세지가 조금 복잡한데...
Type '{ id: string; name: string; price: number; sizes: number[]; }' is not assignable to type '{ id: string; name: string; price: number; sizes: string[]; }'.
Types of property 'sizes' are incompatible.
Type 'number[]' is not assignable to type 'string[]'.
Type 'number' is not assignable to type 'string'.ts(2322)눈이 @@ 이렇게 되지만 윗단부터 찬찬히 보면 가장 바깥의 전체 객체의 문제부터 한단계 한단계 안으로 범위를 좁혀들어가며 에러의 이유를 설명해주고 있다.
또한 CLI에서 build를 시도해도 똑같은 에러메세지를 띄우며 작업이 중단된다.
