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

1.1 자바스크립트의 역사

1995년 브렌던 아이크는 10일만에 자바스크립트를 설계했다. 독특한 특성과 결점으로 인해 조롱받았지만, 엄청난 발전을 보여주며 성장했다. 특히 2015년부터 매년 ECMA스크립트의 새로운 버전이 출시되었는데, 다른 프로그래밍 언어에서 제공하는 기능에 맞춘 새 기능도 함께 제공되어 단점을 보완하는 발전을 보이고 있다.

이러한 발전을 기반으로 오늘날 자바스크립트는 놀랍도록 장점이 많은 유연한 언어로서 웹 어플리케이션과 인터넷의 성장을 가능하게 만들었다.

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

중요한 언어 확장이나 프레임워크 없이 자바스크립트를 사용하는 것을 바닐라라고 부른다. 순수한 자바스크립트라는 의미이다. 바닐라 자바스크립트가 가진 몇가지 특징으로 인해 타입스크립트가 탄생하게 되었다.

1.2.1 값 비싼 자유

자바스크립트는 자유로운 언어이다. 코드를 구성하는 방법에 제한이 없고 자유롭게 개발자가 코드를 작성할 수 있다. 이러한 코드의 자유는 자바스크립트를 재미있게 만들지만, 안전하게 코드를 실행하려할 때 상당한 고통을 준다.

1.2.2 부족한 언어

자바스크립트의 선어 사양에는 함수의 매개변수, 함수 반환, 변수 또는 다른 구성 요소의 의미를 설명하는 표준화된 내용이 없다. 따라서 많은 개발자는 블록 주석으로 함수와 변수를 설명하는 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){ ... }

하지만 이러한 JSDoc은 규모가 있는 코드에서는 사용하기 불편하다. 수많은 파일에 각각의 주석을 유지, 관리하는 일은 쉽지 않다.

1.2.3 부족한 개발자 도구

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

이러한 자바스크립트의 특징들은 많은 개발자들에게 불편함을 주었고, 타입스크립트의 탄생의 원인이 된다.

1.3 타입스크립트

타입스크립트는 2010년대 초 마이크로소프트 내부에서 만들어져 2012년 출시 및 오픈 소스화되었다.

타입스크립트는 네 가지로 설명되는데

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

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

이곳 에서 타입스크립트를 사용해볼 수 있다.

1.4.1 타입스크립트 실전

1.4.2 제한을 통한 자유

타입스크립트를 사용하면 매개변수와 변수에 제공되는 값의 타입을 지정할 수 있다. 이러한 제한은 자바스크립트의 특징인 자율성을 제한하면서 코드의 안정성을 높일 수 있다.

1.4.3 정확한 문서화

코드의 타입을 문서화하면서 해당 코드가 어떤 속성과 형태를 가지고 있는지를 파악할 수 있다. 이는 미래의 나 뿐만 아니라 다른 개발자와의 협업에 큰 도움이 된다.

1.4.4 더 강력한 개발자 도구

VSCode 에서 타입스크립트로 코드를 작성하면 편집기는 타입스크립트의 타입을 이해하고, 코드를 작성할 때 자동 완성 기능을 제공한다.

1.4.5 구문 컴파일하기

타입스크립트 컴파일러에 구문을 입력하면 타입을 검사한 후 자바스크립트 코드를 내보낸다. 이러한 컴파일 작업은 타입스크립트가 결국 자바스크립트로서 역할을 한다는 의미이다.

1.5 로컬에서 시작하기

Node.js를 통해 로컬 환경에서 사용하는 방법을 알려줌

1.5.1 로컬에서 실행하기

1.5.2 편집기 기능

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

타입스크립트에 대한 몇가지 오해

1.6.1 코드 해결책이 아니다

타입스크립트는 자바스크립트 코드를 구조화하는데 도움이 되지만, 타입 안정성 강화를 제외하고 해당 구조가 어떻게 보여야 하는지 강요하지 않는다. 타입스크립트는 프레임워크가 아닌, 모든 개발자가 사용할 수 있는 프로그래밍 언어이다. 따라서 타입스크립트의 특징을 활용해 자신만의 코드를 작성해라.

1.6.2 자바스크립트로의 확장

결국 타입스크립트는 자바스크립트로 컴파일해야 한다. 따라서 타입스크립트 개발자들은 자바스크립트와 충돌될 수 있는 새로운 코드 기능을 추가하지 않는다. 그러므로 자바스크립트의 공부를 게을리하지 말자.

1.6.3 자바스크립트보다 느림

타입스크립트는 자바스크립트로 컴파일해야 한다. 빌드시 그만큼의 시간을 제외하면 느리다고 할 정도로 큰 차이가 없다.

1.6.4 진화가 끝남

꾸준히 진화하는 웹과 같이 타입스크립트는 계속 진화한다. 오류를 수정하고 기능을 추가하면서.... 그러므로 타입스크립트의 변화를 눈여겨보자.

1.7 마치며

자바스크립트의 역사
자바스크립트의 함정
타입스크립트
타입스크립트의 장점
타입스크립트 작성하기
타입스크립트에 대한 오해

Previous러닝 타입스크립트 NextCh.2 타입 시스템

Last updated 1 year ago

Was this helpful?

/** * 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){ ... }