제네릭 인터페이스

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

generic 함수를 만들 수 있는 것처럼 generic 인터페이스도 만들 수 있습니다. 이를 통해 특정 속성 유형을 유연하고 재사용 가능하게 유지하면서 객체의 형태를 정의할 수 있습니다.

동일한 타입 매개변수 구문을 사용하여 generic interface를 만드는 방법은 다음과 같습니다:

interface Container {
  value: T;
  isEmpty: boolean;
}

인터페이스 이름 뒤의 <T>는 인터페이스 정의 전체에서 사용할 수 있는 타입 매개변수를 생성합니다. 이 예제에서 value 속성은 인터페이스를 사용할 때 지정하는 유형을 갖게 되지만, isEmpty는 고정된 boolean 유형으로 유지됩니다.

generic interface를 사용할 때는 꺾쇠괄호 안에 구체적인 타입을 지정합니다:

const stringContainer: Container = {
  value: "hello",
  isEmpty: false
};

const numberContainer: Container = {
  value: 42,
  isEmpty: false
};

챌린지

쉬움

모든 타입의 데이터를 성공 정보와 함께 저장할 수 있는 Result라는 이름의 제네릭 인터페이스를 만드세요.

인터페이스에는 다음 두 속성이 있어야 합니다:

제네릭 인터페이스를 사용하여 다음 객체를 만드세요:

타입이 Result<string>이고 success: true 및 data: "Operation completed"인 stringResult
타입이 Result<number>이고 success: true 및 data: 42인 numberResult
타입이 Result<boolean>이고 success: false 및 data: false인 booleanResult
타입이 Result<string[]>이고 success: true 및 data: ["item1", "item2", "item3"]인 arrayResult

다음과 같은 processResult라는 이름의 제네릭 함수를 만드세요:

다음 출력을 출력하세요:

REQUIRED OUTPUT FORMAT: [Your translated content here]

직접 해보기

// TODO: 여기에 코드를 작성하세요

// 제네릭 Result 인터페이스를 생성하세요


// Result 인터페이스를 사용하여 객체를 생성하세요


// 제네릭 processResult 함수를 생성하세요


// 필요한 출력을 출력하세요

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

TypeScript 소개의 모든 레슨

1TS 시작하기

4함수 활용하기

7프로젝트: 간단한 할 일 목록

10프로젝트: 재고 관리