Typescript 시작하기

설치

설치는 공식문서 상 2가지 방법이 있습니다.

• npm 을 이용한 설치
• typescript의 visual studio 플러그인 설치

npm의 경우 아래의 명령어를 통해 설치가 가능합니다.

> npm install -g typescript

-g는 전역 변수로 실행하는 겁니다. 만약 최상단 루트 위치에서 위 명령어를 입력하면 프로그램 전반에 걸쳐 typescript를 사용할 수 있습니다.

Typescript 파일 생성

설치가 완료되면 Typescript 파일을 생성합니다. 공식문서에는 greeter.ts로 함수를 선언하는 예시가 나옵니다.

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);	

이런 함수를 greeter.ts에 넣으면 세팅이 마무리됩니다.

코드 컴파일하기

그럼 이 코드를 컴파일해 js 파일을 만들어주면 됩니다.

tsc greeter

터미널에 아래와 같이 입력해주면 컴파일된 js 파일이 생성됩니다. 이렇게 생성하는 과정에서 만약 타입 오류가 생긴다면 typescript는 그 오류를 출력해줍니다.

오류표기

function greeter(person: string) {
    return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.textContent = greeter(user);

위 처럼 user에 string 대신 배열이 들어간다면 타입 오류가 발생하고

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

커멘드 라인엔 오류의 내용이 적힙니다. 그러나 greeter.js 파일은 생성됩니다. 코드에 오류가 존재하더라도 typescript를 통해 컴파일은 가능합니다. 다만 Typescript가 경고를 하는 거죠.

인터페이스

만약 다양한 조건의 데이터 값을 체크해야 하는 경우엔 인터페이스를 활용하면 유용합니다.

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.textContent = greeter(user);

예시를 통해 보듯이 마치 객체에 타입 조건을 명시한 형태로 구성되어 원하는 조건을 꺼내 사용이 가능합니다.

클래스

마찬가지로 클래스를 통해서도 구성이 가능합니다.

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.textContent = greeter(user);

이렇게 인터페이스와 사실상 동일한 형태로 조건 구성이 가능하죠.