🌀 타입스크립트란
타입스크립트는 자바스크립트에 타입을 부여한 언어입니다.
기존의 자바스크립트는 개발자가 명시적으로 변수의 자료형(type)을 적어주지 않아도 런타임에 동적으로 타입이 할당되었습니다. 그러나 타입스크립트는 개발자가 명시적으로 변수의 자료형을 적어주어 컴파일 시에 변수의 자료형을 체크합니다.
다음은 타입스크립트의 예시 코드입니다.
// -------------- javascript --------------
const str = 'hello javascript';
const num = 1004;
const arr = [1, 2, 3];
const obj = {
name: 'Emma',
age: 1004,
};
// -------------- typescript --------------
const str: string = 'hello typescript';
const num: number = 1004;
const arr: number[] = [1, 2, 3];
const obj: {
name: string,
age: number,
} = {
name: 'Emma',
age: 1004,
};아래에서 자바스크립트와 타입스크립트를 비교하여 타입스크립트를 사용하는 이유에 대해 알아보겠습니다.
🌀 동적 타입과 정적 타입
자바스크립트는 변수의 타입이 런타임(실행 시간)에 결정되는 동적 타입 언어입니다.
이 방식은 변수의 타입을 신경 쓰지 않고 개발할 수 있지만, 런타임이 되서야 타입 오류가 발생하는 것을 알 수 있습니다.
이와 달리 타입스크립트는 변수의 타입을 명시적으로 지정하는 정적 타입 언어입니다.
해당 방식은 컴파일 단계에서 타입을 검사하여 코드를 실행하지 않아도 사전에 오류를 발견할 수 있습니다.
컴파일이란 코드를 실행하기 전에 사람이 이해할 수 있는 프로그래밍 언어를 -> 컴퓨터가 이해할 수 있는 기계어로 바꾸는 과정입니다.
🌀 생산성 향상
자바스크립트로 코드를 작성한다면 특정 함수가 받는 파라미터 값들이 어떤 타입인지 알기 위해 관련되어 있는 여러 개의 파일을 살펴봐야 하는 경우가 있습니다.
이때 타입스크립트로 코드를 작성한다면, 통합 개발 환경(IDE)에서 필요한 변수들을 자동으로 띄워 주기 때문에 다른 파일을 살펴보지 않고도 변수명과 그 타입까지 한 번에 알 수 있습니다.
예를 들어, 필수적인 파라미터를 빠뜨리거나 string 타입의 아이디 값에 number 타입의 값을 넣는 실수를 하지 않도록 방지합니다.
🌀 자바스크립트와의 호환성
타입스크립트는 자바스크립트와 슈퍼셋 관계입니다. (타입스크립트 >= 자바스크립트)
자바스크립트의 모든 기능을 포함하면서 다른 기능까지 활용이 가능하도록 확장한 것이 타입스크립트입니다.
슈퍼셋(superset)이란 A와 B가 있을 때, A >= B라면 A는 B의 슈퍼셋이라고 할 수 있습니다.
타입스크립트로 코드를 작성한다고 해도 컴파일 시에 자바스크립트로 변환(transpile)되기 때문에
규모가 큰 프로젝트를 수정하더라도 자바스크립트 코드에서 타입스크립트 코드로 점진적인 수정이 가능합니다.
읽어주셔서 감사합니다:)
