TypeScript

http://www.okjsp.net/seq/205297

MS가 만든 타입 체크가 가능한 스크립트 - TypeScript

안녕하세요 수빈빠 입니다. 

이것저것 보다가 재밌는게(MS가 했다는게?) 있어서 공유합니다.

요새 워낙 Script language가 대세라(구글 dart도 그렇고, CoffeeScript도 그렇고)

MS도 "TypeScript"라는 걸 내놨습니다. ( http://www.typescriptlang.org/ )

http://www.typescriptlang.org/Playground/ 여기에서는 온라인으로 컴파일을 해 볼 수 있습니다.

1. 개념

간단히 설명을 하자면(물론 더 많은 기능이 숨어 있는 것 같은데 거기까지는 못 봤네요)

type을 체크할 수 있는 문법을 두어서 개발을 한 후, 이것을 javascript로 pre-compile하는 방식입니다.

2. 환경

에디터는 vim, emacs, subtime text 같은 것을 지원하고요..

컴파일은 node.js나 visual studio를 사용하는 방식입니다.

node의 경우, npm을 통해서 "npm install -g typescript" 하면 바로 설치가 가능합니다.

컴파일의 경우에는 "tsc aaaa.ts" 하면 js가 만들어집니다.

3. 사용 범위

문서에 보면 어떤 javascript host도 가능하다고 되어 있습니다.

주로 예제는 브라우저용이기는 한데, node용 스크립트도 됩니다.

다만 일부 global wide한 내장 변수의 경우 경고를 뱉기는 합니다만, 컴파일은 됩니다.

4. 예제

예제를 봐야겠죠? 먼저 컴파일이 실패하는 예제 입니다.

interface Person {

    firstname: string;

    lastname: string;

}

function greeter(person : Person) {

    return "Hello, " + person.firstname + " " + person.lastname;

}

var user = {firstname: 123, lastname: "User"};

console.log(greeter(user));

보시면 바로 아실 겁니다. type이 맞지 않죠? 아래와 같은 오류가 발생합니다.

person-error.ts(12,12): Supplied parameters do not match any signature of call target:

        Types of property 'firstname' of types '{ firstname: number; lastname: string; }' and 'Person' are incompatible

요번에는 성공하는 예제 입니다. 왼쪽은 TypeScript, 오른쪽은 JavaScript 입니다.

interface Person {     firstname: string;     age: number; } function greeter(person : Person) {     return "Hello, " + person.firstname + " " + person.age; } var user = {firstname: "Jane", age: 20}; console.log(greeter(user)); var user2 = {firstname : "", age : 0} process.argv.forEach(function (val, index, array) {     if(index == 2) {         user2.firstname = val;     }         if(index == 3) {         user2.age = val;     } }) console.log(greeter(user2));

function greeter(person) {     return "Hello, " + person.firstname + " " + person.age; } var user = {     firstname: "Jane",     age: 20 }; console.log(greeter(user)); var user2 = {     firstname: "",     age: 0 }; process.argv.forEach(function (val, index, array) {     if(index == 2) {         user2.firstname = val;     }     if(index == 3) {         user2.age = val;     } }); console.log(greeter(user2));

딱 결과를 보시면 아시겠지만, javascript 쪽에는 type check를 위한 코드가 만들어지지 않습니다.

즉 compile time에만 체크하고, run time에는 체크하지 않습니다.

위의 javascript를 node에서 실행할 경우...

node person.js First fasdfasd => Number가 아님에도 이렇게 실행해도 잘 되고

node person.js First 12345 => 이렇게 실행해도 잘 됩니다.

5. 기타 등등

type check를 하지 않는 script language는 양날의 검이죠.

생산성이 올라가지만, 디버깅 하기 어려운...

TypeScript는 이 문제를 잡겠다고 했지만, 좀 부족한 면이 있습니다.

예전에(지금은 거의 쓰지 않지만) commons-validator 모듈을 사용하면

client javascript 까지 제공해 주어서, 사용자의 값을 체크할 수 있었는데,

TypeScript의 경우에는 그런 면이 조금 아쉽습니다.

http://www.iamday.net/apps/article/talk/1758/view.iamday

타입스크립트 (TypeScript)는 MS가 새롭게 시작한 어플리케이션 규모의 자바스크립트 언어 개발 프로젝트 이다. 타입스크립트 (TypeScript)로 입력 된 코드를 자바스크립트로 컴파일링 할 수 있도록 지원하고 있는 것이 특징으로, 개발자들이 좀 더 손쉽게 자바 스크립트를 응용해 어플리케이션 개발이 용이하도록 지원하는 것을 특징으로 한다. 

 

 

타입스크립트 (TypeScript)는 어플리케이션 규모의 자바스크립트 상위 집합의 개념으로 JS 코드를 그대로 사용 가능하다는 것이 가장 큰 장점이다. 또한 JS 컴파일과 정적 타입검사, 리팩토링을 지원해 활용성과 개발상의 불편을 최소화하고 있다. 

MS가 소개한 내용에 따르면 타입스크립트 (TypeScript)는 Visual Studio 2012 에서 개발을 지원하며, 일종의 플러그인 형태로 인스톨 될 수 있도록 지원하고 있다. 뿐만 아니라, 오픈소스로서 다양한 OS에서 동작이 가능하다고 한다. 

Channel9에 올라온 내용에 따르면 타입스크립트 (TypeScript)를 이용 할 경우, 어떤 브라우저나 호스트에서 자바스크립트를 어플리케이션 규모의 크로스 플랫폼으로 작성 할 수 있고, 기존 코드를 유지하면서 자바스크립트 라이브러리를 계속 사용하는 장점도 가지고 있다고 한다.

MS가 타입스크립트 (TypeScript)를 통해 추구하는 방향은 결국 편리성과 기존의 자바스크립트 소스를 활용하는 쪽에 포커스를 맞추고 있고, 이를 통해 생산성 향상을 도모해, 자바스크립트 대안의 성격을 가지고 있다고 할 수 있다.

타입스크립트 (TypeScript) 출시에 따를 핵심적인 요소는 결국 컴파일러를 구현한 부분인데, 사용자들의반응을 보면 자바스크립트 코드가 깔끔하게(아마도 컴파일 된 코드에 대해 가독성을 의미하는 듯..) 처리되고, 어플리케이션의 성능 향상 가능성도 있어 보인다고 한다. 

MS가 본격적인 자바 스크립트 지원으로 MS의 타입스크립트 (TypeScript), 구글의 Dart, 자바스크립트 구도의 새로운 경쟁 진영이 구성 되는 구도로 전개 될 수 있다고 커뮤니티의 참여자들은 이야기하고 있다.