타입스크립트[TypeScript] | 타입 리터럴 사용해서 필수 값 지정하기

🔍 글을 시작하기 전에

 

해당 글은 타입스크립트 프로그래밍 책과 유데미 타입스크립트 강의를 공부하여 정리한 글입니다.

수정해야 할 부분이 있다면 언제든지 알려주세요!

 

타입 리터럴이란?

 

책에서는 오직 하나의 값을 나타내는 타입이라고 소개하고 있다.

모든 곳에서 일어날 수 있는 실수를 방지해 안전성을 확보해 주는 강력한 언어 기능이라고 부연 설명을 해주고 있다.

 

나는 말 그대로 값을 타입으로 사용하는 것이라고 이해했고 큰 어려움이 없는 개념이었다.

 

let answer: true = true;
answer = false; // Type 'false' is not assignable to type 'true'.

 

위 코드처럼 answer의 타입을 true로 지정하면 이후 값을 변경하지 못한다.

const와 같은 역할을 하는구나라고 생각이 들었다.

 

그러면 이러한 강력한 기능을 어떻게 활용할 수 있을지 궁금해졌다.

실제 프로젝트에서도 잘 사용될만한 예시를 강의에서 볼 수 있었다.

 

타입 리터럴 활용하기

 

숫자 또는 내용이 숫자인 문자열을 입력받아 원하는 타입으로 출력될 수 있도록 하는 코드를 작성한다고 생각해보자.

그러면 나는 이렇게 코드를 작성할 것 같다.

 

function combine(input1: number | string, input2: number | string, resultType: string) {
    if (resultType === 'text') {
        return input1.toString() + input2.toString();
    }
    if (resultType === 'number') {
        return Number(input1) + Number(input2);
    }
    return '전달받을 결과 타입을 작성해주세요.'
}

const combineAges = combine(30, 26, 'number');
console.log(combineAges); // 56
console.log(typeof combineAges); // number

 

하지만 이 코드에서 발생할 수 있는 문제점은,

resultType을 작성하는 것이 사람마다 다를 수 있어서 정확하게 'text'와 'number'로 값을 입력받기가 어려울 수 있다는 점이다.

더 큰 문제는 오류가 발생하지 않는 점이다.

 

만약 'as-text'로 세번째 인자를 전달했을 때, 오류가 발생하지 않고 '전달받을 결과 타입을 작성해주세요.' 라는 값만 반환되니

어리둥절 할 것 같다.

그렇다고 반환값을 '전달받을 결과 타입은 text 또는 number로만 작성해주세요.' 라고 두는 것도 낭비라는 생각이 들었다.

 

이를 상수화 해서 값을 활용할 수 있겠지만,

 

const TEXT = 'text';
const NUMBER = 'number';

 

만약 선택지가 많아진다면 어떤 값이 선택지로 있었는지 기억을 하기가 어려울 수 있으며,

정해진 값이 아닌 다른 값을 작성했을 때 오류가 발생하지 않는 문제점은 그대로이다.

 

이럴 때 타입 리터럴을 사용하면 훨씬 간편해진다.

 

function combine(input1: number | string, input2: number | string, resultType: 'text' | 'number') {
    if (resultType === 'text') {
        return input1.toString() + input2.toString();
    }
    if (resultType === 'number') {
        return Number(input1) + Number(input2);
    }
    return;
}

combine(12,23,'as-text'); // Error: Argument of type '"as-text"' is not assignable to parameter of type '"number" | "text"'.

 

인자의 타입을 입력받을 값으로 정해둔다면 의도한 바와 다른 값을 작성했을 때 오류가 발생하는 것을 확인할 수 있다.

그리고 어떤 값이 와야하는지도 알려주니 더욱 좋다.

 

Type alias(타입 별칭)로 수정해보기

 

type alias란 let, const로 변수를 선언하듯이 type으로 타입을 선언하는 것이다.

사용법은 다음과 같다.

 

type Person = {
    name: string,
    age: number
}

const driver: Person = {
    name: 'JaeYeong',
    age: 100
}

// 타입 별칭을 사용하지 않았을 때
const driver: {
    name: name: string,
    age: number
} = {
    name: 'JaeYeong',
    age: 100
}

 

이를 활용해서 combine함수를 더욱 간단하게 수정할 수 있다.

 

type ResultType = 'number' | 'text';

function combine(input1: number | string, input2: number | string, resultType: ResultType) {
    if (resultType === 'text') {
        return input1.toString() + input2.toString();
    }
    if (resultType === 'number') {
        return Number(input1) + Number(input2);
    }
    return;
}

 

지금은 값이 간단하게 두개뿐이어서 체감이 덜 될 수 있으나 복잡한 선택지가 있다면 더 좋은 선택이지 않을까 싶다.