Fall in IT.

Typescript 기초문법 본문

프로그래밍언어/Javascript & Typescript

Typescript 기초문법

D.Y 2017. 3. 17. 14:34

안녕하세요.


오늘은 Typescript의 기초 문법들을 알아보도록 하겠습니다.



ES6(ECMAScript6)란?

  • ECMAScript는 자바스크립트 표준 단체인 ECMA가 제정하는 자바스크립트 표준이다.
    ECMAScript는 브라우저에 사용되는 자바스크립트 부분만 표준으로 정의한다.


Typescript란?

  • Javascript superset 이며, 간단히 타입이 있는 자바스크립트라고 말할 수 있습니다.



Typescript 설치
(npm(node package module)이 설치되어 있다는 가정하에 설명합니다. Nodejs 설치시 함께 설치됩니다.)

  • $ npm install -g typescript
  • 설치한 typescript 버전 확인
    $ tsc -v


ts파일을 js파일로 컴파일

  • tsc 파일명.ts
    $ tsc main.ts

변수
typescript에는 number, string, boolean, any 네 가지 타입이 있습니다.
  • var isSuccess: boolean = true;
  • var firstName: string = 'KIM';
  • var height: number = 185;
  • var initValue: any = 10; (any타입의 변수에는 어느 타입이던 들어올 수 있습니다.)

컬렉션
  • var list: number[] = [1,2,3];
  • var list:Array<number> = [1,2,3];

함수
  • function addFunction(a: number, b: number) {
         return a+b;
    }
  • var f1 = function(i: number): number { return i*i }
  • var f2 = function(i: number) { return i*i }
  • var f3 = (i: number): number => { return i*i }
  • var f4 = (i: number) => { return i*i }


오브젝트
  • var personObj = {
        firstName: 'lee',
        lastName: 'duyoung'
    }
  • personObj["salary"] = 20000;
  • for (var member in personObj) {
        if (personObj.hasOwnProperty(member)) {
            console.log("member: " + member + ", value: " + personObj[member]);
        }
    }

인터페이스
  • 오브젝트에서 인터페이스 사용할 때

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

    var dylee: Person = {
        name: "leeduyoung",
        age: 28,
        move:() => { }
    }

  • 함수에서 인터페이스 사용할 때

    interface SearchFunc {
        (src: string, substring: string): boolean;
    }

    var mySearchFunction: SearchFunc = (src:string, sub:string) => {
        return src.search(sub) != -1;
    }



클래스

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

    }

    var point1 = new Point(10, 20);



모두 즐거운 코딩하세요~

Comments