1. Visual Studio Code를 설치한다.


2. Visual Studio Code 실행 > 메뉴 > 파일 > 기본설정 > 설정 (control + , (콤마)) > 개인설정 확인 및 변경한다.


3. mtest.ts 작성 



1
2
3
4
5
let mValue : String = "이상현";
let mValue2 : Number = 28;
 
console.log(mValue+" "+mValue2);
 
cs


4. > 보기 > 명령어 팔레트(ctrl shift p) > configure task runner 검색 > others 선택 > 


.vscode 생성 및 tasks.json 생성됨. > 생성된 파일 내용 tasks.json을 다음 내용과 같이 변경 후 저장



1
2
3
4
5
6
7
8
{
    "version""0.1.0",
    "command""tsc",
    "isShellCommand"true,
    "args": ["-p""."],
    "showOutput""silent",
    "problemMatcher""$tsc"
}
cs


tsconfig.json 파일 생성 및 작성하면 ts파일을 자동으로 컴파일해준다.


5. cmd창에서 테스트


javac 는 java를 컴파일하는것, tsc는 ts를 컴파일하는 것




tsc mtest.ts 는 ts파일을 js파일로 컴파일 시키는것이다.




node mtest.js 는 노드는 기본적으로 js파일을 읽을수 있으므로 실행된다.



6. GUI에서 테스트


test.ts // ctrl + shift + b를 눌러 컴파일 하자.

ts파일에서 f5 누르면 nodejs 선택한다.> launch.json 생성된다. > 다시 f5 눌러서 실행시킨다.



다음과 같이 출력결과를 확인할 수 있다.



7. Visual Studio Code로 Git 연동 및 소스파일 커밋 방법


터미널을 켜고 명령어를 입력한다.


7.1. git init


git 시작한다.




7.2. git remote add origin https://github.com/shlee0882/typescript.git


Clone or download 를 눌러 자신의 Github 레파지토리 주소를 적는다.


7.3. 목록에서 변경 내용 스테이징 확인




7.4. git commit -m "커멘트남기기"


7.5. git push origin master


커밋 완료

'전체 > TypeScript' 카테고리의 다른 글

타입스크립트(TypeScript)란?  (0) 2017.10.15


1. 타입스크립트 정의


TypeScript 는 Microsoft에서 개발 및 유지 관리 하며 오픈 소스 프로그래밍 언어이다. 


JavaScript 의 모든 구문과 의미를 지원 하는 동시에 정적 유형 지정 및 ECMAScript의 상위 집합 인 더 풍부한 구문과 같은 몇 가지 추가 기능을 제공한다.


다음 다이어그램은 TypeScript와 ES5, ES2015, ES2016 간의 관계를 보여준다.





Angular 2에서는 JavaScript 와 함께 Angular 1.x와 같은 방식으로 작성할 수 있다. 

그러나 자바스크립트에서 런타임 오류가 발생했을 때 객체 또는 메서드 이름의 철자 오류와 같은 실수에 대해서만 알 수 있다. 


코드를 프로덕션에 배포하기 전에이를 방지하기 위해 많은 단위 테스트를 작성하지만 

웹에서 수많은 오류가 발생해도 웹에서는 그 오류를 내부에서 처리해 잘 구동하게 하여 사용자에게 알리지 않고 넘어가는 경우가 많아

스크립트로 작성시 많은 오류를 알 수 없는데


TypeScript 는 컴파일러에 의한 코드 오타를 처리하는 정적 유형 지정의 이점을 통해  컴파일 타임에 모든 유형 오류를 알린다.


또한 TypeScript의 기본 기능 중 하나인 주석을 사용하면 텍스트 편집기와 IDE가 코드에 대해 더 나은 정적 분석을 수행 할 수 있다. 

이는 더 나은 리팩토링 도구 및 자동 완료 기능을 사용하여 코드를 작성하는 동안 실수를 줄임으로써 생산성을 높일 수 있음을 의미한다.


그러므로 Angular 2 에서는 JavaScript보다 TypeScript를 주력으로 삼고 있고 TypeScript를 사용하면 많은 이점이 있다.


2. 타입스크립트 방식



컴퓨터가 이해하는 방식으로 컴파일 방식과 인터프리터 방식이 있는데


프로그래밍이란 인간과 컴퓨터의 대화인데 컴퓨터는 0과1로만 처리해 알 수 있다.

인간이 소스를 작성하면 그 소스를 컴퓨터가 알아들을 수 있게 번역(컴파일) 해서 처리해야 하는데 이 방식이 컴파일 방식이다.


반면

스크립트에서는 인터프리터 방식을 사용하는데 인간이 작성한 코드를 컴퓨터가 번역(컴파일) 없이 바로 처리하는 것이 인터프리터 방식이다.


그럼 스크립트에서 스크립트로 변환할 수 있을까?


타입스크립트에서 자바스크립트로 컴파일 할 수 있다.


타입스크립트로 작성한 소스내용은 자바스크립트의 소스내용과 동일하게 변하는데


타입스크립트만의 문법이 있다.



3. 타입스크립트 문법


타입스크립트는 변수 선언 시 let 을 사용한고 변수 함수 모두 들어갈 데이터 타입을 Generic처럼 지정해줘야한다.

그 중 자바스크립트에서 보지 못한 추가된 데이터 타입이 있다.


tuple - 복수의 자료형이 가능하다. OR의 의미와 같고 파이프를 사용해 String | Number 등 들어올수 있는 데이터 타입을 지정해줄수 있다.

enum - 열거형 또는 데이터 타입에 사용 - 데이터 타입을 위한 데이터이다.

any - 모든 데이터 타입이 가능하다.

void - 리턴 타입이 없는 함수이다.

never - 특정 값이 절대로 발생 할 수 없을 때 사용한다.


3.1 타입스크립트의 변수



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// test1.ts
let myNum1 : number = 3;
let myNum2 : number = 5;
 
let myStr1: string = "myString";
let myStr2: string = "test";
 
let numArr:Array<number> = [3,5,6];
let numArr2:number[] = [3,4,5];
let numArr3:String[] = ["a","b","c"];
 
let tp : [string, number];
tp = ["1",2];
 
let anyTest : any = "any";
anyTest = 3;
anyTest = true;
anyTest = new Number(3);
// 어떤 데이터가 들어가든 상관없다.
 
let anyArr : any[]  = [1,2,3];
cs


3.2 타입스크립트의 함수



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
function setUser():void{
}
// void 넘기지 않겠다.
 
function setUser2():string{
    return "test";
}
 
function testObject(){
    return "abc";
}
 
var strTest = testObject();
// new 예약어 사용 안함. 객체가 아님.
 
var strTest2 = "abc";
console.log(typeof strTest); // string
console.log(strTest === strTest2); // true
 
function testFunc(str:string, num:number):void{
    console.log("str = " + str); // str = 문자열
    console.log("num = "+ num); // num = 330
}
 
testFunc("문자열",330);
cs


3.3 타입스크립트의 인터페이스



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
interface testIter{
    str : string;
    num : number;
}
 
let AjaxUtil = function(ti:testIter){
    this.print = function(): void{
        console.log(ti.str);
        console.log(ti.num);
    }
}
 
var test1 = {str:"이상현",num:28}
var au = new AjaxUtil(test1);
 
au.print(); // 이상현, 28
cs


3.4 타입스크립트의 클래스와 생성자



1
2
3
4
5
6
7
8
9
10
11
12
13
class Car{
    carName : string;
    constructor(public pCarName:string){ 
        this.carName = pCarName; 
    }
}
 
// 기본생성자는 타입스크립트에서 필수가 아님.
 
let hyundai = new Car("sonata");
let pStr:string = "자동차 이름: ";
pStr += hyundai.carName;
console.log(pStr); // 자동차 이름: sonata
cs


3.5 타입스크립트 파일 > 자바스크립트 파일로 변환


위에 작성되어 있는 코드는 모두 ts파일이다. ts파일을 js로 컴파일하면 다음과 같은 소스가 된다.



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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// test1.ts
var myNum1 = 3;
var myNum2 = 5;
var myStr1 = "myString";
var myStr2 = "test";
var numArr = [356];
var numArr2 = [345];
var numArr3 = ["a""b""c"];
var tp;
 
tp = ["1"2];
var anyTest = "any";
anyTest = 3;
anyTest = true;
anyTest = new Number(3);
 
// 어떤 데이터가 들어가든 상관없다.
var anyArr = [123];
function setUser() {
}
 
// void 넘기지 않겠다.
function setUser2() {
    return "test";
}
function testObject() {
    return "abc";
}
var strTest = testObject();
 
// new 예약어 사용 안함. 객체가 아님.
var strTest2 = "abc";
console.log(typeof strTest); // string
console.log(strTest === strTest2); // true
function testFunc(str, num) {
    console.log("str = " + str); // str = 문자열
    console.log("num = " + num); // num = 330
}
 
testFunc("문자열"330);
var AjaxUtil = function (ti) {
    this.print = function () {
        console.log(ti.str);
        console.log(ti.num);
    };
};
 
var test1 = { str: "이상현", num: 28 };
var au = new AjaxUtil(test1);
au.print(); // 이상현, 28
var Car = /** @class */ (function () {
    function Car(pCarName) {
        this.pCarName = pCarName;
        this.carName = pCarName;
    }
    return Car;
}());
 
// 기본생성자는 타입스크립트에서 필수가 아님.
var hyundai = new Car("sonata");
var pStr = "자동차 이름: ";
pStr += hyundai.carName;
console.log(pStr); // 자동차 이름: sonata
//# sourceMappingURL=blogtest.js.map
cs


ts파일을 모두 js형식의 문법형태로 컴파일 하는 것을 볼 수 있다.

ts에는 객체지향이 들어갔으므로 이것을 js로 컴파일하면 js는 인터프리터 방식이므로 바로바로 읽을 수 있다.


+ Recent posts