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

자바스크립트의 역사

웹사이트에 쉽게 접근하고 사용할 수 있는 자바스크립트는 브렌던 아이크에 의해 10일 만에 설계되었습니다.

브라우저, 임베디드, 애플리케이션, 서버 런타임을 포함한 다양한 환경에서 새로운 버전과 이전 버전과의 호환성을 유지하며 자바스크립트는 엄청나게 발전해왔습니다.

별난 특성이 있지만 놀랍도록 유연한 자바스크립트는 웹 애플리케이션과 인터넷의 놀라운 성장을 가능하게 만든 것입니다.

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

중요한 언어 확장이나 프레임워크 없이 자바스크립트를 사용하는 것을 ‘바닐라’라고 부르며 순수한 자바스크립트를 의미합니다. 순수한 자바스크립트는 몇 가지 주요 함정이 존재합니다.

값 비싼 자유

코드를 구성하는데 있어서 놀랍도록 자유로운 자바스크립트는 장단점이 생겨납니다. 자유 덕분에 프로젝트를 재밌게 시작할 수 있습니다. 하지만 파일이 점점 늘어날수록 이러한 자유는 훼손되게 됩니다.

funtion paintPainting(painter, painting) {
  return painter
  .prepare()
  .paint(painting, painter.ownMaterials)
  .finish();
}

어떠한 맥락도 없이 다음 코드를 읽었을 때 paintPainting 을 어떻게 호출할지 고민에 빠지게 됩니다. painting 이 문자열인지, painter 가 어떤 함수를 반환하는지 기억에서 끄집어내야 하거나 추측할 수밖에 없습니다.

이러한 작업이 당장의 문제를 해결할 수 있어도 나중에 코드를 변경하거나 문자열이었던 painting 이 다른 데이터 타입으로 변경되는 등 여러 상황이 발생하면 결국 앞선 상황이 반복될 것입니다.

더욱이 자바스크립트는 충돌 가능성을 먼저 확인하지 않고 코드를 실행하는 동적 타입 언어로 코드를 실행하는데 있어 안전성을 보장해주지 않습니다.

부족한 문서

자바스크립트 언어 사양에는 함수의 매개변수, 함수 반환, 변수 또는 다른 구성 요소의 의미를 설명하는 표준화된 내용이 없습니다. 따라서 블록 주석으로 함수와 변수를 설명하는 JSDoc 표준을 채택했습니다.

/**
 * Performs a painter painting a particular painting.
 *
 * @param {Painting} painter
 * @param {string} painting
 * @returns {boolean} Whether the painter painted the painting
 */

function paintPainting(painter, painting) {
  /* ... */
}

하지만 JSDoc 에는 몇 가지 주요 문제가 있습니다.

• JSDoc 설명이 코드가 잘못되는 것을 막을 수 없다.
• 그때는 맞고 지금은 틀리다. JSDoc 설명이 이전에는 정확해도 리팩터링 중 생긴 변경 상황과 관련된 유효하지 않은 주석들을 모두 찾기 어렵다.
• 복잡한 객체를 설명할 때 다루기 어렵고 장황하다. 타입과 그 관계를 정의하기 위한 다수의 독립형 주식이 필요해진다.

이처럼 규모가 있는 코드베이스에서 수많은 파일을 꾸준히 업데이트하는 것은 불가능에 가깝게 됩니다.

부족한 개발자 도구

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

타입스크립트

타입스크립트는 네 가지로 설명드릴 수 있습니다.

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

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

타입스크립트 공식 웹사이트는 플레이그라운드 편집기를 제공합니다. 편집기에 코드를 입력할 수 있고 IDE에서 로컬로 타입스크립트 작업을 할 때 보게 되는 동일한 편집기 제안 사항도 확인할 수 있습니다.

타입스크립트 실전

언어 서비스가 실행되어 타입스크립트 코드에 오류를 표시해줍니다.

제한을 통한 자유

타입스크립트를 사용하면 매개변수와 변수에 제공하는 값의 타입을 지정할 수 있습니다. 코드 작성에 있어 제한을 주는 것입니다. 타입스크립트는 제한을 통해 코드의 한 영역을 변경하더라도 이 코드를 사용하는 다른 코드 영역이 멈추지 않는다는 확신을 주는 것입니다.

함수의 매개변수 개수가 변경되는 경우, 변경된 함수를 호출하는 코드를 업데이트하지 않으면 타입스크립트는 오류를 발생시킵니다. 반면 자바스크립트는 오류 없이 실행되며 결과는 예상한 것과 다르게 나옵니다.

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

sayMyName('Beyonce', 'knowles')

// You acting kind of shady, ain't callin' me Beyonce

정확한 문서화

앞에서 계속 다루었던 paintPainting 함수를 타입스크립트 버전으로 만들겠습니다.

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

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

코드만 보고도 Painter 에 적어도 세 가지 속성이 있으며, 두 가지는 메서드라는 것을 파악할 수 있습니다. 타입스크립트는 구문을 적용해 객체의 ‘형태’와 객체가 어떻게 보이는지 설명합니다.

더 강력한 개발자 도구

VS Code와 같은 편집기에서 타입스크립트는 더 강력한 힘을 발휘합니다. ‘자동 완성’과 같은 기능을 통해 작성한 코드에 똑똑한 제안을 표시합니다.

구문 컴파일하기

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

로컬에서 시작하기

타입스크립트 전역 설치

npm i -g typescript

tsc 명령어로 타입스크립트 실행

tsc --version

로컬에서 실행하기

tsconfig.json 구성 파일 생성

tsc --init

편집기 기능

tsconfig.json 파일의 또 다른 이점은 편집기가 해당 폴더를 타입스크립트 프로젝트로 인식한다는 것입니다.

타입스크립트에 대한 오해

잘못된 코드 해결책

타입스크립트는 자바스크립트 코드를 구조화하는데 도움을 주는 것입니다. 해당 구조가 어떻게 보여야 하는지에 대해서는 어떤 것도 강요하지 않습니다.

자바스크립트로의 확장

타입스크립트의 설계 목표는 다음과 같습니다.

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

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

자바스크립트보다 느림

타입스크립트가 코드에 적용하는 유일한 변경 사항은 인터넷 익스플로러 11과 같이 오래된 런타임 환경을 지원하기 위해 이전 버전의 자바스크립트로 코드를 컴파일하도록 요청하는 경우입니다.

운영 프레임워크 대다수는 타입스크립트의 컴파일러를 전혀 사용하지 않습니다. 대신 트랜스파일을 위한 별도의 도구를 사용하고 타입스크립트는 타입 검사용으로만 사용합니다.

그러나 타입스크립트는 코드를 빌드하는데 시간이 조금 더 걸립니다. 타입스크립트 코드는 브라우저나 Node.js와 같은 환경에서 실행되기 전에 자바스크립트로 컴파일되어야 합니다.

진화가 끝남

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

마치며

• 자바스크립트의 간략한 역사
• 자바스크립트의 함정
  • 값비싼 자유
  • 부족한 문서
  • 부족한 개발자 도구
• 프로그래밍 언어, 타입 검사기, 컴파일러 및 언어 서비스 역할을 하는 타입스크립트
• 타입스크립트의 장점
  • 제한을 통한 자유로움
  • 정확한 문서화
  • 강력한 개발자 도구
• 타입스크립트 플레이그라운드 및 컴퓨터에서 로컬로 타입스크립트 코드 작성하기
• 타입스크립트에 대한 오해
  • 잘못된 코드 해결책
  • 자바스크립트로의 확장
  • 자바스크립트보다 느림
  • 진화가 끝남