본문으로 건너뛰기

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

1.1 자바스크립트의 역사​

1995년 넷스케이프의 브렌던 아이크는 웹사이트에 쉽게 접근하고 사용할 수 있는 자바스크립트를 10일 만에 설계했다.

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

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

1.2.1 값 비싼 자유​

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

다른 언어는 컴파일러가 충돌할 수 있다고 판단하면 코드 실행을 거부할 수 있다. 하지만 자바스크립트처럼 충돌 가능성을 먼저 확인하지 않고 코드를 실행하는 동적 타입 언어는 그렇지 않다.

1.2.2 부족한 문서​

JSDoc에는 다음과 같은 주요 문제로 인해 규모가 있는 코드베이스에서 사용하기 불편하다.

  • JSDoc 설명이 코드가 잘못되는 것을 막을 수 없다.
  • JSDoc 설명이 이전에는 정확했더라도 코드 리팩터링 중에 생긴 변경 사항과 관련된 현재 유효하지 않은 JSDoc 주석을 모두 찾기란 어렵다.
  • 복잡한 객체를 설명할 때는 다루기 어렵고 장황해서 타입과 그 관계를 정의하려면 다수의 독립형 주석이 필요하다.

1.2.3 부족한 개발자 도구​

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

1.3 타입스크립트​

타입스크립트는 네 가지로 설명된다.

  • 프로그래밍 언어: 자바스크립트의 모든 구문과 타입을 정의하고 사용하기 위한 새로운 타입스크립트 고유 구문이 포함된 언어
  • 타입 검사기: 자바스크립트 및 타입스크립트로 작성된 일련의 파일에서 생성된 모든 구성 요소(변수, 함수 등)를 이해하고 잘못 구성된 부분을 알려주는 프로그램
  • 컴파일러: 타입 검사기를 실행하고 문제를 보고한 후 이에 대응되는 자바스크립트 코드를 생성하는 프로그램
  • 언어 서비스: 타입 검사기를 사용해 비주얼 스튜디오 코드와 같은 편집기에 개발자에게 유용한 유틸리티 제공법을 알려주는 프로그램

1.4 타입스크립트 플레이그라운드에서 시작하기​

타입스크립트 공식 웹사이트는 플레이그라운드 편집기를 제공한다.

1.4.1 타입스크립트 실전​

const firstName = 'Georgia';
const nameLength = firstName.length(); // ERROR

문자열의 길이 속성이 함수가 아니라 숫자라는 지식을 활용해 주석으로 오류 사항을 알려준다.

1.4.2 제한을 통한 자유​

코드를 지정한 방법으로만 사용하도록 제한하면 타입스크립트는 코드의 한 영역을 변경하더라도 이 코드를 사용하는 다른 코드 영역이 멈추지 않는다는 확신을 줄 수 있다. 예를 들어 함수의 매개변수 개수를 변경했을 경우 변경된 함수를 호출하는 코드를 업데이트하지 않았다면 타입스크립트가 알려준다.

1.4.3 정확한 문서화​

타입스크립트는 구문을 적용해 객체의 '형태'를 설명하고 객체가 어떻게 보이는지 설명한다.

1.4.4 더 강력한 개발자 도구​

VS Code 같은 편집기에서 타입스크립트로 코드를 작성하면 편집기는 타입스크립트를 더 깊이 있게 이해한다.

1.4.5 구문 컴파일하기​

타입스크립트 컴파일러에 타입스크립트 구문을 입력하면 타입을 검사한 후 작성된 코드에 해당하는 자바스크립트를 내보낸다.

1.5 로컬에서 시작하기​

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

npm i -g typescript

1.5.1 로컬에서 실행하기​

컴퓨터 아무 곳에나 폴더를 만들고 다음 명령어를 실행해 신규 tsconfig.json 구성 파일을 생성한다.

tsc --init

타입스크립트에서 중요한 개념 중 하나는 코드에 타입 오류가 있어도 구문은 여전히 유효하다는 것이다. 타입스크립트 컴파일러는 타입 오류와는 상관없이 입력 파일로부터 자바스크립트를 계속 생성한다.

1.5.2 편집기 기능​

tsconfig.json 파일을 생성할 때의 또 다른 이점은 편집기에서 특정 폴더를 열었을 때 편집기가 이제 해당 폴더를 타입스크립트 프로젝트로 인식한다는 것이다. 예를 들어 VS Code에서 폴더를 열면 타입스크립트 코드를 분석하는 데 사용하는 설정은 해당 폴더의 tsconfig.json을 따르게 된다.

1.6 타입스크립트에 대한 오해​

1.6.1 잘못된 코드 해결책​

타입스크립트는 클래스나 함수 사용 여부와 같은 코드 스타일 의견을 강요하지 않고 특정 애플리케이션 프레임워크와도 연관되어 있지 않다.

1.6.2 자바스크립트로의 확장​

타입스크립트의 설계 목표는 다음과 같이 명시되어 있다.

  • 현재와 미래의 ECMA스크립트 제안에 맞춘다.
  • 모든 자바스크립트 코드의 런타임 동작을 유지한다.

타입스크립트는 자바스크립트 작동 방식을 전혀 변경하지 않는다.

1.6.3 자바스크립트보다 느림​

타입스크립트가 코드에 적용하는 변경 사항은 인터넷 익스플로러 11과 같이 오래된 런타임 환경을 지원하기 위해 이전 버전의 자바스크립트 코드로 컴파일하도록 요청하는 경우이다. 운영 프레임워크 대다수는 타입스크립트의 컴파일러를 사용하지 않는다. 대신 트랜스파일을 위한 별도의 도구를 사용하고 타입스크립트는 타입 검사용으로만 사용한다.

타입스크립트는 코드를 빌드하는 데 시간이 조금 더 걸린다. 타입스크립트 코드는 브라우저나 Node.js와 같은 환경에서 실행되기 전에 자바스크립트로 컴파일되어야 한다. 빌드 파이프라인은 대부분 성능 저하를 무시하도록 설정된다. 코드에서 발생할 수 있는 오류를 분석하는 타입스크립트 기능은 실행 가능한 애플리케이션 코드 파일을 생성하는 것과는 분리된 채로 수행된다.

1.6.4 진화가 끝남​

웹의 진화는 끝나지 않았고 타입스크립트도 마찬가지이다.

1.7 마치며​

이 장에서는 자바스크립트의 주요 약점과 타입스크립트가 작동하는 방식, 타입스크립트를 시작하는 방법을 알아봤다.