제네릭 인터페이스

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

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

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

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

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

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

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

챌린지

쉬움

모든 유형의 데이터와 성공 정보를 담을 수 있는 Result라는 이름의 제네릭 인터페이스를 만드세요.

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

유형이 boolean인 success
유형이 T인 data(제네릭 유형 매개변수)

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

유형이 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를 만드세요.

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

다음 출력을 출력하세요.

stringResult를 사용하여 processResult를 호출한 결과를 출력합니다.
numberResult를 사용하여 processResult를 호출한 결과를 출력합니다.
booleanResult를 사용하여 processResult를 호출한 결과를 출력합니다.
arrayResult를 사용하여 processResult를 호출한 결과를 출력합니다.
stringResult.data를 출력합니다.

필수 출력 형식: [번역된 콘텐츠]

직접 해보기

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

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


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


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


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

실력 점검

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

TypeScript 소개의 모든 레슨

1TS 시작하기

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

4함수 활용하기

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

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

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

10프로젝트: 재고 관리

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

ID로 아이템을 찾는 함수

특정 재고 유형 생성하기

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

직접 연습해 보세요: TypeScript 플레이그라운드