TypeScript 환경 설정 및 테스트
2016.05.15 12:36
TypeScript 환경 설정 및 테스트
마이크로소프트에서 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에 보면 ///
그럼 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 를 입력하고 엔터.
이상입니다. (-:
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
