Error: T doesn‘t have .length

Error: T doesn‘t have .length

在 TypeScript 中，当我们使用泛型 <T> 时，有时会遇到一个常见问题：编译器提示错误，指出泛型类型 T 不具备 .length 属性。在本文中，我们将探讨这个问题的解决方案，并介绍如何通过泛型约束或使用交叉类型和接口来确保我们可以安全地使用 .length 属性。

问题背景

// error
function collectionProps<T>(arg: T): T {
    console.log(arg.length);  // Error: T doesn't have .length    
    return arg;
}

在上面的代码中，我们尝试访问泛型类型 T 的 .length 属性，但 TypeScript 编译器提示错误，因为并不是所有类型都具备 .length 属性。

解决方案

1: 使用数组类型

// success 1
function collectionProps<T>(arg: T[]): T[] { 
    console.log(arg.length);
    return arg;
}

通过将参数类型限制为数组类型 T[]，我们告诉编译器我们期望传入的参数具备数组的特性，包括 .length 属性。这种方法是直观且常用的解决方案。

2: 使用泛型约束

// 使用泛型约束
interface Lengthable {
    length: number;
}

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

通过使用泛型约束，我们创建了一个接口 Lengthable，表示具备 .length 属性的类型。然后，在函数中，我们使用 extends 关键字将泛型 T 约束为 Lengthable 接口。这确保了我们可以安全地使用 .length 属性。

3: 使用接口

// 使用接口
interface HasLength {
    length: number;
}

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

类似于第二种解决方案，我们也可以使用接口来定义具有 .length 属性的类型。通过将泛型 T 约束为 HasLength 接口，我们达到了相同的效果。