TypeScript #

TypeScript란 #

C#의 창시자인 덴마크 출신 소프트웨어 엔지니어 Anders Hejisberg가 개발을 주도한 TypeScript는 마이크로소프트에서 구현한 JavaScript 대체 언어의 하나로써 JavaScript(ESS)의 Super set(상위 확장) 프로그래밍언어로 확장자는 .ts를 사용하고 컴파일의 결과물로 JavaScript파일인 .js를 출력한다. 최종적으로 런타임에서는 이렇게 출력된 JavaScript 코드를 구동시키게 된다. TypeScript는 Microsoft에서 2012년 발표한 오픈소스로 정적 타이핑을 지원하며 ES6(ECMA Script 2015)의 클래스, 모듈 등과 ES7의 Decorator 등을 지원한다.

TypeScript는 이름답게 타입을 명시할 수 있다는 것이 JavaScript와의 가장 큰 차이점이다. 인터프리터 언어(프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경)의 경우 타입 검사(Type Checking)가 없어서 코드 작성 후 에러가 나면 디버깅이 매우 어렵다. 따라서 코드 작성 시 에러를 줄이기 위한 노력이 필요했고 이를 충족시키기 위한 언어가 TypeScript이다.

그림1 Typescript superset
출처 : https://poiemaweb.com/typescript-introduction

TypeScript는 ES5의 Superset 이므로 기존의 JavaScript(ES5)의 문법을 그대로 사용할 수 있다. 또한, ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러(Transpiler)를 사용하지 않아도 ES6의 새로운 기능을 기존의 JavaScript 엔진(현재의 브라우저 또는 Node.js)에서 실행할 수 있다.

그림2 Typescript trends
출처 : https://poiemaweb.com/typescript-introduction

기본 타입 #

Boolean #

JavaScript, TypeScript에서 boolean 값이라고 일컫는 참/거짓(true/false) 값

    let isTrue: boolean = false;

Number #

JavaScript, TypeScript의 모든 숫자는 부동 소수 값이며, 이는 number라는 타입으로 붙여진다.

    let decimal: number = 6;
    let hex: number = 0xf00d;
    let binary: number = 0b1010;
    let octal: number = 0o744;

String #

다른 언어들처럼 Text 타입은 string으로 표현한다.

    let title: string = "Hello world";

Array #

배열 타입은 두 가지 방법으로 쓸 수 있다.
1. 배열 요소들을 나타내는 타입 뒤에 []를 작성
2. 제네릭 배열 타입 사용 : Array

    let list: number[] = [1, 2, 3];
    let list: Array<number> = [1, 2, 3];

Any #

알지 못하는 타입을 표현해야 할 때, 컴파일 검사를 통과하는 용도로 any 타입을 사용할 수 있다.

    let notSure: any = 4; // number
    notSure = "maybe a string instead"; // string
    notSure = false; // boolean

any 타입은 타입 일부만 알고 전체는 알지 못할 때 유용하다.

    let list: any[] = [1, true, "free"];
    list[1] = 100;

Javascript처럼 데이터를 다루기 무척 편해지지만, typescript 사용 의의와 맞지 않으므로 선언을 지양하는 것이 좋다.

void #

void는 어떤 타입도 존재할 수 없음을 나타내며, 보통 함수에서 반환 값이 없을 때를 표현하기 위해 쓰인다.

    function warnUser(): void {
        console.log("This is my warning message");
    }
    const warnUser =(): void => {
        console.log("This is my warning message");
    }

Null and Undefined #

undefined와 null 둘 다 자신의 이름으로 undefined, null로 표기한다.

    let u: undefined = undefined;
    let n: null = null;

기본적으로 null과 undefined는 다른 모든 타입의 하위 타입이다. 즉, null과 undefined를 number 같은 타입에 할당할 수 있다는 것을 의미한다.

Type assertions #

특정 변수의 실제 타입이 현재 타입보다 더 구체적일 때, 이를 직접적으로 명시하는 방법이다.

    let someValue: any = "this is a string";
    let strLength: number = (someValue as string).length;

문법의 특징 #

변수 #

변수 또는 값의 타입을 표기하기 위해 식별자 또는 값 뒤에 콜론(:)을 붙여 value: type의 형태로 표기한다. 최초 변수를 선언할 때 타입을 표기하지 않으면 자동으로 유추하여 적용된다.

    let check: boolean = false;
    let name: string = '홍길동'
    let height: number = 180;
    let initValue: any = 10; (any 타입의 변수에는 어느 타입이든 들어올 수 있다.)

컬렉션 #

    let list: number[] = [1,2,3];
    let list: Array<number> = [1,2,3];

함수 #

    let addFunction =(a: number, b: number) : number =>{
        return a+b;
    }

오브젝트 #

    let personObj = {
        firstName: '홍',
        lastName: '길동'
    }
    (요소(firstName, lastName)는 string 타입으로 자동 적용된다.)

인터페이스 #

기본적인 interface 문법으로 class 선언하듯 property를 정해서 interface로 선언하고 사용하면 된다. 이때 property 속성을 ? keword를 사용하면 optional로 처리하여 사용하는 class가 사용하지 않게 할 수 있다.

    interface Person {
        name: string;
        age: number;
        height?: number;
        move: ()=>void;
    }

    let hong: Person = {
        name: 'hong',
        age: 20,
        move:() => {}
    }

클래스 #

    class Point {
        x: number;
        constructor(x: number, public y: number = 0) {
            this.x = x;
        }

        dist(){
            return Math.sqrt(this.x * this.x + this.y * this.y);
        }
        static origin = new Point(0,0);
    }
    let point1 = new Point(10, 20);

활용 범위 #

JS가 사용되는 곳에서는 TS도 사용할 수 있다. 그리고 TS에 JS 코드를 작성해도 실행이 된다. VS20xx 뿐만 아니라 Node.js의 npm 을 통해서 컴파일러를 다운받을 수 있어서 다른 통합개발 도구에서도 컴파일러 설정을 잡아 주기만 해도 컴파일이 가능하다.

참고 사이트 #

• 나무위키 - TypeScript
• PoiemaWeb - TypeScript의 소개와 개발 환경 구축
• 블로그, 하이벅스 - TypeScript : 개요
• 블로그, madori GNJ - 타입스크립트(Type Script) 데이터 타입, 예제
• 블로그, charlie - TypeScript 문법 특징 (Basic types, Interfaces, Classes)
• Fall in IT 블로그, Jade_ - Typescript 기초문법
• TypeScript-Handbook

Incoming Links #

Related Data Sciences (DataScience 0) #

• Angular vs React
• Angular 장단점
• Angular 주요개념
• Angular 특징 및 철학

Related Articles (Article 1) #

• Angular 구조