리터럴타입
타입스크립트에서는 let과 const에 따라 타입이 다르게 추론된다.
let은 값의 타입이, const은 값 자체가 타입으로 들어가있음을 알 수 있다.
이렇게 변수의 값을 곧 타입으로 치는 것을 리터럴타입이라고 한다.
const는 상수니까 값 자체를 타입으로 추론하는 것이다.
숫자도 마찬가지로 적용된다.
let small = 95;
const large = 100;리터럴은 숫자형에 포함된다.
즉 파라미터가 number만 받도록 타입설정이 되어있을 때
대입하여도 에러가 나지 않는다.
function printSize(size: number) {
console.log(`${size} 사이즈입니다`);
}
printSize(small); // 숫자형 타입 95반대로 파라미터로 리터럴타입을 받는다면
대입되는 값이 정확히 일치하지 않을 경우 에러가 날 것이다.
function printSize(size: 100) {
console.log(`${size} 사이즈입니다`);
}
printSize(small); // 숫자형 타입 95. 불일치로 인해 에러.타입별칭 Type Alias
같은 타입선언이 여러군데에서 반복이 된다면?
유지보수가 잘 되도록 반복되는 타입에 이름을 붙여주자.
마치 커스터마이즈 타입을 만드는 개념과 흡사하며, 여러군데에서 쓸 수 있다.
- 예시 1:
type Cart = string[];- 예시 2:
type Point = [number, number];함수에도 쓸 수 있다.
type CartResaultCallback = (result: boolean) => void;객체에도 쓸 수 있다.
type Product = {
id: string;
name: string;
}인터페이스와 똑같은 역할을 하고 있는 모습.
따라서 객체의 경우는 인터페이스로 만들자.
interface Product = {
id: string;
name: string;
}유니언타입
Product라는 부모 인터페이스가
ClothingProduct와 ShowProduct라는 두 자식 인터페이스를 가지고 있을 때
사이즈를 나타내는 함수가 둘 다를 활용해야 한다면?
function printSizes(product: ClothingProduct | ShoeProduct) { ...|를 이용하여 두 타입 다 파라미터로 쓸 수 있다.
ClothingProduct | ShoeProduct
유니언타입일 때는 ClothingProduct와 ShoeProduct 두가지 경우를 모두 고려하기 때문에
공통된 프로퍼티만 참조할 수 있다.
console.log(이름: ${product.name});
만약 한쪽에만 존재하는 프로퍼티로 무언가를 하고 싶을 때는
if...in 연산자를 활용할 수 있다.
if ("color" in product) {
console.log(`색상: ${product.color}`);
}특히 유니언은 리터럴값과 같이 사용하면 유용하다.
예를들어 신발 사이즈는 number[] 이지만 정해진 사이즈가 있다.
따라서 아래와 같이 타입별칭 + 유니언 + 리터럴타입을 활용해 미리 등록하는 것도 방법이다.
type ShowSize = 220 | 230 | 240 | 260 | 280;
type ClothingSize = "S" | "M" | "L" | "XL"위는 이전에 배운 enum을 이용한 상수테이블 만들기와 흡사한데
enum은 몇가지 단점으로 인해 유니언방식이 가독성이 다소 떨어지더라도 선호되는 것 같다.
링크1
링크2
