TypeScript as: 타입 단언과 타입 캐스팅

value as Type은 타입 단언으로, value를 Type으로 취급하라고 TypeScript에 알립니다. 흔히 캐스트라고 부르지만 컴파일러에 대한 지시일 뿐입니다. JavaScript 출력에서 지워지고, 런타임에 아무것도 변환하거나 검사하지 않습니다.

interface Config {
  port: number;
  host: string;
}

const text = '{"port": 8080, "host": "localhost"}';

// JSON.parse returns any; the assertion gives the result a useful type
const config = JSON.parse(text) as Config;

console.log(config.port + 1);            // 8081
console.log(config.host.toUpperCase());  // LOCALHOST

이것이 전형적인 용도입니다. 값에 대해 컴파일러보다 더 많이 알고 있을 때(여기서는 어떤 JSON의 모양) 그렇다고 말하는 것입니다. 틀렸다면 아무것도 경고해 주지 않습니다. 이어지는 절에서 그것이 무슨 뜻인지, 언제 런타임 검사가 더 나은 선택인지 보여 줍니다.

as와 꺾쇠괄호 문법

같은 단언을 쓰는 방법이 두 가지 있습니다.

const someValue: unknown = "hello";
const a = someValue as string;   // as syntax
const b = <string>someValue;     // angle-bracket syntax, same meaning

꺾쇠괄호 형태는 <string>이 JSX 태그로 읽히는 .tsx 파일에서 허용되지 않습니다. 어디서나 as를 쓰면 이런 고민이 생기지 않습니다. 단언은 약하게 결합하므로, 표현식을 이어 가려면 괄호로 감싸세요: (value as string).length.

단언은 값을 변환하지 않는다

실제 버그를 일으키는 부분입니다. 단언은 값 자체가 아니라 값에 대해 컴파일러가 믿는 것을 바꿉니다.

const input: unknown = "42";

const asserted = input as number;  // compiles: unknown can be asserted to anything
const converted = Number(input);   // an actual conversion

console.log(asserted + 1);   // 421 (string concatenation: it is still "42")
console.log(converted + 1);  // 43
console.log(typeof asserted, typeof converted); // string number

컴파일러는 asserted가 number라고 믿으므로 asserted + 1이 산술로 타입 검사를 통과합니다. 런타임에는 여전히 문자열 "42"이고 JavaScript는 문자열을 이어 붙입니다. 값의 타입을 바꾸려면 변환하세요: Number(x), String(x), Boolean(x), BigInt(x), new Date(x). 변환 함수 비교는 문자열을 숫자로 페이지에 있습니다.

컴파일러가 허용하는 것

as가 무제한은 아닙니다. TypeScript는 한 타입을 다른 타입에 대입할 수 있을 때 x as T를 허용합니다. 넓히기("a" as string, dog as Animal)와 좁히기(animal as Dog, unknown as User) 모두 괜찮습니다. 두 타입이 전혀 겹치지 않으면 거부합니다.

// This does not compile: string and number do not overlap.
const input = "42";
const n = input as number;

console.log(n);

컴파일러는 index.ts(3,11): error TS2352: Conversion of type 'string' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.를 보고합니다. 메시지 자체가 비상구를 알려 줍니다: input as unknown as number. 이 이중 단언은 컴파일되지만, 런타임에는 위의 예와 똑같이 틀립니다. 이것이 필요하다고 느껴진다면 대개 올바른 해결책은 변환(Number(input))이나 다른 타입입니다.

객체에 대해서는 겹침 규칙이 느슨합니다. 속성을 일부만 가진 객체 리터럴도 받아들여지며, 그래서 as는 불완전한 객체를 조용히 통과시킵니다.

interface User {
  name: string;
  email: string;
}

const draft = { name: "Ada" } as User; // compiles: email is missing
const empty = {} as User;              // compiles too

console.log(draft.name);               // Ada
console.log(typeof draft.email);       // undefined, although the type says string
console.log(empty.name?.length);       // undefined

표기(const draft: User = { name: "Ada" })나 satisfies User였다면 빠진 email을 보고했을 것입니다(TS2741). 객체 리터럴에 as를 쓰는 것은 정말로 나중에 채울 의도일 때만 하고, 완전한 객체를 만드는 편을 택하세요.

as const는 다르다

as const는 단언처럼 보이지만 느슨하게 하는 것과 반대로 동작합니다. 리터럴을 가능한 한 좁게 만듭니다. 문자열은 리터럴 타입으로 남고, 배열은 readonly 튜플이 되며, 객체 속성은 readonly가 됩니다.

const sizes = ["small", "medium", "large"] as const;
type Size = (typeof sizes)[number]; // "small" | "medium" | "large"

const point = { x: 1, y: 2 } as const; // { readonly x: 1; readonly y: 2 }

function isSize(value: string): value is Size {
  return (sizes as readonly string[]).includes(value);
}

console.log(isSize("medium"), isSize("huge")); // true false
console.log(point.x + point.y);                // 3

컴파일러가 볼 수 없는 것을 주장하는 대신 리터럴을 정확히 기술하므로 안전합니다. (isSize 안의 sizes as readonly string[]는 넓히는 단언으로, 역시 안전합니다. includes가 아무 문자열이나 받게 해 줍니다.) 더 자세한 내용은 리터럴 타입을 보세요.

타입 가드가 더 나은 도구일 때

as는 주장이고, 타입 가드는 검사입니다. 코드 밖에서 데이터가 들어오는 경계(JSON, fetch, localStorage, 사용자 입력, 메시지)에서는 그 주장이 거짓일 수 있고, 단언은 경계에서의 명확한 오류를 다른 어딘가의 헷갈리는 오류로 바꿔 놓습니다.

interface Point {
  x: number;
  y: number;
}

function isPoint(v: unknown): v is Point {
  return typeof v === "object" && v !== null &&
    "x" in v && typeof v.x === "number" &&
    "y" in v && typeof v.y === "number";
}

const raw: unknown = JSON.parse('{"x": 3, "y": "4"}');

// With as: compiles, and the bug surfaces later
const p1 = raw as Point;
console.log(p1.x + p1.y); // 34 (a string snuck in)

// With a guard: the bad data is caught where it enters
if (isPoint(raw)) console.log(raw.x + raw.y);
else console.log("invalid point");

비슷해 보이는 도구들의 대략적인 안내:

as의 좋은 용도는 두 가지가 남습니다. 컴파일러가 따라갈 수 없는 것을 좁히는 경우(두 줄 위에서 설정한 Map 항목, 타입 없는 라이브러리의 값)와, 부분적인 픽스처를 만드는 테스트 코드입니다. 작게 유지하고, 그 주장이 참이라는 것을 아는 곳 가까이에 두세요.