0Pricing
TypeScript Academy · 강의

제네릭 함수: 형식 매개변수

재사용성을 높이기 위해 함수에 형식 매개변수를 추가합니다.

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

시작하기

제네릭을 사용하면 타입 안전성을 유지하면서 모든 타입으로 동작하는 함수를 작성할 수 있습니다. `any`를 사용하는 대신 함수가 호출될 때 결정되는 타입 매개변수를 사용합니다.

제네릭이 해결하는 문제

`any`를 반환하는 함수는 타입 정보를 잃습니다. 제네릭은 입력 타입과 출력 타입 사이의 관계를 보존합니다.
// Without generics — loses type info
function first(arr: any[]): any { return arr[0]; }

// With generics — type-safe
function first<T>(arr: T[]): T { return arr[0]; }

타입 매개변수 문법

매개변수 목록 앞에 꺾쇠괄호 ``를 사용하여 타입 매개변수를 선언합니다. 매개변수와 반환 타입에서 T를 사용합니다.
function identity<T>(value: T): T {
  return value;
}
const n = identity(42);       // T is number
const s = identity('hello');  // T is string

제네릭 함수의 타입 추론

TypeScript는 실제 인수에서 타입 인수를 추론합니다. 타입 인수를 명시적으로 지정해야 하는 경우는 드뭅니다.
function wrap<T>(val: T): T[] { return [val]; }
const nums = wrap(42);    // T inferred as number -> number[]
const strs = wrap('hi');  // T inferred as string -> string[]

여러 타입 매개변수

함수에는 여러 타입 매개변수가 있을 수 있습니다.
function pair<A, B>(a: A, b: B): [A, B] {
  return [a, b];
}
const p = pair(1, 'hello'); // [number, string]

제네릭 배열 함수

제네릭은 모든 요소 타입으로 동작하는 배열 유틸리티 함수에 필수적입니다.
function filterNull<T>(arr: (T | null)[]): T[] {
  return arr.filter((x): x is T => x !== null);
}

명시적 타입 인수

TypeScript가 타입을 추론할 수 없을 때 타입 인수를 명시적으로 제공할 수 있습니다.
function create<T>(): T | null { return null; }
const user = create<User>(); // T cannot be inferred — must be explicit

제네릭과 any 비교

`any`와 달리 제네릭은 함수 전체에서 타입 간의 관계를 유지합니다. 반환 타입은 입력 타입과 연결됩니다.
function echo<T>(val: T): T { return val; }
const n: number = echo(42);   // OK
// const s: string = echo(42); // Error — T is number

제네릭 화살표 함수

화살표 함수도 같은 문법을 사용하지만, .tsx 파일에서는 JSX 태그와 구분하기 위해 쉼표가 필요합니다.
const identity = <T>(val: T): T => val;
// In .tsx files:
const identity2 = <T,>(val: T): T => val;

다른 타입 반환하기

제네릭 함수는 타입 매개변수를 변환된 방식으로 사용할 수 있습니다.
function mapArray<T, U>(arr: T[], fn: (item: T) => U): U[] {
  return arr.map(fn);
}
const lengths = mapArray(['hello', 'world'], s => s.length);
// lengths: number[]

기본값이 있는 제네릭 매개변수

타입 매개변수에 기본 타입을 제공하여 선택 사항으로 만듭니다.
function createList<T = string>(): T[] { return []; }
const list = createList(); // T defaults to string

빠른 확인

`identity(42)`의 반환 타입은 무엇일까요?

복습

제네릭 함수는 타입 매개변수(T)를 사용하여 입력과 출력 사이의 타입 관계를 보존합니다. TypeScript는 타입 인수를 자동으로 추론합니다. 재사용 가능하고 타입 안전한 유틸리티를 작성하려면 any 대신 제네릭을 사용합니다.

자주 묻는 질문

“제네릭 함수: 형식 매개변수” 강의는 무료인가요?

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

“제네릭 함수: 형식 매개변수”에서 뭘 배우나요?

재사용성을 높이기 위해 함수에 형식 매개변수를 추가합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“제네릭 함수: 형식 매개변수” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. 제네릭 함수: 형식 매개변수
  2. 제네릭 인터페이스 및 형식 별칭
  3. extends를 사용한 제네릭 제약 조건
  4. 기본 형식 매개변수
← TypeScript Academy(으)로 돌아가기