[TypeScript] 00. 시작하기

원문 : https://www.typescriptlang.org/docs/tutorial.html

TypeScript tool을 설치방법은 2가지가 있다.

1. npm을 이용한 설치

2. TypeScript's Visual Studio plugin 설치 (Download Page 에서 다운 받으면 된다.)

npm을 이용해 설치 할 경우

npm install -g typescript

그럼 이제 TypeScript 파일을 작성해보자.

greeter.ts

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

var user = "Jane User";

document.body.innerHTML = greeter(user);

음... 확장자는 .ts 를 사용한다는것 빼고는 자바스크립트랑 다른점이 안보인다.

자 이제 그럼 .ts 파일을 .js 파일로 컴파일 하자

tsc greeter.ts

위와 같이 실행하면 greeter.js 파일이 컴파일 되어 생성되고 이 파일을 html에서 사용하면 된다.

Type annotations

TypeScript는 변수의 타입이나 함수의 리턴 타입을 명시 할 수 있는 장점을 제공한다.

명시 하는 방법은 "변수(or 함수) : Type" 이렇게 하면된다.

위 예제에 적용해 보면

greeter.ts

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

var user = "Jane User";

document.body.innerHTML = greeter(user);

greeter 함수는 person 이라는 이름의 string 타입 변수를 받는다. 라고 정의 할 수 있다.

그러면 string 타입이 아닌 다른 타입을 입력해보면 어떨까?

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

var user = [0, 1, 2];

document.body.innerHTML = greeter(user);

위와 같이 입력하고 tsc greeter.ts 하면

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

이런 에러가 난다.

Interfaces

TypeScript에는 Interface라는 타입이 존재한다.

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

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

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

document.body.innerHTML = greeter(user);

Person 이라는 인터페이스를 정의하고, greeter라는 함수의 매개변수로 이 Person Type을 받는다고 정의한다.

Person 인터페이스는 firstName, lastName 2개의 필드값을 가지고 있으므로, 매개 변수로 넘길 user라는 오브젝트에 각 필드 값을 정의 한다. 그리고 greeter함수의 매개변수로 user 를 넘기면 된다.

만약 user 가 Person 인터페이스의 값을 제대로 가지고 있지 않다면?

var user = {firstName: "Jane"};

greeter.ts(21,35): error TS2345: Argument of type '{ firstName: string; }' is not assignable to parameter of type 'Person'.

  Property 'lastName' is missing in type '{ firstName: string; }'.

위와 같은 에러가 발생한다.

Classes

TypeScript는 class 기반의 OOP를 지원한다.

일단 코드를 보자.

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

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

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

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

document.body.innerHTML = greeter(user);

Student 라는 클래스를 정의 했다.

이 클래스는 몇개의 public 필드를 포함한 생성자(constructor)와 fullName이라는 필드를 가지고 있다.

생성자에 public으로 정의된 매개변수는 클래스의 객체에서 속성값으로 사용된다. 따라서 user 는 fullName, firstName, middleInitial, lastName이라는 속성값들을 가진다.

그리고 firstName, lastName 필드가 있기때문에 Person이라는 인터페이스로 호환(?) 된다. 그래서 greeter 함수의 매개변수로 사용이 가능해진다.