TypeScript Academy · 강의

타입 단언을 위한 as 키워드

as를 사용해 추론된 타입을 의도적으로 덮어씁니다.

레슨 1/413개 단계

타입 단언을 위한 as 키워드은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

타입 단언이란 무엇인가

타입 단언은 컴파일러에 '이 값이 T 타입이라는 것을 알고 있으니 믿으세요'라고 알리는 것입니다. as 키워드를 사용하여 value as Type과 같이 작성합니다. 값 자체가 아니라 타입 검사기가 값을 바라보는 방식만 바꿉니다.

const raw: unknown = 'hello world';
const text = raw as string;
console.log(text.toUpperCase());

as 문법

표현식을 작성한 then as then 대상 타입을 작성합니다. 꺾쇠괄호 문법도 있지만, as가 모든 곳에서 작동하고 JSX/TSX 파일에서도 사용할 수 있으므로 선호됩니다.

const value: unknown = 42;
const n = value as number;
console.log(n + 8);

단언은 런타임을 변경하지 않습니다

이 점은 매우 중요합니다. 단언은 컴파일 시간에만 적용되는 지시입니다. 코드가 실행될 때 단언은 제거됩니다. 변환이나 검증은 일어나지 않으므로 잘못 단언해도 런타임 값은 바뀌지 않고 예상과 다르게 동작할 수 있습니다.

const v: unknown = 'not a number';
const n = v as number; // compiles, but v is still a string
console.log(typeof n); // 'string' at runtime!

단언이 유효한 경우

TypeScript는 서로 겹치는 타입 사이에서만 직접 단언을 허용합니다. 즉, 한 타입을 다른 타입에 할당할 수 있는 관계여야 합니다. unknown을 string으로 단언하거나, 타입 관계 안에서 범위를 넓히거나 좁힐 수 있습니다.

const u: unknown = 'ok';
const s = u as string; // valid: unknown overlaps everything
const broad = s as string | number; // valid widening
console.log(s, broad);

유효하지 않은 직접 단언

두 타입 사이에 겹치는 부분이 없으면 TypeScript는 직접 단언을 가능성이 높은 실수로 보고 거부합니다. 예를 들어 string을 직접 number로 단언하는 것은 차단됩니다.

const s = 'hello';
// const n = s as number; // Error: neither type sufficiently overlaps
console.log('Direct unrelated assertions are blocked');

as로 유니온 좁히기

컴파일러가 알지 못하는 정보를 알고 있을 때 유니온 값을 구성원 중 하나로 단언하는 것은 일반적으로 유효한 사용 방법입니다. 다만 신중하게 사용하세요. 런타임 검사가 대개 더 안전합니다.

type Shape = { kind: 'circle'; r: number } | { kind: 'square'; s: number };
const data: Shape = { kind: 'circle', r: 5 };
const circle = data as { kind: 'circle'; r: number };
console.log(circle.r);

DOM 요소 타입 단언하기

실제 개발에서 자주 사용하는 예는 다음과 같습니다. DOM 조회는 HTMLElement | null처럼 broad한 타입을 반환합니다. 특정 요소라는 것을 알고 있다면 해당 요소에만 있는 속성에 접근하도록 단언할 수 있습니다.

// document.getElementById returns HTMLElement | null
// const input = document.getElementById('email') as HTMLInputElement;
// console.log(input.value);
console.log('Assert HTMLElement to HTMLInputElement for .value');

DOM 단언이 필요한 이유

DOM API는 어떤 구체적인 요소를 가져오게 될지 알 수 없으므로 일반적인 타입을 반환합니다. 특정 하위 타입(예: HTMLInputElement)으로 단언하면 value나 checked 같은 속성을 사용할 수 있습니다.

// const canvas = document.querySelector('#c') as HTMLCanvasElement;
// const ctx = canvas.getContext('2d');
console.log('querySelector returns Element | null; assert to specialize');

const 단언은 특수한 경우입니다

이미 as const를 보셨습니다. 이는 값을 깊은 수준까지 읽기 전용으로 만들고 리터럴 타입을 부여하는 특수한 단언입니다. 타입을 좁히기만 하므로 항상 안전한 유일한 단언입니다.

const tuple = [1, 2, 3] as const;
// type: readonly [1, 2, 3]
console.log(tuple.length);

단언은 안전 검사를 우회합니다

단언은 컴파일러에 검사를 중단하라고 지시하므로 책임이 사용자에게 넘어갑니다. 잘못된 단언은 실제 타입 오류를 숨겨 런타임에 충돌할 때까지 드러나지 않게 할 수 있습니다. 컴파일러보다 더 많은 것을 확실히 알고 있을 때만 사용하세요.

const data: unknown = { id: 1 };
const user = data as { id: number; name: string };
// name does not exist at runtime
console.log(user.name); // undefined, no compile error

단언보다 좁히기 우선하기

가능하면 단언보다 런타임 좁히기(타입 가드)를 우선하세요. 좁히기는 타입을 증명하지만 단언은 그렇다고 주장할 뿐입니다. DOM 타입을 구체화하는 경우처럼 좁히기로 표현할 수 없는 상황에만 as를 사용하세요.

function safe(v: unknown): number {
  if (typeof v === 'number') return v; // proven
  return 0;
}
console.log(safe(10), safe('x'));

빠른 확인

타입 단언에 대한 이해도를 확인해 보세요.

인터랙티브 레슨에서 답해보세요

복습: as 단언

다음 내용을 배웠습니다:

value as Type은 컴파일러가 값을 지정된 타입으로 취급하게 합니다.
단언은 컴파일 시간에만 적용되며 런타임 변환이나 검사는 수행하지 않습니다.
겹치는 타입 사이에서만 허용됩니다.
유효한 사용 예로는 unknown을 좁히고 DOM 요소 타입을 구체화하는 것이 있습니다. 가능하면 좁히기를 우선하세요.

다음으로 null 아님 단언 연산자를 알아봅니다.

const raw: unknown = 'data';
const s = raw as string;
console.log(s.length);

무료로 시작

AI 튜터와 함께 TypeScript을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 101
레슨: 352

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“타입 단언을 위한 as 키워드” 강의는 무료인가요?

네 — “타입 단언을 위한 as 키워드” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“타입 단언을 위한 as 키워드”에서 뭘 배우나요?

as를 사용해 추론된 타입을 의도적으로 덮어씁니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“타입 단언을 위한 as 키워드” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기