MST

星途 面试题库

面试题:TypeScript泛型的深入应用

编写一个通用的TypeScript函数,该函数接受一个数组和一个回调函数作为参数,回调函数接受数组元素类型作为参数并返回一个布尔值。通用函数需要返回数组中所有满足回调函数条件的元素组成的新数组。要求使用泛型来实现,并且要考虑到不同类型数组的兼容性,同时解释你使用泛型的设计思路和优势。
23.4万 热度难度
前端开发TypeScript

知识考点

AI 面试

面试题答案

一键面试
function filterArray<T>(arr: T[], callback: (element: T) => boolean): T[] {
    let result: T[] = [];
    for (let i = 0; i < arr.length; i++) {
        if (callback(arr[i])) {
            result.push(arr[i]);
        }
    }
    return result;
}

泛型设计思路

  1. 类型参数定义:在函数定义中,使用 <T> 来定义一个类型参数 T。这个 T 代表数组中元素的类型,它可以是任意类型,在调用函数时具体确定。
  2. 函数参数类型:第一个参数 arr 的类型定义为 T[],表示这是一个元素类型为 T 的数组。第二个参数 callback 的参数类型也为 T,返回值为 boolean,确保回调函数可以处理 T 类型的元素并返回布尔值,用于判断元素是否满足条件。
  3. 返回值类型:返回值类型定义为 T[],意味着返回的新数组元素类型与传入数组的元素类型一致。

泛型优势

  1. 代码复用性:通过使用泛型,这个 filterArray 函数可以用于不同类型的数组,而不需要为每种数组类型编写单独的过滤函数。例如,可以用于 number[]string[]object[] 等。
  2. 类型安全性:在编译阶段,TypeScript 可以根据传入的实际类型参数,对函数内部的操作进行类型检查。如果回调函数的参数类型与数组元素类型不匹配,或者返回值不是 boolean 类型,编译器会报错,提高了代码的可靠性。
  3. 灵活性:泛型允许函数在保持类型安全的前提下,适应各种不同类型的数据操作,使得代码更加灵活和通用。