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