[typescript] 리터럴

이 내용은 코드앙마의 타입스크립트 강좌를 정리해놓은 자료이다.

---

변수 선언

변수를 선언할 때 const와 let을 사용할 수 있다.

const는 변하지 않는 값을, let은 변할 수 있는 값을 사용할 수 있다.

const userName1 = "Bob";
let userName2 = "Tom";

이때 userName1은 Bob 타입을 userName2는 string 타입으로 지정을 하게 된다.
userName1은 Bob 타입 외에 변할 수 없고 userName2는 string 타입으로 다른 값으로 변경이 가능하다는 의미다.

userName2 = 3; // 오류

userName2는 string 타입이므로 number인 3을 넣을 수 없다. 만일 3과 같은 number를 넣을 수 있게 하려면 아래와 같이 명시해줘야 한다.

let userName2: string | number = "Tom";

문자열 리터럴 타입

userName1처럼 정해진 타입을 문자열 리터럴 타입이라고 한다.

Job을 type을 이용해서 타입을 만들 수 있다.

type Job = 'police' | 'developer' | 'teacher';

그리고 User를 만들어보자.

interface User {
    name: string,
    job: Job
}

const user: User = {
    name: 'Bob',
    job: 'developer'
}

여기서 job은 위에서 선언된 Job 타입만 넣을 수 있고 다른 타입이 오면 오류가 발생한다.

const user: User = {
    name: 'Bob',
    job: 'student' // 오류
}

숫자형 리터럴 타입

숫자형 리터럴 타입도 사용할 수 있다.

아래와 같이 고등학교 인터페이스를 만들수 있다.

interface HighSchoolStudent {
    name: number | string;
    grade: 1 | 2 | 3;
}

유니온 타입

유니온(Union) 타입을 좀 더 알아보자.

자동차와 핸드폰 인터페이스가 있다.

interface Car {
    name : "car";
    color: string;
    start(): void
}

interface Mobile {
    name: "mobile";
    color: string;
    call(): void;
}

이때 getGift() 함수를 만들자.

function getGift(gift: Car | Mobile) {
    console.log(gift.color);
    gift.start(); // 오류
}

여기서 gift.color는 문제가 없다. (Car와 Mobile 모두 color가 있다)
하지만 start()는 Car만 있기 때문에 오류가 발생한다.

이럴 경우는 아래와 같이 타입을 구분해줘야 한다.

function getGift(gift: Car | Mobile) {
    console.log(gift.color);
    if (gift.name === 'car') { // Car 타입일 경우
        gift.start();
    } else { // Mobile 타입일 경우
        gift.call();
    }
}

교차 타입

다음은 교차(Intersection) 타입이다.
교차타입은 여러 타입을 합쳐서 사용한다. 유니온 타입이 or 타입이라면 교체타입은 and 타입이다.

여기에 자동차와 장난감이 있을 때 자동차 장난감을 만들 수 있다.

interface Car {
    name: string;
    start(): void;
}

interface Toy {
    name: string;
    color: string;
    price: number;
}

이때 모든 속성을 다 기입해줘야 한다.

onst toyCar : Toy & Car = {
    name: "타요",
    start() {},
    color: "blue",
    price: 1000
}

교차타입은 여러 개의 타입을 합쳐주는 역할을 한다.