제네릭 인터페이스

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

제네릭 함수를 만들 수 있는 것과 마찬가지로, 제네릭 인터페이스도 만들 수 있습니다. 이를 통해 특정 속성 타입을 유연하고 재사용 가능하게 유지하면서 객체의 형태를 정의할 수 있습니다.

동일한 타입 매개변수 구문을 사용하여 제네릭 인터페이스를 생성하는 방법은 다음과 같습니다:

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

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

제네릭 인터페이스를 사용할 때는 꺾쇠괄호 안에 구체적인 타입을 지정합니다:

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

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

실력 점검

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

실력 점검

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

실력 점검

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

챌린지

쉬움

성공 정보와 함께 모든 유형의 데이터를 보유할 수 있는 Result라는 이름의 제네릭 인터페이스를 생성하세요.

인터페이스는 다음 두 가지 속성을 가져야 합니다:

boolean 타입의 success
T 타입(제네릭 타입 매개변수)의 data

제네릭 인터페이스를 사용하여 다음 객체들을 생성하세요:

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

다음과 같은 기능을 수행하는 processResult라는 이름의 제네릭 함수를 생성하세요:

제네릭 타입 매개변수 T를 사용합니다.
Result<T> 타입의 result 매개변수 하나를 받습니다.
문자열 메시지를 반환합니다.
success가 true이면, "Success: [data]"를 반환합니다.
success가 false이면, "Failed: [data]"를 반환합니다.

다음 출력값들을 출력하세요:

stringResult를 사용하여 processResult를 호출한 결과를 출력하세요.
numberResult를 사용하여 processResult를 호출한 결과를 출력하세요.
booleanResult를 사용하여 processResult를 호출한 결과를 출력하세요.
arrayResult를 사용하여 processResult를 호출한 결과를 출력하세요.
stringResult.data를 출력하세요.

치트 시트

제네릭 인터페이스를 사용하면 특정 속성 타입을 유연하고 재사용 가능하게 유지하면서 객체의 형태를 정의할 수 있습니다.

타입 매개변수 구문을 사용하여 제네릭 인터페이스를 생성합니다:

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

인터페이스 이름 뒤의 <T>는 인터페이스 정의 전체에서 사용할 수 있는 타입 매개변수를 생성합니다.

꺾쇠괄호 안에 구체적인 타입을 지정하여 제네릭 인터페이스를 사용합니다:

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

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

직접 해보기

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

// 제네릭 Result 인터페이스를 생성합니다


// Result 인터페이스를 사용하여 객체를 생성합니다


// 제네릭 processResult 함수를 생성합니다


// 필요한 출력을 출력합니다

실력 점검

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

TypeScript 소개의 모든 레슨

1TS 시작하기

TypeScript란 무엇인가요?왜 TypeScript를 사용해야 할까요?첫 번째 TypeScript 코드 작성하기 컴파일 과정 및 에러 요약: TS 입문

4함수 활용하기

매개변수 및 반환값 타입 지정 화살표 함수 타입 지정 'void' 반환 타입 '?'를 사용한 선택적 매개변수 기본 매개변수 값 나머지 매개변수 타입 지정 함수 타입 정의하기 요약: 타입이 지정된 함수 작성하기

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

프로젝트: Task 구조체 정의하기 할 일 추가 함수

10프로젝트: 재고 관리

프로젝트: 제네릭 재고 아이템 함수: 재고에 아이템 추가하기

ID로 아이템을 찾는 함수

특정 재고 유형 생성하기

아이템 상세 정보를 가져오는 함수