지금까지 TypeScript를 정리하면서 느낀 점은, 타입 지정이라는 기능을 개발자들의 다양한 요구를 반영하게 되면서 매우 세심한 기능들을 사용할 수 있게 되었다는 점입니다. 이번 게시물에서 다뤄 볼 Literal Type도 여기에 해당된다고 할 수 있겠습니다.
Literal Type?
Literal Type의 개념
제가 변수를 하나 만들었다고 가정하겠습니다. 그리고 저는 이 변수에, 'A'라는 문자열 데이터 하나만 담고 싶습니다.
그러면 간단하게 다음처럼 코드를 작성하면 될 것입니다.
const 변수 = 'A'그런데 'A' 혹은 'B'를 담고 싶으면 어떻게 해야 할까요? const 키워드 하나만으로는 딱 두 개의 알파벳만 허용하도록 하는 게 불가능해보이네요.
이럴 때 사용하는 것이 바로 Literal Type입니다.
Literal Type은 어떤 변수가 특정한 타입을 넘어서, 특정한 값만 받아들일 수 있도록 선언하는 것입니다.
더 정확히 표현하자면, 실제 값 자체를 하나의 타입으로 만들어 변수에 할당될 수 있는 값을 통제하는 것입니다.
위 코드에서, string이나 number처럼 데이터 타입이 아닌, 실제 값을 넣어준 것을 확인할 수 있습니다. ('Paul'과 'Chris')
그래서 name1은 'Paul'이라는 타입을 취하므로 'Kim'이라는 값을 할당할 수 없게 됩니다.
실제 작성법
위의 예시를 그대로 가져와 보았습니다.
유니언 타입을 만들 때 처럼, '|'를 활용하여 리터럴 타입을 작성하시면 되겠습니다.
아까 만들어 둔 name1 변수에 'Kim'이라는 값도 허용되게 했더니, 아까와는 다르게 에러가 뜨지 않네요.
const와 리터럴 타입을 같이 쓰는 것도 가능합니다. 다음 예시처럼요.
const num1 = 1 | 2이러면 const를 사용했음에도 불구하고 1과 2 모두를 허용하는 함수를 작성할 수 있습니다.
간단한 응용들
지금까지 타입스크립트를 다뤄보면서, 간단한 변수 뿐만 아니라, 배열, 함수 등에도 타입 지정을 엄격히 적용할 수 있다는 것을 배웠습니다.
당연히 리터럴 타입도 배열이나 함수에 응용 가능합니다.
함수의 인자와 리턴 값 모두에 리터럴 타입을 사용해서 타입 지정을 해주었습니다.
해당 함수는 'North' | 'East' | 'West' | 'South' 네 가지 문자열만을 인자로 받고, 'North' | 'South' 둘 중의 하나만을 리턴합니다.
지금 에러가 뜬 것 보이시나요? 함수의 결과값을 'North'나 'South'로 정해놓았는 데 null을 리턴하기 때문에 에러가 뜬 것이라고 볼 수 있습니다.
우리의 친절한 VSCode가 자동 완성을 지원해주는 것도 확인할 수 있네요. 제가 사전에 지정한대로, 'North'와 'South'만 자동 완성의 선택지로 나온 것이 보입니다.
As Const
As Const를 쓰는 이유
다음과 같은 코드를 짜보았습니다. ID 객체를 만들고, 함수를 만들어서 인자로 'John'만 받을 수 있게 리터털 타입을 작성했습니다.
그러고 함수의 ID의 name을 넣어주었습니다. 근데 에러가 뜨는군요.
에러 내용을 살펴보면, 문자열인 인수를 'John'이라는 타입에 할당 못한다고 하는군요.
즉, ID.name의 값이 'John'이라고 할지라도, 이를 'John'이라는 타입으로 지정한 적은 없으니 함수에 인자로 넣을 때 문자열로 인식되는 것입니다.
이러한 상황을 해결하려면 어떡해야 할까요?
일단 애초에 객체를 만들 때 타입 지정을 빡세게 할 수도 있고, 저번 글에서 다루었던 as를 사용한 assertion을 할 수도 있습니다.
하지만 이제 정리할 as const 문법이 이런 상황에서 매우 알차게 활용될 수 있습니다.
as const 사용하기
쓰는 건 쉽습니다. 객체형 자료 뒤에다가 as const를 붙여주면 됩니다.
as const를 사용하면, 객체 안에 담겨있는 각각의 속성들이 각자의 값으로 타입 지정되는 효과를 불러옵니다.
위의 예시에서는 as const를 씀으로써, ID.name이 'John'으로 타입 지정되는 것이죠.
또, as const라는 이름에서 유추할 수 있듯이, 객체형 자료 내부의 값들을 readonly로 바꿔줍니다.
자바스크립트를 다루면서 정리했던 내용인데, 애초에 객체형 자료들은 참조에 의해 할당이 되기 때문에 const로 선언해도 내부가 수정이 가능했습니다. 아래 링크에서 다룬 적이 있습니다.
https://velog.io/@kite1993/JS-Essential-%EC%B0%B8%EC%A1%B0%EC%99%80-%EB%B3%B5%EC%82%AC
그걸 as const로 보완해줄 수 있게 되기 때문에 객체형 자료들을 안정적으로 관리할 수 있게 될 것입니다.
