타입스크립트(TypeScript)란?

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 타입스크립트의 변수

// 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];

3.2 타입스크립트의 함수

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);

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

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

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

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

// 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

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

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