Menu
CoddyTech

泛型数组

本课属于 Coddy JavaScript 学习旅程的“TypeScript 入门”单元。第 60 课,共 73 课。

数组和泛型在 TypeScript 中配合得非常好。之前学习带类型的数组时,你使用了 T[] 语法来指定数组只能包含特定类型的元素。泛型也能让你表达相同的概念。

TypeScript 还提供了使用 Array<T> 格式表示带类型数组的另一种语法:

// These two declarations are equivalent:
let numbers1: number[] = [1, 2, 3];
let numbers2: Array<number> = [1, 2, 3];

在处理对数组进行操作的泛型函数时,Array<T> 语法特别有用。它能更明确地体现代码的泛型特性,让代码更易读,尤其是在创建可以处理任意类型数组,同时保证类型安全的函数时。

challenge icon

挑战

简单

创建一个名为 getFirstElement 的泛型函数,它接受任意类型的数组,并返回第一个元素;如果数组为空,则返回 undefined。

这个函数应该:

  • 使用泛型类型参数 T
  • 接受一个名为 arr、类型为 Array<T> 的参数
  • 返回类型为 T 的第一个元素,或 undefined
  • 显式标注返回类型 T | undefined

使用 Array<T> 语法创建以下数组:

  • 创建类型为 Array<string> 的 stringArray,包含 ["apple", "banana", "cherry"]
  • 创建类型为 Array<number> 的 numberArray,包含 [10, 20, 30, 40]
  • 创建类型为 Array<boolean> 的 booleanArray,包含 [true, false, true]
  • 创建一个为空的 Array<string> 类型数组 emptyStringArray

测试你的函数并打印以下输出:

  • 打印使用 stringArray 调用 getFirstElement 的结果
  • 打印使用 numberArray 调用 getFirstElement 的结果
  • 打印使用 booleanArray 调用 getFirstElement 的结果
  • 打印使用 emptyStringArray 调用 getFirstElement 的结果
  • 打印使用包含 ["single"] 的新 Array<string> 调用 getFirstElement 的结果

亲手试试

// TODO: 在这里编写你的代码
// 创建泛型函数 getFirstElement

// 使用 Array<T> 语法创建所需的数组

// 测试函数并打印结果
quiz icon自我测试

这节课包含一个小测验。开始学习即可作答,并记录你的进度。

TypeScript 入门中的所有课

自己练习: TypeScript 在线编辑器