TypeScript 타입 추론: 타입을 써야 할 때와 생략할 때

타입 추론은 작성하지 않은 타입을 TypeScript가 알아내는 것입니다. 변수를 초기화하면 값의 타입을 가지게 되고, 함수에서 값을 반환하면 반환 타입이 따라옵니다. 대부분의 TypeScript 코드는 생각보다 훨씬 적은 타입 표기만 가지고 있습니다.

let count = 0;            // number
let language = "TypeScript"; // string
let tags = ["ts", "js"];  // string[]
let user = { name: "Ada", age: 36 }; // { name: string; age: number }

function area(w: number, h: number) {
    return w * h;          // return type inferred as number
}

const size = area(3, 4);  // number
console.log(count, language, tags, user, size);

// The inferred types are enforced like written ones:
// @ts-expect-error: Type 'string' is not assignable to type 'number'.
count = "one";

주석은 에디터에서 각 이름 위에 마우스를 올렸을 때 보이는 타입입니다. 마지막 줄은 count에 타입을 쓴 적이 없는데도 컴파일 오류(TS2322)입니다. // @ts-expect-error가 이 오류를 예상된 것으로 표시하므로 블록의 나머지 코드는 실행됩니다.

let과 const: 리터럴 타입 확장(widening)

const는 절대 바뀌지 않으므로 TypeScript는 가장 좁은 타입, 즉 리터럴 값 자체를 타입으로 줍니다. let은 나중에 다시 대입될 수 있으므로 더 넓은 타입을 받습니다.

let a = "left";    // string
const b = "left";  // "left"
let c = 42;        // number
const d = 42;      // 42
const e = true;    // true

이 차이는 함수가 특정 값만 받을 때 중요해집니다.

// This does not compile: `let` widened "left" to string.
function move(direction: "left" | "right") {
    console.log("moving", direction);
}

let dir = "left";
move(dir);

const fixed = "left";
move(fixed); // fine: fixed has type "left"

index.ts(7,6): error TS2345: Argument of type 'string' is not assignable to parameter of type '"left" | "right"'.

const를 쓰거나 변수에 타입을 표기해서 고칩니다: let dir: "left" | "right" = "left". 리터럴 타입은 리터럴 타입 페이지에서 따로 다룹니다.

객체와 배열은 멤버의 타입을 확장한다

객체 리터럴의 프로퍼티는 변경할 수 있으므로, 객체 자체가 const여도 let처럼 타입이 확장됩니다. 배열 요소도 마찬가지입니다. as const를 쓰면 모든 것이 readonly가 되고 리터럴 타입이 유지됩니다.

const config = { mode: "dark", retries: 3 };
// config: { mode: string; retries: number }
config.mode = "light"; // allowed: mode is string

const frozen = { mode: "dark", retries: 3 } as const;
// frozen: { readonly mode: "dark"; readonly retries: 3 }

const sizes = ["s", "m", "l"];            // string[]
const fixedSizes = ["s", "m", "l"] as const; // readonly ["s", "m", "l"]

console.log(config.mode, frozen.mode, sizes.length, fixedSizes[0]);

반환 타입 추론

함수의 반환 타입은 return 문에서 추론됩니다. 여러 개라면 그 타입들의 유니언이 됩니다.

function parsePort(text: string) {
    if (text === "") return null;
    return Number(text);
}
// parsePort returns number | null

const port = parsePort("8080");
if (port !== null) {
    console.log(port + 1); // 8081: port is number inside the check
}

function log(message: string) {
    console.log(message);
}
// log returns void: there is no return value

log("done");

대부분의 함수에서는 추론된 반환 타입으로 충분합니다. 시그니처를 계약으로 삼고 싶은 export 함수나 공개 함수에는 반환 타입을 명시하세요. 그러면 본문을 수정해 다른 타입을 반환하게 됐을 때 멀리 떨어진 호출부가 아니라 함수 자체에서 오류가 납니다.

문맥적 타이핑(Contextual Typing): 콜백은 타입을 물려받는다

매개변수는 함수가 호출되는 방식에서 추론되지 않습니다. 예외가 두 가지 있습니다. 기본값이 있는 매개변수는 기본값의 타입을 가집니다(function retry(times = 3)이면 times는 number). 그리고 이미 함수 타입이 기대되는 자리에 작성한 함수는 그 문맥에서 매개변수 타입을 얻으므로, 콜백 매개변수에는 타입 표기가 필요 없습니다.

const names = ["ada", "grace", "alan"];

// s is string: map on a string[] passes strings
const upper = names.map((s) => s.toUpperCase());

// a and b are strings, the result must be a number
const sorted = [...names].sort((a, b) => a.length - b.length);

// The variable's type gives the arrow its parameter and return types
const greet: (name: string) => string = (n) => `Hello, ${n}`;

console.log(upper, sorted, greet("Ada"));

forEach, filter, reduce, Promise 콜백, 이벤트 핸들러, 그리고 함수 타입이 선언된 매개변수에 넘기는 모든 함수에 똑같이 적용됩니다.

매개변수에는 타입 표기가 필요하다

기본값도 없고 그런 문맥도 없다면, TypeScript는 함수가 어떻게 호출되는지를 보고 매개변수 타입을 짐작하지 않습니다. strict가 켜져 있으면 타입 표기가 없는 매개변수는 TS7006 오류입니다.

// This does not compile: a parameter with no type and no context.
function double(x) {
    return x * 2;
}
console.log(double(21));

index.ts(2,17): error TS7006: Parameter 'x' implicitly has an 'any' type.

function double(x: number)로 쓰면 블록은 42를 출력하고, 반환 타입 number는 x * 2에서 추론됩니다.

최적 공통 타입(Best Common Type)

서로 다른 종류의 값이 섞인 배열 리터럴에 대해 TypeScript는 그 타입들의 유니언 배열을 추론합니다. 명시하지 않은 공통 상위 타입을 찾아 주지는 않습니다.

const mixed = [1, "two", null]; // (string | number | null)[]
const nums = [1, 2.5, -3];      // number[]

class Animal { name = "animal"; }
class Dog extends Animal { bark() { return "woof"; } }
class Cat extends Animal { meow() { return "meow"; } }

const pets = [new Dog(), new Cat()];            // (Cat | Dog)[]
const animals: Animal[] = [new Dog(), new Cat()]; // annotate to get Animal[]

console.log(mixed.length, nums, pets.length, animals[0].name);

주의할 경우는 빈 배열 하나입니다. const list = []는 push할 때마다 타입이 늘어나는 "진화하는(evolving)" 배열로 시작합니다. const list: string[] = []처럼 타입을 표기하면 의도가 처음부터 드러나 더 명확합니다.

언제 타입을 표기할까

무엇이 추론됐는지 가장 빨리 보는 방법은 에디터에서 이름 위에 마우스를 올리는 것입니다. 에디터가 없다면 const probe: boolean = mixed;처럼 틀린 타입의 변수에 값을 대입해 보세요. 컴파일러의 오류 메시지가 추론된 타입을 알려 줍니다.