Typescript(5) - 리터럴 타입과 유니온 타입

이번 포스팅에서는 리터럴타입에 대해서 알아보겠습니다.

Literal Type?

리터럴 타입(Literal Types)은 TypeScript에서 특정한 값을 나타내는 타입으로, 값을 문자열, 숫자, 불리언 등의 리터럴로 제한하는 기능입니다. 리터럴 타입을 사용하면 변수 또는 매개변수가 특정한 값을 가지도록 강제할 수 있으며, 이를 통해 정확한 값의 사용을 보장하고 타입 체크를 강화할 수 있습니다.

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

const, let

js에서의 변수를 지정할때 var, const, let을 사용하여 변수지정이 가능합니다.

var는 오래된 JavaScript에서 사용되던 변수 선언 방식입니다. var로 선언된 변수는 함수 스코프(function scope)를 가지며, 변수가 선언된 함수 내에서만 접근할 수 있습니다. 또한, var 변수는 선언 전에도 접근할 수 있으며, 중복 선언이 가능합니다. 이러한 특징으로 인해 예기치 않은 동작을 일으킬 수 있는 문제가 있어서 let과 const로 대체되었습니다.

그렇기 때문에 let과 const를 사용하는데,

정말 간단하게 설명을 드리면,

let은 변수 값 할당이후 변경가능
const는 변경 불가능

이렇게 아시면 됩니다.

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

두개의 변수에 마우스를 올려본다면
userName1은 Bob
userName2는 string 이라고 나올 것 입니다.

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

userName2 = 3;
//error

userName2를 3으로 선언 하였을때 에러가 생기는 이유는,
첫 선언을 string으로 했기때문에 타입이 string으로 선언이 되어있습니다.

3은 number이기 때문에 에러가 발생합니다.

const userName1 = "Bob";
let userName2: string | number = "Tom";

userName2 = 3;
//good

이런식으로 둘다가능 하게 처리해주면 될 것입니다.

type 변수

const userName1 = "Bob";
let userName2: string | number = "Tom";

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

interface User {
    name: string;
      job: Job;
}

const user: User = {
    name: "Bob",
      job: "police",
}

const user 변수는 User의 타입을 따릅니다.
User interface는 name과 job을 가집니다.

job은 Job 타입을 따릅니다.
Job타입은 police,developer,teacher
3개의 경우의 수를 가집니다.

그렇기 때문에 user변수에서 Job타입에 선언되지 않은 값은 에러를 반환합니다.

예제

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

const Smith: HighSchoolStudent = {
    name: "Smith",
      grade: 2
}

고등학생 이라는 interface를 만들었습니다.

const Smith에 타입을 적용시켜 객체를 만든 예시입니다.

Union Type?

TypeScript에서의 Union Type은 여러 타입 중 하나일 수 있는 값을 표현하기 위해 사용되는 타입입니다. Union Type은 | 기호를 사용하여 타입을 결합합니다. Union Type을 사용하면 변수, 매개변수, 반환 타입 등에 여러 타입을 허용할 수 있으며, 해당 변수 또는 값은 허용된 모든 타입 중 하나가 될 수 있습니다.

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

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

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

getGift함수의 gift 매개변수는 Car또는 Mobile로 유니온타입을 지정해주었습니다.

gift.start(); 구문이 에러를 발생시킵니다.

왜냐하면,
start함수는 Car에는 존재하지만 Mobile에는 존재하지 않기 때문입니다.
이럴때는 start를 사용하기전 Car인지 확인해주어야 하는 절차가 필요할 것입니다.

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

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

function getGift(gift: Car | Mobile){
    console.log(gift.color);
      if(gift.name === "car"){
        gift.start();
    } else {
        gift.call();
    }
}

if를 사용하여 Car일때는 start,
Mobile일때는 call을 실행하도록 처리해주었습니다.

만약 처리해야될 구문이 많다면 switch를 사용하는 것이 조금 더 효율적일 것입니다.

다음 포스팅에서는 교차구문에 대해서 알아보겠습니다.