타입스크립트 강의를 보며 개인적으로 기록하는 글입니다.
이번 글에서는 타입스크립트의 Enum, Any, Union, Literal type에 대해 다룹니다.
Enum을 사용하는 목적
예시1
사람의 정보를 담고 있는 객체가 있습니다.
여기서 역할을 관리자, 작성자, readonly 사용자로 나누려 합니다.
관리자는 0, readonly 사용자는 1, 작성자는 2로 말입니다.
하지만 이런 식으로 개발을 할 경우 이후에 개발팀의 규모가 커지거나, 잊어버린다거나 하는 상황들로부터 자유롭지 못할 것입니다.
예시2
숫자로 정하여 잊을 것 같으니 문자열로 수정해봤습니다.
그러나 다른 코드에서 누가 헷갈려 스네이크 케이스를 케밥 케이스로 바꾸었습니다. 이와 같이 개발자의 오타로 인한 에러도 발생할 가능성이 있습니다.
일반적인 자바스크립트 패턴
위의 예시들 같은 상황을 피하기 위해 자바스크립트에서 일반적으로 사용되는 패턴입니다. 그러나 role이 숫자로 추론되니 어떤 숫자든 넣을 수 있다는 단점이 있습니다.
Enum
이런 상황에선 위와 같이 enum을 사용할 수 있습니다.
이때, enum의 상수는 0부터 시작하여 순차적으로 1씩 증가하는 값을 가지게 됩니다.
만약 0부터 시작하길 원하지 않는다면 아래처럼 시작값을 할당해주면 됩니다.
그 외에도 다른 타입의 식별자를 입력해주어도 상관 없습니다.
이를 통해 Enum은 코드를 파악하기 쉽고, 매핑된 식별자 값이 필요할 때 편리하다는 점에 대해 알 수 있었습니다.
Any
Any 타입은 말 그대로 어떠한 유형이든 다 되는 타입입니다.
듣기에는 융통성이 있어 보이고 좋아 보이지만, 사실 큰 약점입니다.
타입스크립트 컴파일러가 아무것도 체크하지 못하도록 해 타입스크립트가 제공하는 모든 이점을 뺏어가기 때문입니다.
Union Type
예시
input 값들을 더하여 반환하는 combine이라는 함수가 있습니다.
만약 이름을 더하고 싶어 이렇게 combine을 호출하려 하니 에러가 뜹니다. 'Max'는 숫자가 아니기 때문이죠. 그래서 숫자와 문자열을 모두 결합하여 반환하는 함수를 만들고자 합니다.
이럴 때엔 타입을 어떻게 정의해야 할까요?
Union type 사용해보기
타입스크립트에게 input1과 input2의 타입은 숫자나 문자열이면 된다고 알려줍니다. 그렇게 수정하니 다음과 같은 에러가 나옵니다.
'+' 연산자를 'string | number' 및 'string | number' 형식에 적용할 수 없습니다.
이에 따른 분기 처리를 하고 나면 에러 없이 정상 작동합니다.
이렇게 union 타입을 사용하면 함수에서 작업할 때 보다 유연하게 사용할 수 있습니다.
Literal Type
resultConversion 값에 따라 반환하는 유형이 다른 함수가 있습니다.
그러나 이 값 또한 앞서 다룬 Enum을 사용하는 목적에 대한 예시들과 마찬가지로 오타가 나거나 할 수 있습니다. 현재 resultConversion의 타입은 그저 문자열이기 때문입니다.
TypeScript에서 Literal Type은 특정한 값을 나타내는 타입을 의미합니다.
그래서 이렇게 쓴다면 resultConversion은 구체적으로 저 두 개의 문자열만 허용합니다.
Literal 타입은 주로 Union 타입과 함께 사용됩니다.
