제네릭 배열
Coddy JavaScript 여정의 TypeScript 소개 섹션에 포함된 레슨. 73개 중 60번째.
Arrays와 제네릭은 TypeScript에서 아름답게 함께 작동합니다. 앞에서 타입이 지정된 배열에 대해 배울 때, 배열이 특정 타입의 요소만 포함할 수 있도록 지정하기 위해 T[] 구문을 사용했습니다. 제네릭은 이와 동일한 개념을 표현하는 또 다른 방법을 제공합니다.
TypeScript는 Array<T> 형식을 사용하여 타입이 지정된 배열을 작성하는 대체 구문을 제공합니다:
// 이 두 선언은 동일합니다:
let numbers1: number[] = [1, 2, 3];
let numbers2: Array<number> = [1, 2, 3];Array<T> syntax는 arrays에서 작동하는 generic function을 사용할 때 특히 유용합니다. 이는 코드의 generic 특성을 더 명확하고 읽기 쉽게 만들어 줍니다. 특히 type safety를 유지하면서 모든 유형의 arrays에서 작동할 수 있는 function을 만들 때 유용합니다.
챌린지
쉬움모든 타입의 배열을 받아 첫 번째 요소를 반환하고 배열이 비어 있으면 undefined를 반환하는 getFirstElement라는 generic function을 만드세요.
function은 다음을 수행해야 합니다:
- generic type parameter
T를 사용합니다 Array<T>타입의arr라는 매개변수 하나를 받습니다T타입의 첫 번째 요소 또는undefined를 반환합니다T | undefined의 명시적 return type annotation을 사용합니다
Array<T> syntax를 using하여 다음 arrays를 만드세요:
stringArray타입의Array<string>이며["apple", "banana", "cherry"]를 포함합니다numberArray타입의Array<number>이며[10, 20, 30, 40]을 포함합니다booleanArray타입의Array<boolean>이며[true, false, true]를 포함합니다emptyStringArray타입의Array<string>이며 비어 있습니다
function을 Test하고 다음 출력을 print하세요:
stringArray를 사용하여getFirstElement를 호출한 결과를 print합니다numberArray를 사용하여getFirstElement를 호출한 결과를 print합니다booleanArray를 사용하여getFirstElement를 호출한 결과를 print합니다emptyStringArray를 사용하여getFirstElement를 호출한 결과를 print합니다["single"]을 포함하는 새로운Array<string>을 사용하여getFirstElement를 호출한 결과를 print합니다
직접 해보기
// TODO: 여기에 코드를 작성하세요
// 제네릭 함수 getFirstElement를 생성하세요
// Array<T> 구문을 사용하여 필요한 배열을 생성하세요
// 함수를 테스트하고 결과를 출력하세요
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
TypeScript 소개의 모든 레슨
직접 연습해 보세요: 온라인 JavaScript 컴파일러