0Pricing
TypeScript Academy · 강의

신선도 및 초과 속성 검사

일부 문맥에서 초과 속성이 오류를 일으키는 이유를 살펴봅니다.

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

신선도란 무엇입니까?

신선도는 객체 리터럴이 생성되는 시점에 "신선한" 것으로 간주되는 TypeScript 개념입니다. 신선한 객체에는 확장된 객체에는 적용되지 않는 엄격한 초과 프로퍼티 검사가 적용됩니다.

interface Point { x: number; y: number; }
const p: Point = { x: 1, y: 2, z: 3 }; // Error: 'z' not in Point

초과 프로퍼티 검사의 실제 적용

객체 리터럴을 타입이 지정된 변수에 직접 할당하거나 함수 인수로 전달하면 TypeScript가 대상 타입에 없는 추가 프로퍼티를 보고합니다.

function setPoint(p: { x: number; y: number }) {}
setPoint({ x: 1, y: 2, z: 3 }); // Error: 'z' excess property

초과 프로퍼티 검사가 존재하는 이유

JavaScript에서 흔히 발생하는 버그의 원인인 구성 객체의 오타와 의도하지 않은 프로퍼티를 찾아냅니다.

interface Options { timeout: number; retry?: boolean; }
const opts: Options = { timeout: 3000, retrey: true }; // Error — typo!

신선도가 사라지는 방식

객체 리터럴을 중간 변수에 할당하면 더 이상 "신선한" 객체가 아니므로 확장된 타입에 초과 프로퍼티 검사가 적용되지 않습니다.

const opts = { timeout: 3000, retry: true, extra: "surprise" };
const o: Options = opts; // No error — freshness lost on assignment

타입 어설션으로 신선도 우회

as 타입 어설션을 사용해도 초과 프로퍼티 검사를 우회할 수 있으며, 이로 인해 버그가 숨겨질 수 있습니다.

const o = { timeout: 3000, typo: true } as Options; // No error

교차 타입의 초과 검사

추가 프로퍼티가 교차 타입의 구성원 중 하나에 속할 수 있으므로 교차 타입은 때때로 초과 프로퍼티 검사를 완화합니다.

type A = { x: number };
type B = { y: number };
const ab: A & B = { x: 1, y: 2 }; // OK

Readonly와 초과 프로퍼티

초과 프로퍼티 검사는 readonly 객체 타입에도 적용됩니다. 이 규칙은 변경 가능성이 아니라 구조적 형태에 관한 것입니다.

interface Cfg { readonly host: string; }
const c: Cfg = { host: "localhost", port: 3000 }; // Error

인덱스 시그니처와 초과 프로퍼티

타입에 인덱스 시그니처를 추가하면 문자열 키를 가진 추가 프로퍼티를 모두 허용하므로 해당 타입의 초과 프로퍼티 검사가 사실상 비활성화됩니다.

interface Flexible { name: string; [key: string]: unknown; }
const f: Flexible = { name: "ts", extra: true }; // OK

선택적 프로퍼티와 신선도

선택적 프로퍼티는 초과 프로퍼티 검사를 완화하지 않습니다. 전혀 나열되지 않은 프로퍼티는 선택적 프로퍼티로도 지정되지 않았으므로 여전히 초과 프로퍼티로 보고됩니다.

interface Shape { color?: string; }
const s: Shape = { color: "red", size: 10 }; // Error: 'size' excess

실용적인 패턴

추가 구성 프로퍼티를 오류 없이 타입이 지정된 인터페이스를 통해 전달하려면 중간 변수를 사용하거나 인터페이스에 인덱스 시그니처를 사용합니다.

// Option 1: intermediate variable (freshness lost)
const cfg = { timeout: 3000, debugMode: true };
const o: Options = cfg;
// Option 2: index signature in interface

복습: 신선도

신선도는 신선한 객체 리터럴에 적용되어 할당 시점에 초과 프로퍼티 검사를 활성화합니다. 추가 프로퍼티를 허용하려면 중간 변수에 할당하거나 인덱스 시그니처를 사용합니다.

빠른 확인

초과 프로퍼티 검사가 적용되지 않는 경우는 언제입니까?

학습한 내용

신선도와 초과 프로퍼티 검사는 객체 리터럴의 오타와 의도하지 않은 프로퍼티를 방지합니다. 예상하지 못한 타입 오류나 숨겨진 버그를 피하려면 신선도가 언제 사라지는지 이해해야 합니다.

자주 묻는 질문

“신선도 및 초과 속성 검사” 강의는 무료인가요?

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

“신선도 및 초과 속성 검사”에서 뭘 배우나요?

일부 문맥에서 초과 속성이 오류를 일으키는 이유를 살펴봅니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“신선도 및 초과 속성 검사” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. 형식 확장 및 축소의 작동 원리
  2. 문맥적 형식 지정: 문맥에서 추론하기
  3. 신선도 및 초과 속성 검사
  4. const 단언 및 as const
← TypeScript Academy(으)로 돌아가기