TypeScript Academy · 강의

문맥적 형식 지정: 문맥에서 추론하기

TypeScript가 주변 문맥에서 형식을 추론하는 방식을 이해합니다.

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

문맥적 타이핑이란 무엇입니까?

문맥적 타이핑은 TypeScript가 표현식 자체의 값이 아니라 표현식이 나타나는 위치를 바탕으로 타입을 추론하는 현상입니다. 즉, 타입은 값이 아니라 문맥에서 제공됩니다.

document.addEventListener("click", (e) => {
  // e is inferred as MouseEvent from the event type
  console.log(e.clientX);
});

콜백의 문맥적 타이핑

타입이 지정된 함수에 콜백을 전달하면 TypeScript는 예상되는 콜백 시그니처에서 매개변수 타입을 추론합니다.

const nums = [1, 2, 3];
nums.forEach((n) => {
  // n inferred as number from Array<number>
  console.log(n.toFixed(2));
});

객체 리터럴의 문맥적 타이핑

객체 리터럴을 타입이 지정된 변수에 할당하면 해당 타입에서 프로퍼티 타입을 추론하므로 정확한 검사가 가능합니다.

interface Config { timeout: number; retries: number; }
const config: Config = {
  timeout: 3000,
  retries: 3,
  // extra: true // Error: excess property
};

JSX의 문맥적 타이핑

React에서는 이벤트 핸들러 프로퍼티에 문맥적으로 타입이 지정되므로 이벤트 매개변수 타입이 자동으로 추론됩니다.

function Button({ onClick }: { onClick: (e: React.MouseEvent) => void }) {
  return <button onClick={onClick}>Click</button>;
}
// Caller: e is inferred as React.MouseEvent
<Button onClick={(e) => console.log(e.currentTarget)} />

문맥적 타이핑과 명시적 주석

문맥적 타이핑은 강력하지만 명시적 주석으로 재정의할 수 있습니다. 두 가지가 모두 있으면 명시적 지정이 문맥적 지정보다 우선합니다.

const handler: (x: string) => void = (x: number) => {}; // Error
// Explicit annotation (number) conflicts with contextual (string)

구조 분해를 사용한 문맥적 타이핑

문맥적으로 타입이 지정된 함수의 구조 분해 매개변수도 문맥에서 타입을 상속합니다.

const pairs: [string, number][] = [["a", 1]];
pairs.forEach(([key, value]) => {
  // key: string, value: number — contextually typed
  console.log(key.toUpperCase(), value * 2);
});

문맥적 타이핑과 반환 타입

함수를 타입이 지정된 변수에 할당하면 반환 타입도 문맥에 따라 추론됩니다.

type Transform = (x: number) => string;
const double: Transform = (x) => x * 2; // Error: number not string
const str: Transform = (x) => String(x * 2); // OK

조건부 표현식의 문맥적 타이핑

TypeScript는 삼항 표현식과 논리 연산자에 문맥적 타입을 전달할 수 있습니다.

const result: string | null =
  Math.random() > 0.5 ? "yes" : null; // both arms typed by context

문맥적 타이핑의 한계

주석이 없는 독립 변수처럼 표현식이 문맥이 없는 위치에 있으면 문맥적 타이핑이 적용되지 않습니다.

const fn = (x) => x + 1; // x: any — no context to infer from
// Add annotation: const fn = (x: number) => x + 1;

양방향 추론

TypeScript는 양방향 타입 추론을 수행합니다. 위에서 아래로 진행되는 추론(문맥적 추론)과 아래에서 위로 진행되는 추론(표현식에서 시작하는 추론)이 함께 작동하여 가장 정확한 타입을 제공합니다.

function apply<T>(fn: (x: T) => T, val: T): T { return fn(val); }
apply((x) => x.toUpperCase(), "hello"); // x inferred as string

복습: 문맥적 타이핑

문맥적 타이핑을 사용하면 TypeScript가 표현식이 사용되는 위치에서 타입을 추론합니다. 콜백, 할당, JSX 프로퍼티, 구조 분해가 모두 이 추론 메커니즘의 이점을 얻습니다.

빠른 확인

콜백 매개변수에 문맥적 타이핑은 언제 적용됩니까?

학습한 내용

문맥적 타이핑은 값이 아니라 위치에서 TypeScript가 타입을 추론하는 기능입니다. 이를 통해 타입 안전성을 유지하면서 콜백, 이벤트 핸들러, 타입이 지정된 할당을 간결하게 작성할 수 있습니다.

자주 묻는 질문

“문맥적 형식 지정: 문맥에서 추론하기” 강의는 무료인가요?

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

“문맥적 형식 지정: 문맥에서 추론하기”에서 뭘 배우나요?

TypeScript가 주변 문맥에서 형식을 추론하는 방식을 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“문맥적 형식 지정: 문맥에서 추론하기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기