공부할 것들이 산더미지만, 하나하나 정리해가면서 내 것으로 만들자 💪
오늘은 TypeScript의 대수 타입(Algebraic Type) 과 타입 추론(Type Inference) 에 대해 정리해보자.
이 두 가지는 실제 코드 작성 시 굉장히 자주 마주치는 개념들이라 꼭 이해하고 가야 한다!
대수타입(Algebraic type) 이란?
여러 타입을 조합하여 만든 타입을 말한다.
수학에서 말하는 합집합(Union), 교집합(Intersection) 개념과 비슷하다.
TypeScript에서는 아래와 같은 두 가지로 표현된다.
- 합집합 타입 (Union Type):
| - 교집합 타입 (Intersection Type):
&
합집합(Union) 타입
여러 타입 중 하나만 만족하면 되는 타입
let ex: string | number;이 변수 ex에는 string이나 number 타입 중 하나라도 만족하면 할당 가능하다.
유니온 타입에 참여하는 타입들의 개수는 제한이 없다. 만약에 다른 타입도 구성하고 싶다면 추가하면 된다.
let ex: string | number | boolean;
ex = 1;
ex = "string";
ex = true;Union 타입으로 배열 타입 정의
let arr: (number | string | boolean)[] = [1,"hello",true];괄호를 이용해서 배열 요소 타입을 묶어주는 것이 중요하다!
Union 타입과 객체 타입
아래와 같이 여러개의 객체 타입의 유니온 타입도 얼마든지 정의할 수가 있다.
type Car = {
name: string;
color: string;
}
type Person = {
name: string;
language: string;
}
type Union = Car | Person;따라서 아래와 같은 객체들을 포함하는 타입이 된다.
let union: Union = {
name: "",
color: "",
}
let union2: Union = {
name: "",
language: "",
}
let union3: Union = {
name: "",
color: "",
language: "",
}하지만 아래와 같은 객체는 포함하지 않는다.
let union4: Union{
name: ""
}교집합(Intersection) 타입
모든 타입을 동시에 만족해야 하는 타입
let ex: number & string;number와 string은 서로소 타입이기 때문에 교집합이 불가능해서 never로 추론된다.
대다수의 기본 타입들 간에는 서로 공유하는 교집합이 없기 때문에 이런 인터섹션 타입은 보통 객체 타입들에 자주 사용된다.
type Car = {
name: string;
color: string;
}
type Person = {
name: string;
language: string;
}
type Intersection = Car & Person;
let intersection: InterSection = {
name: "",
color: "",
language: "",
}타입 추론이란?
타입스크립트가 명시적으로 타입을 지정하지 않아도, 초기값을 보고 타입을 자동으로 추론하는 기능
let a = 10; // <- number 타입으로 추론모든 변수에 일일이 타입을 정의하지 않아도 되는 편리함을 제공한다.
하지만 모든 상황에 타입을 잘 추론하는 것은 아니다.
예를 들어서 아래와 같이 함수의 매개변수 타입은 자동으로 추론이 불가능하다.
function fuc(param){} // 에러그리고 이렇게 타입 추론이 불가능한 변수에는 암시적으로 any 타입이 추론이 된다. 그러나 엄격한 타입 검사 모드에서는 이런 암시적 any 타입의 추론을 오류로 판단하게 된다.
타입 추론이 가능한 상황들
1. 변수 선언
일반적인 변수 선언의 경우 초기값을 기준으로 타입이 잘 추론된다.
let a = 10; // number 타입으로 추론
let b = "hello" // string 타입으로 추론
let c = {
id: 1,
name: "홍길동",
}
// id, name 프로퍼티가 있는 객체 타입으로 추론2. 구조 분해 할당
객체와 배열을 구조 분해 할당하는 상황에서도 타입이 잘 추론된다.
let {a,b,c} = example;
let [one, two, three] = [1, "hello", true];3. 함수의 반환값
함수 반환값의 타입은 return 문을 기준으로 잘 추론된다.
function func() {
return "hello";
}
// 반환값이 string 타입으로 추론된다.4. 기본값이 설정된 매개변수
기본값이 설정된 매개변수의 타입은 기본값을 기준으로 추론된다.
function func(message = "hello") {
return "hello";
}⚠️ 주의해야 할 상황들
1. 암시적으로 any 타입으로 추론
변수를 선언할 때 초기값을 생략하면 암시적인 any 타입으로 추론이 된다. 참고로 이때 매개변수의 타입이 암시적 any로 추론될 때와 달리 일반 변수의 타입이 암시적 any 타입으로 추론되는 상황은 오류로 판단하지 않는다.
let d; // <- 암시적 any 타입으로 추론
d = 10;
d.toFixed();
d = "hello"
d.toUpperCase();
d.toFixed(); // 오류d = 10; 다음 라인부터는 d가 number 타입이고, d = "hello" 다음 라인부터는 d가 string 타입이 된다. 따라서 마지막 라인에서 d가 string 타입일 때 toFixed 같은 number 타입의 메서드를 사용하려고 하면 오류가 발생한다.
-> 암시적으로 추론된 any 타입은 코드의 흐름에 따라 타입이 계속 변화한다. 이를 any의 진화라고도 표현을 한다.
2. const 상수의 추론
const는 값이 변경될 수 없기 때문에, 가장 좁은 리터럴 타입으로 추론된다.
반면 let은 일반적인 타입 (number, string)으로 추론됨.
const num = 10;
// 10 Number Literal 타입으로 추론한다.
const str = "hello"
// "hello" String Literal 타입으로 추론한다.최적 공통 타입(Best Common Type)
여러 타입이 혼합된 배열의 경우, 공통 타입으로 자동 추론된다.
let arr =[1, "string"]; // (string | number)[] 타입으로 추론마무리
| 개념 | 설명 |
|---|---|
| Union 타입 | 여러 타입 중 하나라도 만족하면 OK |
| Intersection 타입 | 모든 타입을 동시에 만족해야함 |
| 타입 추론 | 초기값을 보고 타입을 자동으로 지정 |
| any의 진화 | any 타입이 코드 흐름에 따라 계속 바뀌는 현상 |
| const vs let 추론 | const는 리터럴, let은 일반 타입으로 추론된다. |
✍️ TypeScript는 공부할수록 더 재밌고 강력해진다!
이번엔 대수 타입과 타입 추론을 정리했으니, 다음엔 타입 가드, 타입 단언, 제네릭(Generic) 에 대해서도 이어서 정리해보자!
