타입스크립트 핵심 문법

Posted on

타입스크립트 설치

다음 명령어를 통해 타입스크립트를 설치할 수 있습니다

1
npm install -g typescript

타입스크립트 코드 작성(greeter.ts)

1
2
3
4
5
6
7
function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

💡 확장자가 .ts이지만 아직 평범한 자바스크립트 파일입니다.

코드 컴파일

아래 명령어를 터미널에 입력하세요

1
tsc greeter.js

이 결과로 나오는 코드는 greeter.js입니다. 이제 typescript를 사용할 수 있습니다!

타입스크립트는 말그대로 타입을 표기할 수 있습니다. : string과 같이 콜론 뒤에 정하고자 하는 타입을 지정합니다.

1
2
3
4
5
6
7
function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

여기서 인수가 개수나 형식이 잘못되어도 컴파일은 되지만, 코드가 예상대로 동작하지 않을수도 있습니다.

인터페이스

타입스크립트에서는 새로운 타입을 정의할 수도 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
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);

클래스

인터페이스를 통한 추상화가 가능합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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);

💡 생성자 인수의 public을 사용하면 그 인수의 이름으로 프로퍼티를 자동생성합니다.