자바스크립트를 공부하거나, 자바스트립트에 대한 이야기를 누군가 나눈다면 필수로 듣게 되는 말이 타입스크립트다. 그만큼 핫하고 중요한 포지션으로 자리잡고 있다는 뜻이다. 리액트를 통해 jsx가 익숙해지니 타입스크립트로 변환해 코드를 안정시킬 필요가 있다고도 여러 사람이 말한다. 그래서 타입스크립트는 무엇인지 자바스크립트와의 차이점은 무엇인지 정리해본다.
typescript
일단 타입스크립트는 자바스크립트의 슈퍼셋 언어다. 타입스크립트가 자바스크립트를 품고 있다는 말이다. 자바스크립트 엔진을 사용하기 때문에 자바스크립트로 작성된 프로그램이라면 타입스크립트로도 동작한다. 마이크로소프트가 2012년 처음 공개했고, 2017년 구글에서 공식 언어로 채택하며 전세계적으로 사용빈도가 높아졌고, 최근엔 거의 필수 아니냐는 의견이 오가고 있다. 자바스크립트를 기반으로 하는 데다 오픈 소스라 모든 운영 체제, 브라우저, 호스트에서 사용할 수 있기 때문이다.
타입스크립트 인기가 높아지는 이유는 자바스크립트의 장점이자 단점인 자유로움 때문이다. 간단한 예로 특정 자료형을 쓰지 않고 let 혹은 const로 모든 변수와 상수를 선언해 쓸 수 있어 간편하다. 따라서 숫자도 들어가고, 문자도 들어가고 객체도 배열도 다 들어간다. let은 당연히 덮어씌워지고, const는 상수라 최상단은 고정이지만 참조 타입이라 키값이나 배열요소로 객체든 배열이든 숫자든 다 덮어씌울 수 있는 상태다. 이때 타입스크립트를 사용하면 해당 자료형을 미리 지정할 수 있다. 사전에 숫자, 문자 등 자료형을 지정하면 엉뚱한 값이 들어갔을 때 빠르게 알아차리고 수정 가능해 사용자에게 예기치 않은 오류를 보여줄 일이 적어진다.
무엇보다 자바스크립트를 더욱 활성화하고자 나온 언어다. 자바스크립트가 브라우저가 아닌 서버측에서도 사용되기 시작하면서 코드가 점점 무거워졌다. 위 같은 예시로 인해 스크립트 언어를 넘어 객체 지향 언어로의 전환이 필요했다. 따라서 타입스트립트는 자바스크립트가 사장되지 않도록 단점을 보완했다고 여겨도 무방하다.
특징
디버깅
타입스크립트는 코드에 목적을 명시한다. 목적에 맞지 않을 경우 변수나 함수에서 에러를 발생시켜 에러를 사전에 제거할 수 있다. 실행 전 작업과 디버깅을 동시에 할 수 있어 추후 디버깅 시간을 줄일 수 있다. 실제 마이크로소프트가 타입스크립트를 개발한 이유 중 하나로 대규모 응용프로그램을 개발할 때 디버깅을 빠르게 진행하기 위해서였다.
// 객체 타입을 설정하고
interface User {
name: string;
id: number;
}
// 원하는 곳에 적용한다.
const user: User = {
username: "Hayes"
id: 12
};
// 위 코드에선 name이 키고, string이 값인데, 엉뚱한 키가 들어왔으므로 아래와 같은 경고 문구를 보게 된다.
//Type '{ username: string; id: number; }' is not assignable to type 'User'.
//Object literal may only specify known properties, and 'username' does not exist in type 'User'.
// id는 정상적인 키와 값이므로 통과했다.
자바스크립트 호환
타입스크립트는 자바스크립트와 100% 호환된다. 브라우저든 node든 자바스크립트를 사용할 수 있다면 타입스크립트도 쓸 수 있다. 타입스크립트는 자바스크립트의 슈퍼셋이기 때문이다. 또한, 자바스크립트의 프레임워크인 리액트에서도 타입스크립트를 위한 가이드를 제공하고 있다.
Javascript vs Typescript
| Javascript | Typescript | |
| 데이터 바인딩 | X | interface 등을 사용해 데이터 설명 가능 |
| 프로토타이핑 | X | O |
| 컴파일 | X | O |
| npm패키지 | 설치 옵션을 제공함. | npm 패키지 등 자바스크립트보다 쉽게 설치 가능. |
| 커뮤니티 | 큰 커뮤니티가 많음. | 아직 부족함. |
| 학습 난이도 | 스크립트 언어 수준이라 쉬운 편. | 사전 스크립팅 지식 필요. |
| 간단 비교 | (매개변수를 갖는)일급 함수를 가진 가벼운 인터프리터 언어 | JS를 포함해 tpye까지 지정가능한 객체 지향 언어 |
마무리
이런 저런 자료를 보면서 느낀 건 하나다. 자바스크립트를 사용할 생각이라면 타입스크립트를 많이 사용하지 않는다고 해도 알아둬야 한다는 것. 모르고 사용하지 못하는 것과, 아는데 사용하지 않는 것은 전혀 다르니까. 작은 프로그램이나 웹을 만들 땐 타입스크립트가 번거롭거나 필요하지 않을 수 있다. 프로젝트가 아예 작지 않은 이상 다만 디버깅이나 유지보수 측면에서는 타입스크립트가 무조건 유리하다고 본다.
그렇다고, 타입스크립트가 자바스크립트를 완전히 대체할 지는 모르겠다. 타입스크립트도 웹팩을 통해 자바스크립트로 컴파일 되어 실행한다. 어느 곳에서는 타입스크립트도 브라우저에서 해석할 수 있도록 업데이트를 해야한다고 말하기도 하는데, 실현 여부는 알 수 없으니까.
이런 저런 것을 떠나서 코드 안정성에서 만큼은 자바스크립트보다 타입스크립트가 무조건 낫다. 예기치 못한 에러를 미리 막을 수 있다는 점이 매우 흥미롭게 한다. eslint나 prettier처럼 모양이나 디자인에 가까운 코드 정렬이 아닌, C같이 기존 언어들처럼 자바스크립트를 명확하고 정확하게 사용할 수 있게 해준다는 점이 타입스크립트를 계속 성장하게 하는 듯하다.
※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)