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 타입스크립트의 인터페이스
| 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 타입스크립트의 클래스와 생성자
| 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 = [3, 5, 6]; var numArr2 = [3, 4, 5]; var numArr3 = ["a", "b", "c"]; var tp; tp = ["1", 2]; var anyTest = "any"; anyTest = 3; anyTest = true; anyTest = new Number(3); // 어떤 데이터가 들어가든 상관없다. var anyArr = [1, 2, 3]; 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는 인터프리터 방식이므로 바로바로 읽을 수 있다.
