CHAPTER 1 - 자바스크립트에서 타입스크립트로

바닐라 자바스크립트의 함정

---

중요한 언어 확장이나 프레임워크 없이 순수 자바스크립트 만을 사용하는 것을 ‘바닐라’ 라고 부른다.

 

바닐라 자바스크립트의 모든 약점은 프로젝트 규모가 커지고 장기화 될수록 더욱 드러난다.

 

 

 

 

값 비싼 자유

 

자바스크립트는 사실상 코드를 구성하는 방법에 제한이 없다.

 

그러나 파일이 점점 늘어날수록 그 자유가 좋지 않게 다가올 수 있다.

 

다른 언어는 컴파일러가 충돌할 수 있다고 판단하면 코드 실행을 거부할 수 있다.

 

하지만, 자바스크립트처럼 충돌 가능성을 먼저 확인하지 않고 코드를 실행하는 동적 타입 언어는 그렇지 않다.

 

결국 코드의 자유는 자바스크립트를 재밌게 만들기도 하지만, 내가 짠 코드를 안전하게 실행하려고 할 떄는 상당한 고통이 따를 수 있다.

 

 

 

부족한 문서

 

자바스크립트 언어 사양에는 매개변수, 함수 반환, 변수 또는 다른 구성 요소의 의미를 설명하는 표준화된 내용이 없다.

 

따라서 많은 개발자가 블록 주석으로 함수와 변수를 설명하는 JSDoc 표준을 채택했다.

 

JSDoc 표준 - 표준으로 형식화된 함수와 변수 코드 바로 위에 문서 주석을 작성하는 방법

/**
 * Performs a painter painting a particular painting.
 *
 * @param {Painting} painter
 * @param {string} painting
 * @returns {boolean} whether the painter painted the painting
 */
function paintPaintin(painter, painting) {
  /* ... */
}

 

 

 

부족한 개발자 도구

 

자바스크립트는 타입을 식별하는 내장된 방법을 제공하지 않고, 코드가 JSDoc 주석에서 쉽게 분리되기 때문에 코드베이스에 대한 대규모 변경을 자동화하거나 통찰력을 얻기가 어렵다.

 

 

 

 

 

 

 

타입스크립트란

---

 

타입스크립트는 ‘자바스크립트의 상위 집합’ 또는 ‘타입이 있는 자바스크립트’ 라고 설명됨

 

 

 프로그래밍 언어

• 자바스크립트의 모든 구문과, 타입을 정의하고 사용하기 위한 새로운 타입스크립트 고유 구문이 포함된 언어

 

타입 검사기

• 자바스크립트 및 타입스크립트로 작성된 일련의 파일에서 생성된 모든 구성 요소 (변수, 함수 등)를 이해하고, 잘못 구성된 부분을 알려주는 프로그램

 

컴파일러

• 타입 검사기를 실행하고 문제를 보고한 후 이에 대응되는 자바스크립트 코드를 생성하는 프로그램

 

언어 서비스

• 타입 검사기를 사용해 VS Code 와 같은 편집기에 개발자에게 유용한 유틸리티 제공법을 알려주는 프로그램 

 

 

 

 

제한을 통한 자유

 

 

타입스크립트를 사용하면 매개변수와 변수에 제공되는 값의 타입을 지정할 수 있다.

// 이전 코드: sayMyName(firstName, lastName)
function sayMyName(fullName) {
  console.log(`You acitng kind of shady, ain't callin' me ${fullName}`);
}

sayMyName('Beyonce', 'Knowles');

//Error: Expected 1 argument, but got 2.

 

위와 같은 코드에서 단순 자바스크립트의 경우 에러 없이 아래와 같이 실행되었을 것이다.

 

You acitng kind of shady, ain't callin' me Beyonce

하지만, 타입스크립트를 사용함으로써 오류를 띄워 사전에 방지해줄 수 있다.

 

 

 

 

 

정확한 문서화

 

interface Painter {
  finish(): boolean;
  ownMaterials: Material[];
  paint(painting: string, materials: Material[]): boolean;
}

function paintPainting(painter: Painter, painting: string): boolean {
  /*...*/
}

Painter 에는 적어도 세가지 속성이 있고, 그 중 두가지는 메소드라는 사실을 코드를 보고 알 수 있다.

 

이와 같이 구문을 적용해 객체의 형태를 설명할 수 있다.

 

 

 

 

 

로컬에서 시작하기

---

 

컴퓨터에 Node.js 가 설치되어 있으면 타입스크립트를 실행할 수 있다.

 

npm i -g typescript

타입스크립트를 전역으로 설치해준다.

 

tsc --init

위 코드를 터미널에 입력해주면 tsconfig.json 파일을 만들어주는데, 타입스크립트가 코드를 분석할 때 사용하는 설정을 선언한다.

 

tsc -w

타입스크립트로 작성한 코드를 실시간 동기화하고 싶다면 위와같은 명령어를 작성해주면 된다.