🔥 타입 추론: 언제 쓰고 언제 두는가
let name: string = "Mejoo" 를 치고 엔터를 눌렀을 때는 손이 먼저 갔다. 앞에서 콜론과 타입을 직접 적는 습관을 이미 한 번 만들었기 때문이다. 바로 다음 줄에 let count = 3 을 적을 때는 손이 잠깐 멈췄다. 똑같이 변수 선언인데 이번에는 콜론이 없다. 그래도 에디터에 마우스를 올리니 count: number 가 뜬다. 둘 다 컴파일은 통과한다. 차이는 내가 타입을 적었는가, 아니면 우변을 보고 컴파일러가 타입을 정했는가에 있다. 여기서 기준을 하나 세워 두면 그다음 코드가 한결 단정해진다.
초깃값이 분명하면 타입을 다시 적지 않는다
초깃값이 분명하면 타입 주석은 중복이다. 컴파일러는 우변을 먼저 읽고, 그 값으로 좌변 타입을 잡는다. 예를 들어 숫자 계산은 number, 문자열 리터럴은 문자열 타입으로 잡는다. 객체 리터럴은 프로퍼티 구성을 가진 객체 타입으로 잡는다.
// file: infer-from-init.ts
export {};
let total = 3 + 4;
// ^?
// number
const greeting = "안녕";
// ^?
// "안녕"
let user = { id: 1, name: "Mejoo" };
// ^?
// { id: number; name: string }// file: infer-from-init.ts
export {};
let total = 3 + 4;
// ^?
// number
const greeting = "안녕";
// ^?
// "안녕"
let user = { id: 1, name: "Mejoo" };
// ^?
// { id: number; name: string }첫 줄은 계산 결과가 숫자이므로 number 가 된다. 둘째 줄은 const 이므로 "안녕" 자체를 유지한다. 셋째 줄은 객체 리터럴이지만 let 으로 받았기 때문에 각 프로퍼티가 더 넓은 타입으로 바뀐다. id 는 1 이 아니라 number, name 은 "Mejoo" 가 아니라 string 이 된다.
let 과 const 는 추론 폭이 다르다. let 은 나중에 다른 값을 넣을 수 있으므로 컴파일러가 더 넓은 타입으로 잡는다. const 는 다시 대입할 수 없으므로 더 좁은 타입으로 잡는다. 값 레벨에서는 선언 키워드 한 단어만 다르지만, 에디터에서 마우스를 올리면 추론된 타입이 바로 보인다.
입력은 적고 반환은 둔다
함수에서는 기준이 조금 달라진다. 매개변수 타입은 내가 적는 편이 낫다. 호출하는 쪽에서 무엇을 넣어야 하는지 바로 알 수 있기 때문이다. 반면 반환 타입은 함수 본문만 봐도 드러나는 경우가 많다. 이때는 같은 정보를 한 번 더 적지 않아도 된다.
// file: annotate-inputs.ts
export {};
function add(a: number, b: number) {
return a + b;
}
// ^?
// (a: number, b: number) => number
console.log(add(3, 4));// file: annotate-inputs.ts
export {};
function add(a: number, b: number) {
return a + b;
}
// ^?
// (a: number, b: number) => number
console.log(add(3, 4));이 예제에서 꼭 적어야 하는 부분은 a 와 b 의 타입이다. 두 값은 함수 밖에서 들어온다. 매개변수 타입을 빼면 컴파일러가 호출부에서 확인할 정보가 줄어든다. 반환 타입 number 는 return a + b 한 줄에서 나온다. 그래서 반환 타입을 생략해도 시그니처 정보는 그대로 남는다.
나는 이 구분에서 자주 헷갈렸다. 특히 초반에는 매개변수 타입과 반환 타입을 둘 다 적어야 마음이 놓였다. 그런데 반환 타입까지 매번 적기 시작하면, 본문을 고쳤을 때 시그니처도 같이 손봐야 한다. 본문이 곧 답인 함수라면 그 중복은 금방 귀찮아진다.
추론이 너무 넓으면 내가 다시 좁힌다
추론 결과가 항상 필요한 타입과 맞지는 않는다. 문자열 하나를 넣었는데 컴파일러가 string 으로 넓게 잡을 때가 있고, 그보다 좁은 값 집합을 유지하고 싶을 때도 있다. 그때는 내가 타입을 직접 적어 범위를 좁힌다.
// file: widen-vs-narrow.ts
export {};
{
let x = "ts";
// ^?
// string
}
{
const x = "ts";
// ^?
// "ts"
}
let mode: "light" | "dark" = "light";
// ^?
// "light" | "dark"
mode = "dark";
// mode = "system";// file: widen-vs-narrow.ts
export {};
{
let x = "ts";
// ^?
// string
}
{
const x = "ts";
// ^?
// "ts"
}
let mode: "light" | "dark" = "light";
// ^?
// "light" | "dark"
mode = "dark";
// mode = "system";첫 블록의 x 는 let 이라서 string 이 된다. 나중에 다른 문자열을 넣을 수 있기 때문이다. 둘째 블록의 x 는 const 이라서 "ts" 그대로 남는다. 값 하나만 허용해도 충분하다고 컴파일러가 판단한다.
마지막 mode 는 내가 직접 범위를 적었다. 이때 컴파일러는 초기값 "light" 하나만 보지 않고, 앞으로 허용할 값 전체를 기준으로 검사한다. 그래서 "dark" 는 통과하고, 주석을 풀어 mode = "system" 을 넣으면 컴파일러가 그 줄에서 바로 멈춘다. 추론이 너무 넓을 때는 내가 타입을 명시해서 허용 범위를 줄인다.
반환 타입도 같은 기준으로 보면 된다. 본문이 짧고 계산이 단순하면 추론에 두는 편이 낫다. 반대로 본문을 손보는 동안 반환 형태가 함께 바뀌면 안 되는 함수라면, 그때는 반환 타입도 직접 적는다.
디폴트는 분명하다. 매개변수는 적고, 반환 타입은 추론에 둔다. 예외도 분명하다. 추론이 너무 넓거나 반환 형태를 계약처럼 고정해야 하면 그때는 내가 직접 적는다.
YouTube 영상
