0Pricing
TypeScript Academy · 강의

실용적인 satisfies 패턴

설정 객체와 조회 테이블에 satisfies를 적용합니다.

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

색상 팔레트 검증

팔레트에 satisfies Record<string, Color>를 사용하는 것은 일반적인 패턴입니다. 모든 값이 유효한 색상인지 검사하면서 키는 자동 완성을 위해 정확하게 유지합니다.

type Color = "red" | "green" | "blue";
const palette = {
  primary: "blue",
  secondary: "green"
} satisfies Record<string, Color>;
console.log(palette.primary);

잘못된 팔레트 값 감지

값이 유효한 Color가 아니면 satisfies가 오류를 보고하고, 키는 정확한 타입으로 유지됩니다.

type Color = "red" | "green" | "blue";
// const bad = { primary: "purple" } satisfies Record<string, Color>; // Error
const ok = { primary: "red" } satisfies Record<string, Color>;
console.log(ok.primary);

키 자동 완성 유지

추론된 키가 "primary" | "secondary"이므로 편집기가 키를 자동 완성합니다. 특정 키를 잃게 되는 일반 Record 주석과는 다릅니다.

type Color = "red" | "green" | "blue";
const palette = { primary: "red", accent: "blue" } satisfies Record<string, Color>;
// palette.<autocomplete: primary, accent>
console.log(palette.accent);

경로 맵 검증

경로 맵에도 이점이 있습니다. 값은 처리기 형태와 일치해야 하고, 경로 이름은 탐색 도우미에서 사용할 수 있도록 알려진 상태로 유지됩니다.

type Route = { method: "GET" | "POST"; path: string };
const routes = {
  home: { method: "GET", path: "/" },
  login: { method: "POST", path: "/login" }
} satisfies Record<string, Route>;
console.log(routes.login.method);

맵 인덱스로 접근하기

키가 보존되므로 유효한 경로 이름의 타입을 만들고 맵에 타입-safe하게 인덱스로 접근할 수 있습니다.

type Route = { method: string; path: string };
const routes = {
  home: { method: "GET", path: "/" },
  about: { method: "GET", path: "/about" }
} satisfies Record<string, Route>;
type RouteName = keyof typeof routes; // "home" | "about"
const pick: RouteName = "about";
console.log(routes[pick].path);

서로 다른 값을 가진 타입 지정 config

값의 형태가 서로 다른 경우에도 satisfies가 작동합니다. 유니온 타입으로 제한하면 각 값이 해당 타입에 맞는지 검증됩니다.

type Setting = number | boolean | string;
const config = {
  retries: 3,
  verbose: true,
  region: "eu"
} satisfies Record<string, Setting>;
console.log(config.retries, config.verbose);

열거형과 유사한 조회 테이블

값 타입에 맞는지 검증하면서 각 항목은 나중에 사용하도록 정확하게 유지하는 조회 테이블을 만들 수 있습니다.

type Status = "active" | "inactive";
const userStatus = {
  alice: "active",
  bob: "inactive"
} satisfies Record<string, Status>;
const s: "active" = userStatus.alice;
console.log(s);

as const와 함께 사용하기

as const와 satisfies를 결합하면 깊은 수준까지 불변이고 검증된 데이터를 만들 수 있습니다. as const는 고정하고 satisfies는 검사합니다.

type Color = "red" | "blue";
const theme = {
  primary: "red",
  secondary: "blue"
} as const satisfies Record<string, Color>;
console.log(theme.primary);

타입으로 숫자 범위 검증

숫자 리터럴 유니온으로 값을 제한하여 고정된 선택지 집합을 표현하고, 정의하는 시점에 검증할 수 있습니다.

type Level = 1 | 2 | 3;
const levels = {
  easy: 1,
  medium: 2,
  hard: 3
} satisfies Record<string, Level>;
console.log(levels.hard);

기능 플래그 맵

실용적인 기능 플래그 config에서는 키가 자동 완성할 수 있는 플래그 이름이고, 값은 satisfies로 검증되는 부울 값입니다.

const flags = {
  newDashboard: true,
  betaSearch: false
} satisfies Record<string, boolean>;
type Flag = keyof typeof flags;
const f: Flag = "betaSearch";
console.log(flags[f]);

이 패턴이 좋은 이유

팔레트, 경로, 플래그 전반에서 satisfies Record<...>는 검증된 값과 정확한 키 및 리터럴을 모두 제공하므로 타입이 지정된 구성에 일상적으로 사용하기 좋은 균형점입니다.

type Color = "red" | "green" | "blue";
const ui = { brand: "green", warn: "red" } satisfies Record<string, Color>;
console.log(Object.keys(ui).join(","));

빠른 확인: 실용적인 satisfies

실용적인 satisfies 패턴을 얼마나 이해했는지 확인해 보십시오.

복습: 실용적인 satisfies 패턴

팔레트, 경로 맵, 플래그, 조회 테이블에 satisfies Record<string, Color>를 적용하여 모든 값을 검증하면서 자동 완성을 위한 exact 키와 리터럴을 유지하는 방법을 배웠습니다.

type Color = "red" | "blue";
const theme = { bg: "blue", fg: "red" } satisfies Record<string, Color>;
console.log(theme.bg, theme.fg);

자주 묻는 질문

“실용적인 satisfies 패턴” 강의는 무료인가요?

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

“실용적인 satisfies 패턴”에서 뭘 배우나요?

설정 객체와 조회 테이블에 satisfies를 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“실용적인 satisfies 패턴” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. satisfies가 존재하는 이유
  2. satisfies와 타입 주석 비교
  3. satisfies와 as 단언 비교
  4. 실용적인 satisfies 패턴
← TypeScript Academy(으)로 돌아가기