[typescript] 열거형과 리터럴 타입으로 프로퍼티 값 제한하기

Hyebin·2021년 8월 30일
0

Typescript

목록 보기
5/5
post-thumbnail

만약에 gender의 범주에 male, female만 값으로 넣고 싶다면 타입을 string 말고 특정지어서 사용할 수는 없을까?

프로퍼티 값을 제한할 수 있는 방법은 두가지가 있다.

열거형(Enum)

연관된 아이템들을 함께 묶어서 표현 할 수 있는 수단

  • enum은 컴파일 시 코드가 구현되어 js 파일에 나타난다. 이것은 enum이 런타임에 존재하는 실제 객체라는 것을 의미한다.
  • 컴파일된 js파일을 보면 male에는 숫자0, female에는 숫자1이 나타나는데 이것은 ts가 선언된 순서에 따라 0부터 순차적으로 증가하는 숫자를 넣어준다.
    {
        Male = 0,
        Female = 1,
        getderNeutral = 2
    }

위 개념이 바로 타입스크립트에서 숫자 열거형(Numeric Enum)을 뜻한다.

만약 여기서 숫자값을 갖지 않고 string 값을 갖길 원한다면 문자형 열거형을 쓸 수도 있다.

//enum 사용을 위해 선언을 한다. 
enum GenderType {
    //선택지로 쓸 수 있는 값을 넣는다.
    //숫자 열거형
    //Male,
    //Female
    
    //문자 열거형 
    Male = 'male',
    Female = 'female',
    genderNeutral = 'genderNeutral'
}

interface Student4 {
    readonly studentID: number;
    studentName: string;
    age?: number;
    //string이 아닌 선언된 enum을 타입으로 지정해서 쓴다.
    gender: GenderType;
    createDate: Date;
}


function getStudentDetails1(studentId: number): Student4  {
    return {
        studentID: 3,
        studentName: 'Moon',
        //gender type이 string 형태라 발생하는 에러
        //gender: 'male',
        gender: GenderType.Male,
        createDate: new Date
    }
}

리터럴 타입

파이프 기호로 제한할 값을 지정하는 방법

interface Student5 {
    readonly studentID: number;
    studentName: string;
    age?: number;
    gender: 'male' | 'female' | 'genderNeutral';
    createDate: Date;
}

0개의 댓글