마이크로소프트에서 TypeScript를 개발했습니다.
구글의 Dart를 견제하는 차원에서 나온건지 웹 개발을 정말 제대로 지원하고 싶어서 나온건지는 아직 알 수 없지만 구글과 마소에서 관심 갖는 분야라면 우리도 빠르게 접근해야 할 것입니다.

TypeScript(TS)는 JavaScript(JS)의 수퍼셋이므로 모든 JS는 TS에서 사용 가능합니다.

결국 JS이므로 아래 URL에서 간단하게 스크립트 테스트를 할 수 있습니다.
http://www.typescriptlang.org/Playground/

이제 각자 PC에 개발 환경을 세팅하고 테스트 해보겠습니다.
차근차근 따라하면서 정리해 보세요.

개발 환경 세팅 ::
1) Node.js 설치 (http://www.nodejs.org)
2) cmd.exe 실행 (윈도우 시작 버튼 -> 실행 -> ‘cmd’ 입력 또는 보조프로그램 -> 명령 프롬프트)
3) npm install -g typescript 입력
4) 앞으로 tsc 파일명.ts 하면 컴파일 됨

이제 Hello World를 빠르게 진행해 보죠.

1. 텍스트 에디터로 HelloWorld.ts 작성

1
alert("Hello World");

2. 명령 프롬프트에서 컴파일
tsc HelloWorld.ts 입력
컴파일 후 HelloWorld.js 생성되면 성공

3. 테스트 html 작성

1
<script type="text/javascript" src="HelloWorld.js"></script>

4. html 실행
‘Hello World’ 알림창이 뜨면 성공

위와 같이 환경 설정 및 개발이 간단합니다.

그럼 이제 TS만의 특징을 살펴보겠습니다.

1. 변수 :: 타입 정의가 가능합니다.

1
var str:string;

2. 함수

1
2
3
4
function foo(str:string):string
{
     return str;
}

3. 클래스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class MyString
{
     str:string;
     constructor(str:string)
     {
          this.str = str;
     }
     getString():string
     {
          return this.str;
     }
}

var myString:MyString = new MyString("abc");
alert(myString.getString());

4. 모듈 :: 클래스에 export 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
module MyModule
{
     export class MyString
     {
          str:string;
          constructor(str:string)
          {
               this.str = str;
          }
          getString():string
          {
               return this.str;
          }
     }
     
     export class MyNumber
     {
          num:number;
         
          constructor(num:number)
          {
               this.num = num;
               this.getNumber = () => this.num;
          }
         
          getNumber:() => number;
     }
}

import MyString2 = MyModule.MyString;
import MyNumber2 = MyModule.MyNumber;

var myString:MyString2 = new MyString2("abc");
alert(myString.getString());

var myNumber:MyNumber2 = new MyNumber2(12);
alert(myNumber.getNumber());

5. 인터페이스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
module MyModule
{
     export interface IMy
     {
          get();
     }
     export class MyString implements IMy
     {
          str:string;
          constructor(str:string)
          {
               this.str = str;
          }
          get():string
          {
               return this.str;
          }
     }
     
     export class MyNumber implements IMy
     {
          num:number;
         
          constructor(num:number)
          {
               this.num = num;
               this.get = () => this.num;
          }
         
          get:() => number;
     }
}

var myObj:MyModule.IMy;
myObj = new MyModule.MyString("abc");
alert(myObj.get());

myObj = new MyModule.MyNumber(12);
alert(myObj.get());

이번에는 외부 파일을 참조하는 경우에 대해 알아보겠습니다.

1. MyModule.ts 를 아래와 같이 작성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
module MyModule
{
     export class MyString
     {
          str:string;
          constructor(str:string)
          {
               this.str = str;
          }
          getString():string
          {
               return this.str;
          }
     }
     
     export class MyNumber
     {
          num:number;
         
          constructor(num:number)
          {
               this.num = num;
               this.getNumber = () => this.num;
          }
         
          getNumber:() => number;
     }
}

2. Main.ts를 아래와 같이 작성합니다.

1
2
3
4
5
6
7
///<reference path="./MyModule.ts"/>

var myString:MyModule.MyString = new MyModule.MyString("abc");
alert(myString.getString());

var myNumber:MyModule.MyNumber = new MyModule.MyNumber(12);
alert(myNumber.getNumber());

3. 명령 프롬프트에서 컴파일 하는데 위에서 한 것과 조금 다릅니다. 앞으로는 아래 방법으로 항상 하셔도 됩니다.
tsc Main.ts –out out.js –module “amd” 입력
컴파일 후 out.js 생성되면 성공

4. 테스트 html의 src를 out.js로 수정하여 실행

<옵션>
–out out.js :: 모든 스크립트를 out.js에 포함
–module “amd” :: 사용할 모듈 타입 지정 (amd, commonjs)

amd: 브라우저용, RequireJS 사용
commonjs: 서버용, Node.js 사용

Main.ts에 보면 /// 코드가 있는데 이건 MyModule.ts에 ‘module MyModule’처럼 사용하여 파일을 하나로 만들 때 사용합니다.

그럼 RequireJS를 사용한다고 하였으니 js를 따로 관리할 수 있겠죠? 조금 수정합니다.

1. MyModule.ts 를 아래와 같이 수정합니다. 주석만 넣었습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//module MyModule
//{
     export class MyString
     {
          str:string;
          constructor(str:string)
          {
               this.str = str;
          }
          getString():string
          {
               return this.str;
          }
     }
     
     export class MyNumber
     {
          num:number;
         
          constructor(num:number)
          {
               this.num = num;
               this.getNumber = () => this.num;
          }
         
          getNumber:() => number;
     }
//}

2. Main.ts를 아래와 같이 작성합니다.

1
2
3
4
5
6
7
import MyModule = require("./MyModule");

var myString:MyModule.MyString = new MyModule.MyString("abc");
alert(myString.getString());

var myNumber:MyModule.MyNumber = new MyModule.MyNumber(12);
alert(myNumber.getNumber());

3. 명령 프롬프트에서 컴파일 합니다. –out은 없습니다. 파일을 하나로 합치지 않으니까요.
tsc Main.ts –module “amd” 입력
컴파일 후 Main.js, MyModule.js 생성되면 성공

4. 테스트 html을 수정하고 실행합니다. require.js 파일이 없는 분은 http://requirejs.org/docs/download.html 에서 다운로드 하세요.

1
<script type="text/javascript" src="require.js" data-main="Main.js"></script>

CommonJS도 해보겠습니다.

1. node.js에는 alert가 없으므로 console.log로 변경합니다.
alert(myString.getString()); -> console.log(myString.getString());

2. –module “commonjs”로 바꾸고 실행합니다.
3. 곧바로 node Main.js 를 입력하고 엔터.

이상입니다. (-: