前端硬核面试专题：深入理解泛型编程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00179/article/details/148578051

前端硬核面试专题：深入理解泛型编程

frontend-hard-mode-interview 《前端内参》，有关于JavaScript、编程范式、设计模式、软件开发的艺术等大前端范畴内的知识分享，旨在帮助前端工程师们夯实技术基础以通过一线互联网企业技术面试。项目地址: https://gitcode.com/gh_mirrors/fr/frontend-hard-mode-interview

什么是泛型

泛型（Generics）是现代编程语言中一项重要的特性，它允许我们在定义类、接口或方法时使用类型参数，从而提供更强的类型安全性和代码复用能力。简单来说，泛型就是让类型也成为一种可以传递的参数。

为什么需要泛型

在没有泛型的年代，开发者经常需要进行类型强制转换，这带来了两个主要问题：

类型安全问题：错误的类型转换只能在运行时被发现，导致程序崩溃
代码冗余：需要为不同类型编写几乎相同的代码

以Java为例，看下面这个典型问题：

Map map = new HashMap();
map.put("key", "value");
String value = (String) map.get("key"); // 需要强制转换

这种强制转换不仅繁琐，而且在转换错误时会导致运行时异常。泛型的出现正是为了解决这些问题。

泛型的基本概念

泛型类

泛型类是在类定义时声明类型参数的类：

class Box<T> {
  private content: T;
  
  constructor(content: T) {
    this.content = content;
  }
  
  getContent(): T {
    return this.content;
  }
}

// 使用
const stringBox = new Box<string>("Hello");
const numberBox = new Box<number>(42);

泛型函数

泛型函数是在函数定义时声明类型参数的函数：

function identity<T>(arg: T): T {
  return arg;
}

// 使用
let output = identity<string>("myString");
let output2 = identity("myString"); // 类型推断

泛型接口

泛型接口是在接口定义时声明类型参数的接口：

interface GenericIdentityFn<T> {
  (arg: T): T;
}

function identity<T>(arg: T): T {
  return arg;
}

let myIdentity: GenericIdentityFn<number> = identity;

泛型约束

有时我们需要限制泛型的类型范围，这时可以使用泛型约束：

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

这个例子中，T必须包含length属性。

TypeScript中的泛型特性

TypeScript的泛型系统与Java类似但有一些语法差异：

类型推断：TypeScript能自动推断泛型类型
灵活的类型约束：可以约束泛型为特定接口或类
泛型默认类型：可以为泛型参数指定默认类型

interface DefaultGeneric<T = string> {
  value: T;
}

const obj: DefaultGeneric = { value: "hello" }; // T默认为string

泛型在前端开发中的应用

1. 通用工具函数

function reverse<T>(items: T[]): T[] {
  return items.reverse();
}

const numbers = [1, 2, 3];
const reversedNumbers = reverse(numbers); // number[]

const strings = ["a", "b", "c"];
const reversedStrings = reverse(strings); // string[]

2. 组件Props泛型

在Vue或React中，我们可以定义泛型组件：

// Vue 3示例
import { defineComponent } from 'vue';

interface Props<T> {
  items: T[];
  itemRenderer: (item: T) => string;
}

const GenericList = defineComponent({
  props: {
    items: {
      type: Array,
      required: true
    },
    itemRenderer: {
      type: Function,
      required: true
    }
  },
  setup(props: Props<unknown>) {
    return () => (
      <ul>
        {props.items.map(item => (
          <li>{props.itemRenderer(item)}</li>
        ))}
      </ul>
    );
  }
});

3. API响应类型

interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

async function fetchUser(): Promise<ApiResponse<User>> {
  const response = await fetch('/api/user');
  return response.json();
}