在软件工程中，构建明确和一致的 API 且具有可复用性是非常重要的。通过传入不同的函数参数，函数可以帮助我们完成不同的操作。但是，是否可以将参数的类型也进行参数化呢？答案是肯定的。将参数的类型进行参数化，这就是通常所说的类型参数化，也称为泛型（Generic）。本文将详细介绍泛型的定义、使用方式以及在函数、接口、类中的应用。

一、认识泛型

1，什么是泛型

function foo(arg: number): number {
  return arg
}

// 使用类型变量 Type
function foo<Type>(arg: Type): Type {
  return arg
}

// 调用方式一：向类型变量 Type 传递具体的类型
foo<number>(20)        // Type 为 number 类型
foo<string>('abc')     // Type 为 string 类型

// 调用方式二：TypeScript 会自动推导出 Type 具体的类型
foo(50)               // 自动推导为 number
foo('abc')            // 自动推导为 string

2，多个类型变量

function foo<T, E>(a1: T, a2: E) {
  console.log(a1, a2)
}

foo<number, string>(20, 'abc')

3，泛型命名规范

// 使用语义化命名
interface ApiResponse<TData> {
  code: number
  message: string
  data: TData
}

// 或
function getProperty<TObject, TKey extends keyof TObject>(obj: TObject, key: TKey) {
  return obj[key]
}

4，何时使用泛型

// 泛型误用示例：泛型仅用于单个参数的位置
function foo<T>(arg: T): void {
  console.log(arg)
}

// 更好的写法：直接使用具体类型
function foo(arg: unknown): void {
  console.log(arg)
}

5，范型与 any 的区别

// 使用 any：丢失类型信息
function identityAny(arg: any): any {
  return arg
}

const result1 = identityAny(123)  // result1 的类型是 any

// 使用泛型：保留类型信息
function identityGeneric<T>(arg: T): T {
  return arg
}

const result2 = identityGeneric(123)  // result2 的类型是 number

二、泛型接口、泛型类

1，接口中使用泛型

// 1. 定义接口，在接口中定义 T1 和 T2 两个类型变量，并且都有默认值
interface IPerson<T1 = string, T2 = number> {
  name: T1    // name 的类型是 T1，需要调用者决定
  age: T2     // age 的类型是 T2，需要调用者决定
}

// 2. 将 p1 和 p2 指定为 IPerson 类型
const p1: IPerson = {
  name: "hangge",
  age: 18
}

const p2: IPerson<string, number> = {
  name: "hangge",
  age: 18
}

2，类中使用泛型

// 1. 在 Point 类上定义 T 类型变量
class Point<T> {
  x: T
  y: T
  z: T

  constructor(x: T, y: T, z: T) {
    this.x = x
    this.y = y
    this.z = z
  }
}

// 2. TypeScript 会自动推导 T 类型变量的具体类型
const p1 = new Point("1.33.2", "2.22.3", "4.22.1")

// 3. 向 Point 类的 T 类型变量传递具体的 string 类型
const p2 = new Point<string>("1.33.2", "2.22.3", "4.22.1")

const p3: Point<string> = new Point("1.33.2", "2.22.3", "4.22.1")

四、泛型约束

1，为什么需要泛型约束

function getLength<T>(arg: T): number {
  return arg.length  // 报错：Property 'length' does not exist on type 'T'
}

2，使用 extends 进行约束

// 1. 接口定义约束条件
interface ILength {
  length: number
}

// 2. 在 getLength 函数中定义 T 类型变量，并添加类型的约束
// T 类型必须包含 ILength 接口中定义的 length 属性
function getLength<T extends ILength>(arg: T): number {
  return arg.length
}

// 3. 泛型约束的使用
getLength("abc")                          // 自动推导为 string(string 有 length 属性）
getLength<string[]>(["abc", "cba"])       // 传入 string[] 类型(有 length 属性）
getLength<{ length: number }>({ length: 100 })  // 传入对象类型(有 length 属性）

// getLength<number>(1000)  // 报错：Type 'number' does not satisfy the constraint 'ILength'

3，类型参数之间的约束

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key]
}

let x = { a: 1, b: 2, c: 3, d: 4 }

getProperty(x, "a")  // ok
getProperty(x, "m")  // 报错：Argument of type '"m"' is not assignable to parameter of type '"a" | "b" | "c" | "d"'

附：泛型工具类型

1，常用工具类型介绍

interface IUser {
  id: number
  name: string
  age: number
}

// Partial 将所有属性变为可选
type PartialUser = Partial<IUser>
// 等价于：
// type PartialUser = {
//   id?: number
//   name?: string
//   age?: number
// }

const user: PartialUser = { name: "hangge" }  // ok

interface IConfig {
  id?: number
  name?: string
}

// Required 将所有属性变为必选
type RequiredConfig = Required<IConfig>
// 等价于：
// type RequiredConfig = {
//   id: number
//   name: string
// }

interface IPoint {
  x: number
  y: number
}

// Readonly 将所有属性变为只读
type ReadonlyPoint = Readonly<IPoint>

const point: ReadonlyPoint = { x: 1, y: 2 }
// point.x = 10  // 报错：Cannot assign to 'x' because it is a read-only property

2，Pick 和 Omit

interface IUser {
  id: number
  name: string
  email: string
  password: string
}

// Pick 只保留指定的属性
type BasicUser = Pick<IUser, "id" | "name">
// 等价于：
// type BasicUser = {
//   id: number
//   name: string
// }

const user: BasicUser = { id: 1, name: "hangge" }

interface IUser {
  id: number
  name: string
  email: string
  password: string
}

// Omit 排除指定的属性
type SafeUser = Omit<IUser, "password">
// 等价于：
// type SafeUser = {
//   id: number
//   name: string
//   email: string
// }

const user: SafeUser = { id: 1, name: "hangge", email: "hangge@hangge.com" }

3，Record 类型

// Record 构造对象类型
type RoleMap = Record<string, string[]>
// 等价于：
// type RoleMap = {
//   [key: string]: string[]
// }

const roles: RoleMap = {
  admin: ["read", "write", "delete"],
  user: ["read", "write"]
}