TypeScript Academy · 강의

as const를 사용한 const 단언

객체와 배열을 깊은 readonly 리터럴 타입으로 고정합니다.

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

as const 단언

const 단언은 as const로 작성하며, TypeScript가 값에 대해 가장 구체적이고 깊은 곳까지 readonly인 타입을 추론하도록 합니다. 객체 속성은 리터럴 타입이 되면서 변경할 수 없게 되고, 배열은 읽기 전용 튜플이 됩니다.

const point = { x: 10, y: 20 } as const;
// type: { readonly x: 10; readonly y: 20 }
console.log(point.x, point.y);

as const 없이

단언이 없으면 객체 속성의 타입이 확장됩니다. { x: 10 }에서는 x: number가 추론되며 값을 변경할 수 있습니다. 이전 장면과 비교하면 as const가 무엇을 바꾸는지 알 수 있습니다.

const a = { x: 10 };       // x: number, mutable
const b = { x: 10 } as const; // x: 10, readonly
a.x = 99; // allowed
console.log(a.x, b.x);

속성을 리터럴로 고정하기

as const는 모든 문자열 속성을 해당 리터럴 타입으로 바꿉니다. 키와 값이 정확히 유지되어야 하는 config 객체에 매우 유용합니다.

const config = {
  env: 'production',
  retries: 3
} as const;
// env: 'production', retries: 3
console.log(config.env, config.retries);

읽기 전용으로 변경 방지

as const는 속성을 readonly로 만들기 때문에 컴파일러가 재할당을 차단합니다. 타입 수준에서 값이 불변이 되므로 실수로 변경되는 것을 막을 수 있습니다.

const settings = { mode: 'dark' } as const;
console.log(settings.mode);
// settings.mode = 'light'; // Error: readonly property

배열에 대한 const 단언

배열에 as const를 적용하면 리터럴 타입으로 이루어진 읽기 전용 튜플이 생성됩니다. 길이는 고정되고 각 요소는 정확한 값을 유지합니다.

const colors = ['red', 'green', 'blue'] as const;
// type: readonly ['red', 'green', 'blue']
console.log(colors[0], colors.length);

읽기 전용 배열은 변경할 수 없음

읽기 전용 튜플은 push 같은 변경 메서드나 인덱스 할당을 거부합니다. 데이터가 잠기므로 고정 조회 테이블에 정확히 필요한 동작입니다.

const days = ['Mon', 'Tue', 'Wed'] as const;
console.log(days.join(', '));
// days.push('Thu'); // Error: push does not exist on readonly tuple

typeof arr[number]로 유니온 도출하기

강력한 패턴이 있습니다. readonly 배열에서 typeof arr[number]를 사용해 요소 타입의 유니온을 도출할 수 있습니다. 값을 한 번만 작성하면 리터럴 유니온을 자동으로 얻을 수 있습니다.

const ROLES = ['admin', 'editor', 'viewer'] as const;
type Role = typeof ROLES[number];
// 'admin' | 'editor' | 'viewer'
const r: Role = 'editor';
console.log(r);

단일 진실 공급원

이렇게 하면 실행 시점의 배열과 타입이 항상 일치합니다. 배열에 값을 추가하면 유니온도 자동으로 갱신되므로, 중복된 목록을 따로 관리할 필요가 없습니다.

const SIZES = ['S', 'M', 'L', 'XL'] as const;
type Size = typeof SIZES[number];

function pick(s: Size): void {
  console.log('Picked', s);
}
pick('M');

튜플에 대한 const 단언

요소마다 타입이 다른 튜플에서는 as const가 정확한 타입과 순서를 모두 보존하여 정밀한 읽기 전용 튜플을 만듭니다.

const pair = [1, 'one'] as const;
// type: readonly [1, 'one']
console.log(pair[0], pair[1]);

깊은 수준의 읽기 전용 동작

as const는 깊은 곳까지 적용됩니다. 중첩된 객체와 배열도 끝까지 리터럴 타입의 읽기 전용 값이 됩니다.

const data = {
  name: 'app',
  tags: ['a', 'b']
} as const;
// tags is readonly ['a', 'b']
console.log(data.name, data.tags[1]);

열거형을 위한 const 단언

const 객체와 여기서 도출한 유니온은 enum을 대신할 수 있는 간단한 방법입니다. 실행 시점에는 리터럴 값을, 타입 수준에서는 정확한 타입을 얻으면서 추가로 생성되는 코드는 전혀 없습니다.

const Status = {
  Idle: 'idle',
  Active: 'active'
} as const;
type Status = typeof Status[keyof typeof Status];
const s: Status = Status.Active;
console.log(s);

빠른 확인

const 단언에 대한 이해도를 확인해 보십시오.

복습: as const

as const가 다음과 같은 기능을 한다는 것을 배웠습니다.

가장 구체적이고 깊은 곳까지 readonly인 리터럴 타입을 추론합니다.
객체 속성을 리터럴 타입의 읽기 전용 필드로 바꿉니다.
배열을 리터럴로 이루어진 읽기 전용 튜플로 바꿉니다.
typeof arr[number]를 통해 유니온을 도출할 수 있게 하여 값과 타입을 일치시킵니다.

다음에는 리터럴을 결합해 표현력 있는 유니온을 만들어 보겠습니다.

const LEVELS = ['low', 'mid', 'high'] as const;
type Level = typeof LEVELS[number];
const chosen: Level = 'mid';
console.log(chosen);

자주 묻는 질문

“as const를 사용한 const 단언” 강의는 무료인가요?

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

“as const를 사용한 const 단언”에서 뭘 배우나요?

객체와 배열을 깊은 readonly 리터럴 타입으로 고정합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“as const를 사용한 const 단언” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기