제네릭 함수 사용하기

Coddy JavaScript 여정의 TypeScript 소개 섹션에 포함된 레슨. 73개 중 59번째.

제네릭 함수를 사용하는 방법은 두 가지입니다. 명시적 타입 인수를 사용하거나 TypeScript가 타입을 자동으로 추론하도록 할 수 있습니다.

명시적 타입 인수를 사용하여 제네릭 함수를 호출하는 방법은 다음과 같습니다.

const result1 = wrapInObject<string>("hello");
const result2 = wrapInObject<number>(42);

<string>과 <number>는 TypeScript에 T에 사용할 타입을 명시적으로 알려 줍니다. 이를 통해 타입 매개변수를 완전히 제어할 수 있습니다.

하지만 대부분의 경우 TypeScript는 전달하는 인수에서 타입을 추론할 수 있을 만큼 똑똑합니다:

const result1 = wrapInObject("hello");  // T inferred as string
const result2 = wrapInObject(42);       // T inferred as number

타입 추론을 사용하면 동일한 타입 안전성을 유지하면서 코드를 더 깔끔하고 읽기 쉽게 만들 수 있습니다. TypeScript는 인수를 분석하고 T가 무엇이어야 하는지 자동으로 결정하므로, 추론된 타입을 재정의하려는 경우가 아니라면 명시적인 타입 주석을 작성할 필요가 없습니다.

챌린지

쉬움

이전 챌린지에서 다음이 제공되었습니다:

타입 T의 항목을 받아 { value: T }를 반환하는 제네릭 함수 wrapInObject<T>

명시적 타입 인수와 타입 추론을 모두 사용하여 wrapInObject 함수를 호출하세요:

명시적 타입 인수 사용:

"TypeScript"를 사용하여 wrapInObject<string>을 호출해 변수 explicitString을 생성하세요.
25를 사용하여 wrapInObject<number>를 호출해 변수 explicitNumber를 생성하세요.
false를 사용하여 wrapInObject<boolean>을 호출해 변수 explicitBoolean을 생성하세요.

타입 추론 사용:

"Generics"를 사용하여 wrapInObject를 호출해 변수 inferredString을 생성하세요(TypeScript가 타입을 추론하도록 하세요).
99를 사용하여 wrapInObject를 호출해 변수 inferredNumber를 생성하세요(TypeScript가 타입을 추론하도록 하세요).
true를 사용하여 wrapInObject를 호출해 변수 inferredBoolean을 생성하세요(TypeScript가 타입을 추론하도록 하세요).

다음 출력을 출력하세요:

explicitString.value를 출력하세요.
explicitNumber.value를 출력하세요.
explicitBoolean.value를 출력하세요.
inferredString.value를 출력하세요.
inferredNumber.value를 출력하세요.
inferredBoolean.value를 출력하세요.

직접 해보기

// 이전 챌린지의 제네릭 함수
function wrapInObject<T>(item: T): { value: T } {
    return { value: item };
}

// TODO: 여기에 코드를 작성하세요
// 명시적 타입 인수를 사용하여 변수 생성
// 타입 추론을 사용하여 변수 생성

// 결과 출력