제네릭 인터페이스
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타입의successT타입(제네릭 타입 매개변수)의data
제네릭 인터페이스를 사용하여 다음 객체들을 생성하세요:
success: true및data: "Operation completed"를 갖는Result<string>타입의stringResultsuccess: true및data: 42를 갖는Result<number>타입의numberResultsuccess: false및data: false를 갖는Result<boolean>타입의booleanResultsuccess: 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를 출력하세요.
직접 해보기
// TODO: 여기에 코드를 작성하세요
// 제네릭 Result 인터페이스를 생성합니다
// Result 인터페이스를 사용하여 객체를 생성합니다
// 제네릭 processResult 함수를 생성합니다
// 필요한 출력을 출력합니다
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
