vue3入门29 - typeScript 泛型变量和类型

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

前言

上一节我们学习了泛型的基础使用，这一节，我们说一下使用泛型需要注意的一些问题。

泛型变量

• 我们在使用泛型创建函数时，函数体内的逻辑要遵循定义的类型参数是任意类型，或者是所有类型来使用

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

• 以我们之前写的例子为例，如果我们想打印arg的长度，可能会这样写

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

• 由于我们并不知道arg的具体类型，他可能是字符串、数字、数组等等，所以我们不能直接调用.length属性

• 如果你知道你要操作的T是一个数组，我们就可以像下面这样来定义

function loggingIdentity<T>(arg: T[]): T[] {
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}

• 我们可以把T当做是类型的一部分，就可以灵活定义我们的参数了。

泛型类型

• 有的时候我们会使用变量来创建函数

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

let myIdentity: <T>(arg: T) => T = identity;

// 组合起来是下面这个样子
let myIdentity: <T>(arg: T) => T = <T>(arg: T): T => {
    return arg;
};

• 这样定义泛型类型，又臭又长，我们有没有什么办法可以优化下？这个当然是有的

对象字面量定义泛型函数

• 我们可以使用带有调用签名的对象字面量来定义泛型函数

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

let myIdentity: {<T>(arg: T): T} = identity;

let myIdentity: { <T>(arg: T): T } = <T>(arg: T): T => {
  return arg;
};

泛型接口定义泛型函数

• 我们也可以使用接口定义泛型，提高重用性

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

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

let myIdentity: GenericIdentityFn = identity;

let myIdentity: GenericIdentityFn = <T>(arg: T): T => {
  return arg;
};

• 使用接口定义泛型，我们就能清楚地知道使用哪个具体的泛型类型了
• 我们可以很清楚的看到我们的函数的类型，并且可以获得很好地类型提示

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

let myIdentity: GenericIdentityFn<number> = (arg) => {
  return arg
};

总结

• 通过这一节，我们了解到使用泛型需要注意的一些问题：泛型变量使用、泛型类型定义。