https://www.packtpub.com/ 에서 Threejs ebook을 구매하다 typescript도 구매했습니다. 어차피 지금 자바스크립트 진영의 분위기로 봐서는 백프로 표준이 될 것같습니다. 언제가 될지는 모르겠지만요.

그리고 스타트업 기업들이 채용정보에서도 상당수의 기업이 타입스크립트를 사용하기를 원하는 것 같습니다. 저도 취준생이니 피할수 없으니 한 번 즐겨보겠습니다.

구매했던 eBook으로 공부를 타입스크립트 입문을 시작해보겠습니다.

(여담) 기나긴 군생활 덕분에 포트폴리오가 비어있느니 기존 프로젝트는 다버리고 javascript 기반의 프로젝트를 차근차근 쌓아보려고 합니다. ThressJS + ReactJS + TypeScript + (koa or spring boot)로 재밌는 토이 프로젝트를 만들려고 합니다.

개인 공부를 위해 가볍게 번역하면서 포스트해보겠습니다.

What is TypeScript?

TypeScript 는 Anders Hejlsberg(C# 창시자)에 의해 만들어진 언어입니다.
자바 스크립트 언어를 ~평가했을 때의 결과(?)~ 컴파일하고 만들어진 결과이자
자바스크립트를 사용할 때 개발자를 도와줄 수 있는 것!이라고 합니다. (의역)

TypeScript는 자바스크립트에서 타입스크립트로 코드를 변환할 수 있는 컴파일러를 포함합니다.
컴파일러는 단순하면서 우아합니다. 저희는 이미 자바스크립트로 쓰여진 것을 몇몇의 타입스크립트 키워드를 여기저기 추가함으로써 우리의 코드를 strongly-typed, object-oriented, syntax-checked한 코드로 변형시킬 수 있습니다.

컴파일 단계를 추가함으로써 우리는 자바스크립트로 쓰여진 코드를 우리의 의도대로 작성되었는지 검증할 수 있습니다.

타입스크립트는 자바스크립트를 간단게 생성합니다. 이것은 자바스크립트가 어디에 쓰여있든지 타입스크립트가 같은 자바스크립트 코드를 생성해낼 수 있다는 것을 의미 합니다.대신 특정한 규칙을 깨지않는 다는 것을 확실하게 하기위해 컴파일 시간이 조금 추가됩니다. 특히 개발팀의 규모가 크거나 또는 라이브러리를 생성하는 곳에서 자바스크립트를 실행하기 전에 추가적인 검증단계를 가지는 것은 굉장한 시간절약입니다.

타입스크립트는 물론 언어적인 서비스(우리가 자바스크립트 함수들이나 라이브러리를 어떻게 사용해야하는지 이해하는데 도움을 주는 코드 에디터같은 툴로써 사용될 수 있는)를 포함합니다.
이런 에디터들은 자동적으로 프로그래머에게 code suggestions 과 hints를 제공합니다.(우리가 어떻게 라이브러리를 써야하는지)

요약

타입 스크립트 언어는 컴파일러이며 자바스크립트 개발자를 더욱 생산성있게 해주고, 버그를 빠르게 찾게 해주고, 서로 그들의 코드가 어떻게 쓰여야하는지를 이해하기 쉽게해주는 툴입니다.
그리고 우리가 OOP 개념이나 Design pattern을 우리 자바스크립트 코드에서 매우 간단하고 쉽게 이해할 수 있습니다.

JavaScript and the ECMAScript Standard

자바스크립트 언어는 오랜 시간동안 있어왔습니다. 초기에 하나의 웹브라우저에서 HTML를 도와주기위해 디자인된 언어였습니다. 그리고 많은 비슷한 언어들이 생성되게 영감을 줬었습니다. 결국에 세계적인 표준이 생산되었습니다. 웹사이트가 다양한 브라우저들을 지원하기 위해서죠.
이 표준에의해 정의된 언어는 ECMAScript라고 불립니다.

각각의 자바스크립트 인터프린터들은 ECMAScript의 표준에 순응하는 특징과 함수를 나타내야합니다. 1999년에 처음 발행되었던 ECMAScript는 공식적으로 ECMA-262, 3rd edition이가로 불렸습니다. 하지만 간단히 ECMAScript 3이라고 알려졌습니다. 자바스크립트의 해당 버젼은 넓게 적용되고 폭발적인 인기에 의해 넓은 기반을 형성했습니다.

증가하는 인기속에서 ECMAScript는 많은 개정과 업데이트를 해왔습니다.
불행히 새로운 언어를 제안하는 것과 그것을 극복하는 새로운 표준을 만들자는 의견사이에 소비된 시간은 다소 길어졌습니다. 심지어 새로운 버전의 표준이 발행되었을 때, 웹 브라우저들은 표준을 적응시키는데 시간이 많이 소비되었습니다.

그래서 적용할 표준을 선택하기전에 어떤 브라우저가 또는 더욱 정확하게 어떤 런타임 엔진이 지원되는지 이해하는 것이 중요합니다. 이 결정을 지원하기 위해 많은 참고 사이트가 존재합니다. Compatibility Table 로써 알려져있는 것입니다.

현재는 3개의 ECMAScript 주요 버젼이 있습니다. ES3, ES5 그리고 새롭게 비준된 ES6입니다.
ES3는 오랜동안 있어왔습니다. 그리고 거의 대부분의 웹브라우저들이 이것을 지원할 것입니다.
ES5는 대부분의 현대 웹브라우저들이 지원됩니다. ES6는 가장 최근의 표준 버젼으로 언어적으로 큰 업데이트가 있었습니다. ES6는 처음으로 언어 속에서 클래스를 소개했고 OOP프로그래밍을 더욱 쉽게 구현할 수 있게 해줬습니다.

타입스크립트 컴파일러는 ECMAScript표준의 다른 버젼사이를 전환할 수 있는 Parameter를 가지고 있습니다. TypeScript는 현재 ES3, ES5, ES6를 지원합니다. 만약 현재 설정한 표준에 대해 의미가 없는 코드를 컴파일하려고 시도하면 TypeScript 컴파일러는 에러를 생성할 것입니다.
마이크로소프트 팀은 ECMAScript의 표준에 따라 TypeScript Compiler를 Commit합니다. 그래서 새로운 edition이 적용될때, 타입스크립트언어 와 컴파일어는 그것에 맞게 따라갑니다.

The Benenfits for TypeScript

타입스크립트의 이점을 보기위해서 매우 빨리 간략히 보겠습니다.

• Compilation
• String typing
• Type definitions for popular JavaScript libraries
• Encapsulation
• Public and Private accessors

Compiling

아이러니하게 자바스크립트가 가장 사랑받는 이유 중 하나는 compilation 단계의 부재였습니다. 간단히 코드를 변화시키고, 브라우저는 refresh하고 인터프리터가 그 나머지를 다룬다. 코드를 실행하기위해 컴파일러가 끝날 때까지 기다릴 필요가 없다.

이것이 이 점처럼 보이는 반면에, 우리가 컴파일단계를 소개하길 원하는 많은 이유가 있습니다.
컴파일러는 멍청한 실수(괄호 빼먹거나 콤마를 찍지않는)를 찾을 수 있습니다. 물론 더욱 모호한 에러들도 찾을 수 있습니다. (double quote(")를 사용할 곳에 single quote(')를 사용했거나) 모든 자바스크립트 개발자는 그들의 코드에서 에러(괄호를 빼먹는 실수..같은)를 찾으려고 시도하는데 드는 많은 시간들을 두려워한다고 말할 것입니다.

컴파일단계를 소개하는 것은 크기가 큰 코드 베이스를 관리할 때, 더욱 빛날 것입니다. 오래된 속담이 있습니다.

초기에 최대한 크게 실패 해야한다. 그리고 컴파일러는 에러를 찾을 수 있을 초기단계에 크게 소리쳐야한다.

이것은 소스코드에서의 어떠한 확인은 컴파일러가 인지할수 있었던 버그로부터 자유로워지는 것을 의미합니다.

거대한 코드 베이스에서 변화를 줄 때, 우리는 우리가 기존에 존재하는 기능을 망가트리지않는지 확실히 할 필요가 있습니다.이를 위해서 큰 팀에서는 소스코드 저장소에서 feature를 브랜치와 머지를 사용합니다. 또 다른 브랜치에서 다른 브랜치로 머지한 후와 전에 컴파일 단계를 실행하는 것은 우리가 어떠한 실수를 하지않았다는 확신을 줄 것입니다.

If a development team is using a continuous integration process, the continuous integration (CI) server can be responsible for building and deploying an entire site, and then running a suite of unit and integration tests on the newly checked-in code. We can save hours of build time and hours of testing time by ensuring that there are no syntax errors in the code, before we embark on deploying and running tests.

언급했던 것처럼, 최근 타입스크립트는 ES3, ES5 또는 ES6 자바스크립트를 아웃 풋으로 설정할 수 있습니다. 이것은 의미합니다. 같은 코드베이스로 여러 버젼에서 실행할 수 있다는 것입니다.

Strong typing

자바스크립트는 강한 타입이 아닙니다. 매우 동적인 언어이고 객체의 프로퍼티들을 자유롭게 변형하고 행동할 수 있습니다. 아래 예처럼.

var test = "string test";
test = 1

런타임 중에 type을 변화시키는 것은 매우 위험할 수 있고 헤아릴 수 없는 문제를 일으킬 수 있습니다. 이것이 전통적인 oop언어가 strict typing을 강요하는 이유입니다. 즉, 일단 한번 선언되면 변수의 특성을 변화시키는 것을 허락하지않습니다.

TypeScript syntactic sugar

타입스크립트는 컴파일중에 객체의 타입을 체크하기 위해 매우 간단한 문법을 제공합니다. 이 문법은 syntactic suger로 언급되고 좀더 공식적으로는 type annotations 라고합니다.

var test: string = "this is a string";
test = 1
test = function(a, b) { return a + b }

첫 라인을 보면 변수와 할당사이에 : colon과 string를 보여줍니다. 이 type annotation syntax는 변수의 타입을 string로 지정하는 것을 의미합니다.
위 코드를 컴파일 시 두가지 에러가 생성됩니다. 하나는 1을 test에 할당시 number 타입을 할 당할 수 없다는 에러가 생기고 두번째는 test에 함수를 할당할 수 없습니다.라는 에러가 생성됩니다. 추후에 더 자세히 보도록하겠습니다.

Type definitions for popular JavaScript libraries

우리가 봐왔던 것처럼, 타입스크립트는 자바스크립트를 annotate(주석? 부연설명)하고 자바스크립트 개발 경험에 strong typing을 가지오는 능력을 가지고 있습니다. 하지만 우리가 어떻게 기존에 존재하는 자바스크립트 라이브러리들을 strongly type할 수 있을가요? 답은 놀랍게도 간단합니다: by creating a definition file. 타입스크립트는 기존에 있던 자바스크립트 라이브러리들에 강한 타입을 부여하기 위해 C++ 같은 언어와 유사하게 헤더파일의 종류로써 .d.ts 확장자를 가진 파일을 사용합니다. 이 definition 파일들은 각각의 이용할 수 있는 함수와 변수들과 type annotation 정보를 함께 가지고 있습니다.

declare function describe(
	description: string,
    specDefinitions: () => void
) : void;

describe라는 함수를 정의했습니다. 인자 값의 타입을 정해줬습니다. description는 string type이고 specDefinitions 는 인자는 비어있고 반환값이 없는 함수입니다. 마찬가지로 describe의 리턴값도 없다는 것을 의미합니다.

Encapsulation

OOP 의 기초적인 원칙 중 하나는 캡슐화입니다. 캡슐화는 하나의 component에 데이터를 정의하고 그 데이터를 연산할 수 있는 함수들을 정의합니다. 대부분의 프로그래밍 언어는 클래스 개념을 가지고 있습니다. 그리고 관련된 데이터와 함수들을 위한 template를 정의하는 방법을 제공합니다.
간단한 타입스크립트 class 사용을 코드로 보겠습니다.

class MyClass {
 	add(x, y) {
      return x + y;
    }
}
var classInstance = new MyClass();
var result = classInstance.add(1, 2);
console.log(`add(1, 2) return ${result}`);

이 코든느 매우 읽고 이해하기 쉽습니다. MyClass라는 이름으로 class를 만들었고 간단한 add function을 추가했습니다.

ES6이전에는 class 구문이 없었서 클래스의 기능을 만들기 위해 function을 사용했습니다. 캡슐화는 prototype patttern을 사용하거나 closure pattern을 사용함으로써 얻었습니다. 그래서 prototypes와 closure 패턴은 enterprise 정도의 자바스크립트를 사용할 때, 기초적인 기술로 여겨져왔습니다. 클로져와 prototype의 설명은 생략.

하지만 결국에 TypeScript의 class도 closure를 생성하게 됩니다.

Public and Private accessors

캡슐화에서 사용되는 객체지향적인 원칙 중 하나는 Data hiding입니다. public and private variables를 사용하는 것입니다. 불행히 자바스크립트는 private variables를 선언한는 기능을 제공하지 않습니다. 그 동안은 이 기능은 클로저를 사용해서 emulated하고 간단히 undersorce character(_)를 private 변수 네이밍에 포함시켰었습니다. 다음과 같이요.

var MyClass = (function() {    
  function MyClass() {        
    this._count = 0;    
  }    
  MyClass.prototype.countUp = function() {        
    this._count ++;   
  }    
  MyClass.prototype.getCountUp = function() {        
    return this._count;    
  }    
  return MyClass; 
}());
var test = new MyClass();
test._count = 17; 
console.log("countUp : " + test.getCountUp()); 

하지만 타입스크립트를 사용하면 매우 간단해 집니다.

class CountClass {    
  	private _count: number;    
	constructor() {        
  		this._count = 0;    
	}    
	countUp() {        
  		this._count ++;    
	}    
	getCount() {        
  		return this._count;    
	} 
}

사실 babel과 es6를 통해서도 가능하지만 어차피 transpile이 필요하다면 타입지원도 되는 타입스크립트를 사용하는 것이 맞다고 생각합니다.