✔️ 타입스크립트는 자바스크립트의 상위 집합이다.
✔️ 타입스크립트는 타입이 정의된 자바스크립트의 상위집합이다.
이 문장들이 어떤 의미인지, 타입스크립트와 자바스크립트는 어떤 관계를 갖고 있는지 자세히 알아보도록 하자! 더 나아가 타입스크립트를 왜 써야 하는지 정리해보도록 하자👍
📌 TS와 JS
타입스크립트는 자바스크립트에 정적 타입 시스템을 부여한 언어이다. 자바스크립트에서 확장된 언어로, 자바스크립트로 컴파일되며, 실행 역시 자바스크립트로 실행된다.
TS와 JS는 서로 전혀 다른 언어가 아니고, 둘의 관계는 필연적이다.🤝
- 모든 자바스크립트 프로그램은 타입스크립트 프로그램이다.
- 그 반대는 성립하지 않는다. 타입스크립트는 별도의 타입 관련 문법 (ex. 타입 구문)을 가지고 있기 때문이다. 그래서 자바스크립트로 실행하기 위해서는 컴파일 과정을 거쳐야 한다.
- 추가적으로, 모든 자바스크립트 프로그램은 타입스크립트 프로그램이지만, 일부 자바스크립트 (그리고 타입스크립트) 프로그램만이 ✔️타입 체크를 통과한다.
📌 TS의 타입 시스템
앞서 설명했듯이 타입스크립트는 자바스크립트에 정적 타입 시스템을 부여한 언어이다.
타입 시스템은 런타임 시 발생하는 타입 오류를 실행 전에 발견하여 방지한다. (이러한 특징으로 정적 타입 시스템이라고도 한다.)
- 타입 추론
const city = "new york city"; // 타입 추론
console.log(city.toUppercase());
// 'toUppercase' 속성이 'string' 형식에 없습니다. (빨간줄 생김)
// 'toUpperCase'를 사용하겠습니까?- 타입 구문
interface State {
name: string;
capital: string;
}
const state: State = {name: "Alabama", capitol: "Montgomery"}; // 타입 구문
// 'State' 형식에 'capitol'이 없습니다. 'capital'를 쓰려고 했습니까?하지만 타입 시스템이 모든 오류를 찾아내는 것은 아니다. 타입 체커를 통과하면서도 런타임 시에 타입 에러가 발생할 수 있다.
const names = [ "Alice", "Bob" ];
console.log(names[2].toUpperCase()); // indexOutOfBounds
// 프로그램 실행 -> TypeError: Cannot read property 'toUpperCase' of undefined타입스크립트는 names 배열이 범위 내에서 사용될 것이라 가정했지만 실제로는 그렇지 않았고, 에러가 발생했다.
📌 왜 TS를 써야할까?
- 런타임 시 발생하는 타입 에러 사전 방지
타입체크를 통해 런타임 시 발생하는 타입 에러들을 대부분 사전에 방지할 수 있다. - 코드 자동 완성
변수에 타입을 부여하면 VSCode에서 해당 타입에 대한 API를 미리 보기로 띄워줄 수 있고 tab으로 빠르고 정확하게 코드를 작성할 수 있다.
타입을 지정하는 것만으로도 코드의 품질이 향상되고 개발 생산성을 높일 수 있다. 😊
