TypeScript 환경 설정 및 테스트

2016.05.15 12:36

졸리운_곰 조회 수:119

 

 

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 를 아래와 같이 작성합니다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

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 를 입력하고 엔터.

이상입니다. (-:

 

 

[출처] https://blog.wonhada.com/?p=296

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
1191 [ 一日30分 인생승리의 학습법] REST, REST API, RESTful 과 HATEOAS file 졸리운_곰 2024.03.10 7
1190 [ 一日30分 인생승리의 학습법] 렌더링 삼형제 CSR, SSR, SSG 이해하기 file 졸리운_곰 2024.03.10 1
1189 [ 一日30分 인생승리의 학습법] 엑셀 VBA에서 셀레니움 사용을 위한 Selenium Basic 설치 file 졸리운_곰 2024.02.23 9
1188 [ 一日30分 인생승리의 학습법]500 Lines or Less Blockcode: A Visual Programming Toolkit : 500줄 이하의 블록코드: 시각적 프로그래밍 툴킷 졸리운_곰 2024.02.12 3
1187 [ 一日30分 인생승리의 학습법] 구글 클라이언트(앱) 아이디를 발급받으려면 어떻게 해야 하나요? 졸리운_곰 2024.01.28 2
1186 [ 一日30分 인생승리의 학습법] 빅뱅 프로젝트를 성공적으로 오픈하기 위한 팁 졸리운_곰 2023.12.27 14
1185 [ 一日30分 인생승리의 학습법]“빅뱅 전환보다 단계적 전환 방식이 이상적 애자일팀과 협업 쉽게 체질 개선을” file 졸리운_곰 2023.12.27 6
1184 [ 一日30分 인생승리의 학습법] Big-bang / phased 접근 file 졸리운_곰 2023.12.27 2
1183 [ 一日30分 인생승리의 학습법] CodeDragon 메뉴 데이터 전환의 개념 이해 - 데이터 전환의 개념, 데이터 전환방식, 데이터 전환방식 및 장단점 비교, 데이터전환 이후 검토해야 할 사항 졸리운_곰 2023.12.27 4
1182 [ 一日30分 인생승리의 학습법] 블록체인과 IPFS를 이용한 안전한 데이터 공유 플랫폼 - 분쟁 해결 시스템 file 졸리운_곰 2023.12.27 5
1181 [ 一日30分 인생승리의 학습법] 블록체인과 IPFS를 이용한 안전한 데이터 공유 플랫폼 - 개념과 리뷰 시스템 file 졸리운_곰 2023.12.27 3
1180 [ 一日30分 인생승리의 학습법] 소켓 CLOSE_WAIT 발생 현상 및 처리 방안 file 졸리운_곰 2023.12.03 6
1179 [ 一日30分 인생승리의 학습법] robots 설정하기 졸리운_곰 2023.12.03 2
1178 [ 一日30分 인생승리의 학습법] A Tutorial and Elementary Trajectory Model for the Differential Steering System of Robot Wheel Actuators : 로봇 휠 액츄에이터의 차동 조향 시스템에 대한 튜토리얼 및 기본 궤적 모델 file 졸리운_곰 2023.11.29 5
1177 [ 一日30分 인생승리의 학습법] Streamline Your MLOps Journey with CodeProject.AI Server : CodeProject.AI 서버로 MLOps 여정을 간소화하세요 file 졸리운_곰 2023.11.25 1
1176 [ 一日30分 인생승리의 학습법] Comparing Self-Hosted AI Servers: A Guide for Developers / : 자체 호스팅 AI 서버 비교: 개발자를 위한 가이드 file 졸리운_곰 2023.11.25 8
1175 [ 一日30分 인생승리의 학습법] Self-Hosted Artificial Intelligence: Keeping Control of Your Data : 자체 호스팅 인공 지능: 데이터 제어 유지 file 졸리운_곰 2023.11.25 5
1174 [ 一日30分 인생승리의 학습법] AI_머신러닝 기초 정리 file 졸리운_곰 2023.11.24 14
1173 [ 一日30分 인생승리의 학습법] 머신러닝 내용 요약 및 정리 졸리운_곰 2023.11.24 9
1172 [ 一日30分 인생승리의 학습법] 당신이 알아두어야 할 10가지 머신러닝 알고리즘 file 졸리운_곰 2023.11.24 7
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED