Enum, Any, Union 본문

Web/TypeScript

Enum, Any, Union

미니모아 2022. 8. 4. 18:56
반응형

Enum

사용자 지정 타입

원하는 범위 내의 유효한 값만 받고 싶을 경우에 사용할 수 있다.

TypeScrpit

enum Role {
    Admin,
    READ_ONLY,
    ATHOR,
};

자바스크립트에서는 아래처럼 컴파일된다.

Javascript

var Role;
(function (Role) {
    Role[Role["Admin"] = 0] = "Admin";
    Role[Role["READ_ONLY"] = 1] = "READ_ONLY";
    Role[Role["ATHOR"] = 2] = "ATHOR";
})(Role || (Role = {}));
;

Any

타입에 구애받지 않고 모든 타입을 저장할 수 있다.

하지만 타입스크립트의 장점을 상쇄시켜 바닐라 자바스크립트를 쓰는 것과 같기 때문에 잘 쓰지 않는다.

any 타입을 사용하는 모든 위치에서는 타입스크립트 컴파일러가 작동하지 않고 any 속성 또는 변수가 어떻 값도 저장하지 않아서 컴파일러가 검사할 부분이 없어진다.

  • 어떤 값이나 종류의 데이터가 어디에 저장될지 전혀 알 수 없는 경우에 대비
  • 런타임 검사를 수행하는 경우 런타임 도중 특정 값에 수행하고자 하는 작업의 범위를 좁히기 위해

위의 두 경우에만 any를 사용한다.

Union

여러 타입이 가능하도록 결합하고 싶을 때 사용한다.

타입스크립트는 유니온 타입만 이해할 뿐 유니언 타입 내에 무엇이 있는지는 분석하지 못한다.

function combine(
    input1: number | string,
    input2: number | string,
) {
  const result = input1 + input2;
// ERROR : Operator '+' cannot be applied to types 'string | number' and 'string | number'.
  return result;
}

const combinedAges = combine(30, 26);
console.log(combinedAges);

const combinedNames = combine('Max', 'Anna');
console.log(combinedNames);

해당 문제는 런타임 타입 검사를 추가하여 해결할 수 있다.

function combine(
    input1: number | string,
    input2: number | string,
) {
    let result;
    if (typeof input1 === 'number' && typeof input2 ==='number') {
        result = input1 + input2;   
    } else {
        result = input1.toString() + input2.toString();
    }
    return result;
}

const combinedAges = combine(30, 26);
console.log(combinedAges);

const combinedNames = combine('Max', 'Anna');
console.log(combinedNames);
반응형

'Web > TypeScript' 카테고리의 다른 글

[TypeScript] 고급타입  (0) 2022.08.24
[TypeScript] 인터페이스  (0) 2022.08.19
[TypeScript] 클래스  (0) 2022.08.17
[TypeScript] TypeScript 컴파일러  (0) 2022.08.12
[TypeScript] Literal Type, Type alias, void, 함수, Unknown, Never  (0) 2022.08.10
Comments