CHAPTER 01. 자바스크립트에서 타입스크립트로

오늘날 자바스크립트는 수십 년 전의 아름다운 웹 브라우저를 지원합니다.

🌓 자바스크립트의 역사

1995년 넷스케이프의 브렌던 아이크(Brendan Eich)는 자바스크립트를 10일 만에 설계했다.
이 이후로 자바스크립트는 엄청나게 발전을 했으며, 자바스크립트의 기반이 되는 언어 사양인 ECMA스크립트(ECMAScript)의 새로운 버전을 2015년부터 매년 출시했다.
이때 다른 최신 프로그래밍 언어에서 제공하는 기능도 함께 제공했으며, 브라우저와 임베디드 애플리케이션 그리고 서버 런타임을 포함환 다양한 환경에서 새로운 버전과 이전 버전과의 호환성을 수십 년 동안 유지했다.

현재 오늘 날 자바스크립트는 장점이 많은 유연한 언어이며, 웹 애플리케이션과 인터넷의 놀라운 성장을 가능하게 만들었다.

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

바닐라(vanilla): 중요한 언어의 확장이나 프레임없이 자바스크립트를 사용하는 것
타입스크립트는 자바스크립트의 주요 문제점을 극복하기 위에 적절한 기능을 추가한 것이며, 자바스크립트의 문제점은 프로젝트의 규모가 커지고 장기화될수록 더욱 드러난다.

1. 값 비싼 자유

자바스크립트를 사용하는 개발자들은 자바스크립트에서 코드를 구성하는 방법에 제한이 없다는 것에 불만을 가지고 있다.
이러한 자유 덕분에 자바스크립트로 프로젝트를 시작하면 재밌지만, 파일이 점점 늘어날수록 얼마나 많은 자유가 훼손될 수 있는 지 명확해진다.

[가상의 페인팅 애플리케이션 코드의 일부분]

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

어떠한 맥락도 없이 코드를 읽게 되면, paintPainting 함수를 호출하는 방법에 대해 막연하게 생각할 것이다.
또한, painter가 어떤 getPainter 함수로 반환되어야 하는지, painting 문자열이라고 운 좋게 추측할 수도 있지만, 나중에 코드를 변경할 경우에 이 가정은 무효가 될 수 있다.
다른 언어는 컴파일러가 충돌할 수 있다고 판단하면 코드 실행을 거부할 수 있지만, 자바스크립트는 충돌 가능성을 먼저 확인하지 않고 코드를 실행하는 동적 타입 언어다.

결국 이러한 코드의 자유는 자바스크립트를 재미있게 만들기도 하지만, 우리의 코드를 안전하게 실행하려고 할 때 많은 문제와 고통을 안겨준다.

2. 부족한 문서

자바스크립트의 언어 사양에는 함수의 매개변수, 함수 반환, 변수 또는 다른 구성 요소의 의미를 설명하는 표준화된 내용이 없다.
따라서 많은 개발자들은 블록 주석으로 함수와 변수를 설명하는 JSDoc 표준을 채택하였다.
JSDoc: 표준으로 형식화된 함수와 변수 코드 바로 위에 문서 주석을 작성하는 방식

[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) {
  return painter.prepare().paint(painting, painter.ownMaterials).finish();
}

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

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

수십 개의 파일에서 JSDoc 주석을 유지 관리하는데 크게 어렵지 않지만, 수백 또는 수천 개의 파일을 관리하기엔 힘들다.

3. 부족한 개발자 도구

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

🌓 타입스크립트

타입스크립트는 2010년대 초에 마이크로소프트 내부에서 만들어진 후 2012년에 출시 및 오픈 소스화되었다.
타입스크립트는 종종 자바스크립트의 상위 집합 또는 타입이 있는 자바스크립트로 설명되곤 한다.

타입스크립트는 네 가지로 설명할 수 있다.

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

🌓 타입스크립트 시작하기

타입스크립트 공식 웹사이트는 플레이그라운드 편집기 (https://www.typescriptlang.org/ko/play)를 제공한다.

편집기에 코드를 입력할 수 있고, IDE(통합 개발 환경)에서 로컬로 타입스크립트 작업을 할 대 보게 되는 동일한 편집기 제안 사항도 확인할 수 있다.

  
const firstName = "Georgia";
const nameLength = firstName.length();
//
// Error: This expression is not callable.

이 코드에 타입스크립트 타입 검사를 실행하면, 문자열의 길이 속성이 함수가 아니라 숫자라는 지식을 활용해 주석으로 오류 사항을 알려준다.

코드를 입력할 때 편집기에서 간단한 오류를 미리 알려주면, 코드를 실행하고 오류가 발생할 때까지 기다리는 것보다 훨씬 유용하다.
만일 자바스크립트에서 이 코드를 실행하면 오류가 발생한다.

1. 제한을 통한 자유

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

[sayMyName 함수의 매개변수 두 개에서 하나로 변경]

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

sayMyName("Beyonce", "Knowles");
//
// Error: Expected 1 argument, but got 2.

함수의 매개변수를 두 개에서 하나로 변경했을 때 함수를 호출하는 코드는 여전히 두 개의 문자열을 사용하므로 타입 오류가 발생한다.
자바스크립트에서 이 코드는 오류 없이 실행되지만, 결과가 예상하는 것과 다르다. (두 번째로 전달해준 값 제외)

2. 정확한 문서화

앞서 다뤘던 paintPainting 함수를 타입스크립트로 작성한 부분이다. 이 코드를 통해 코드를 문서화하는 타입스크립트의 정밀함을 확인할 수 있다.

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

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

Painter에 적어도 세 가지 속성이 있고, 그 중 두가지는 메서드라는 것을 알 수 있다.
타입스크립트는 구문을 적용해 객체의 형태를 설명하고, 우수하고 강력한 시스템을 이용해 객체가 어떻게 보이는지 설명한다.

🌓 타입스크립트에 대한 오해

타입스크립트는 어떤 영역에서 탁월하지만, 다른 영역에서는 한계가 있다.

1. 잘못된 코드 해결책

TS는 자바스크립트 코드를 구조화하는 데 도움이 되지만, 타입 안정성 강화를 제외하고는 해당 구조가 어떻게 보여야 하는지에 대해서는 어떤 것도 강요하지 않는다.
TS는 특정 대상만을 위한 독단적인 프레임워크가 아닌 모든 개발자가 사용할 수 있는 프로그래밍 언어다.
TS는 클래스나 함수 사용 여부와 같은 코드 스타일 의견을 강요하지 않으며, 앵귤러, 리액트 등의 특정 애플리케이션 프레임워크와도 연관되어 있지 않다.

2. 자바스크립트보다 느림

TS가 코드에 적용하는 유일한 변경 사항은 인터넷 익스플로러 11과 같이 오래된 런타임 환경을 지원하기 위해 이전 버전의 자바스크립트로 코드를 컴파일하도록 요청하는 경우다.
운영 프레임워크 대다수는 타입스크립트의 컴파일러를 전혀 사용하지 않는다.
그러나 TS는 코드를 빌드하는 데 시간이 조금 더 걸린다.
TS 코드는 브라우저 Node.js와 같은 환경에서 실행되기 전에 자바스크립트로 컴파일되어야 한다.
코드에서 발생할 수 있는 오류를 분석하는 느린 타입스크립트 기능은 실행 가능한 애플리케이션 코드 파일을 생성하는 것과는 분리된 채로 수행된다.

3. 진화가 끝남

웹의 진화는 끝나지 않았고, 타입스크립트도 마찬가지다.
웹 커뮤니티는 타입스크립트에 버그 수정과 기능 추가를 지속적으로 요청한다.
타입스크립트의 기본 원칙은 거의 변함이 없겠지만, 오류 메시지, 더 멋진 기능 그리고 편집기와의 통합은 시간이 지남에 따라 개선될 것이다.

Reference

러닝 타입스크립트 (Learning TypeScript)

[LearningTS] Chapter 01. 자바스크립트에서 타입스크립트로