TypeScript / 대수 타입, 타입 추론 정리

 

TypeScript 대수타입

 

- 대수타입은 수학적 조합 관점에서 타입을 설명하는 방법이고, 크게 합 타입(UNION) 과 곱 타입 

  (Intersection)으로 구성된다.

 

합 타입 (Union Type)

 

- 여러 개 중 하나일 수 있는 타입

 

특징

- 상태가 여러 가지 중 하나만 가능할 때 사용

- 프론트엔드에서 API 상태 관리, 폼 상태 표현 등에 많이 쓰임

- 협소한 타입으로 구성해서 런타임 오류를 줄이기 좋다.

 

type ResponseData = string | null;
 
function printData(data: ResponseData) {
    if(data === null) {
        console.log('No data');
    } else {
        console.log(data.toUpperCase());
    }
}

type A = { name: string};
type B = {age: number};
 
const ab: A & B = {name: "철수", age: 20};

let a = 10; // number
let s = "hello"; // string
 
// 타입스크립트는 값을 보고 자동으로 해당 타입을 추론한다.
 
 
function add(a: number, b: number) {
    return a + b;
}
 
// 반환 타입을 명시하지 않아도 number로 추론
 
 
function greet(name = "철수"){
    return `Hello, ${name}`;
}
 
// name: string 으로 자동 추론
 
function wrap<T>(value: T){
    return {value};
}
 
const data = wrap(10);
 
// T -> number 로 추론됨
 
// 타입 넓히기(Widening) and 좁히기(Narrowing)
 
let x = "hello";
 
// 넓혀서 string으로 추론 -> 어떤 문자열이라도 대입 가능
 
const y = "hello";
 
// 좁혀서 "hello" 리터럴 타입으로 추론 -> 정확히 'hello'만 가능
 
 
const user = {
    name: "철수",
    age: 20,
};
 
// {name: string, age: number}