专栏首页云前端[译] TypeScript:一个好泛型的价值

[译] TypeScript:一个好泛型的价值

  • 原文地址:?TypeScript: The Value of a Good Generic
  • 原文作者:?Fernando Doglio
  • 译文出自:?掘金翻译计划
  • 本文永久链接:?https://github.com/xitu/gold-miner/blob/master/article/2020/typescript-the-value-of-a-good-generic.md
  • 译者:云前端
  • 校对者:?Alfxjx

在软件开发领域,我们总是致力于创建可复用的组件,架构被设计为可适应多种情境,并且我们始终在寻找一种即便在面临未知情况时,也能自动让逻辑正确行事的方法。

尽管在某些情境下可能并不总是易于做到甚或根本不可行,但我们心里总想找到能被复现并变为可被应付的通用算法的某些模式。所谓 泛型(Generics) 的概念就是该行为的另一个例子,只是,这次我们不诉诸宏大,而是在代码层面的细枝末节中试图找出并描绘上述的模式。

且听我细细道来……

何为泛型?

泛型是种一旦理解就乐在其中的概念,所以让我只是先从这样描述它开始吧:

泛型之于类型(Types),犹类型之于变量也

换言之,泛型为你提供了一种不用指定特别某种类型就能使用若干类型的方式。这给你的函数定义、类型定义,甚至接口定义赋予了更高一层的灵活性。

用于解释泛型威力的典型例子,莫过于 identity 函数。该函数本质上只是原样返回你传入的唯一参数,别无他用,但如果你思考一下,如何在一种强类型语言中定义这样一个函数呢?

function identity(value: number):number {
  return value;
}

上面的函数对于数字工作良好,那字符串呢?或布尔值?自定义类型又如何?在 TypeScript 中要覆盖所有可能性,明显只能选择 any 类型了:

function identity(value: any): any {
  return value
}

这还挺行得通的,但此刻你的函数实际上丢失了所有类型的概念,你将不能在本该有确定类型信息的地方使用它们了。本质上来说现在你可以传入任何值而编译器将一言不发,这和你使用普通的 JavaScript 就没有区别了(即无论怎样都没有类型信息了):

let myVar = identity("Fernando")

console.log(myVar.length) // 工作良好!

myVar = identity(23)

console.log(myVar.length) // 也能工作,尽管打印了 "undefined" 

现在因为没有类型信息了,编译器就不能检查和函数相关的任何事情以及变量了,如此一来我们运行出了一个意外的 “undefined”(若将本例推及有更多逻辑复杂逻辑的真实场景将很可能变成最糟糕的一段程序)。

我们该如何修复这点并避免使用 any 类型呢?

TypeScript 泛型来拯救

正如我曾 尝试 说的那样:一个泛型就像若干类型的一个变量,这意味着我们可以定义一个表示任何类型的变量,同时能保持住类型信息。后者是关键,因为那正是 any 做不到的。基于这种想法,现在可以这样重构我们的 identity 函数:

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

记住,用来表示泛型名字的可以是任意字母,你可以随意命名。但使用一个单字母呢,看起来是个标准了,所以我们也从善如流。

这不单让我们定义了一个可被任意类型使用的函数,现在相关的变量也将保留你所选择类型的正确信息。如下:

图片中两件事情值得注意:

  1. 我直接在函数名之后(在 < 和 > 之间)指定了类型。在本例中,由于函数签名足够简单,我们其实可以省略这部分来调用函数而编译器将会从所传参数推断出类型。然而,如果你把单词 number 改为 string 则整个例子将不再工作。
  2. 现在无法打印出 length 属性了,因为数字没有这个属性。

这正是你期待一个强类型语言该做的事情,并且这也是当定义 通用的 行为时为何你要使用泛型的原因。

我还能用泛型做些什么?

前面的例子常被称为泛型的 “Hello World”, 你能在任何一篇文章中找到它,但它是解释泛型潜能的一个绝佳途径。但还有些其他你能做到的有趣之事,当然了总是在类型安全领域的,别忘了,你要构建能在多种环境下复用的东西,同时还要努力保持住我们非常关心的类型信息。

自动结构检查

泛型中的这一点无疑是我最喜欢的了。考虑如下场景:你有一个固定的结构(即一个对象)并且你在试图动态地访问其中一个属性。我们之前已经像这样完成了这个功能:

function get(obj, prop) {
  if(!obj[prop]) return null;
  return obj[prop]
}

我并没有用到 hasOwnProperty 或其他类似的技术,但你能明白要点就好,你需要执行一个基础的结构检查以确保能控制所访问的属性不属于对象的情况。现在,让我们将其转换为类型安全的 TypeScript 并看看泛型能如何帮助我们:

type Person = {
    name: string,
    age: number,
    city: string
}

function getPersonProp<K extends keyof Person>(p:Person, key: K): any {
    return p[key]
}

现在,请注意我是如何使用泛型符号的:我不是仅声明了一个泛型 K,同时还说明了它 继承自 Person 中的键类型。 这太棒了!你可以声明式的界定你传入的值会匹配字符串 nameagecity。本质上你声明了一个枚举值,而当你这么想的时候,就没之前那么兴奋了吧。但你也不用止步于此,可以通过像这样重新定义该函数来重燃激情:

function get<T, K extends keyof T>(p: T, key: K): any {
    return p[key]
}

这就对了,我们现在有了两个泛型,后一个被声明为继承自前一个中的键,但本质上的好处是你现在不再受限于某一种具体类型(即 Person 类型的对象) 了,该函数可被你放心大胆地用于任何类型或结构了。

下面是当你用一个非法属性名使用它时将会发生的:

泛型类(Generic classes)

泛型不仅应用于函数签名,亦可用来定义你自己的泛型类。这提供了将通用逻辑封装进可复用构造中的能力,让一些有意思的行为变得可能。

下面是一个例子:

abstract class Animal {
    handle() { throw new Error("Not implemented") }
}

class Horse extends Animal{
    color: string
    handle() {
        console.log("Riding the horse...")
    }
}

class Dog extends Animal{
    name: string 
    handle() {
        console.log("Feeding the dog...")
    }
}

class Handler<T extends Animal> {
    animal: T

    constructor(animal: T) {
        this.animal = animal
    }

    handle() {
        this.animal.handle()
    }
}

class DogHandler extends Handler<Dog> {}
class HorseHandler extends Handler<Horse> {}

在本例中,我们定义了一个可以处理任意动物类型的处理类,虽说不用泛型也能做到,但使用泛型的益处在最后两行显而易见。这是因为借助泛型,处理类逻辑完全被封装进了一个泛型类中,从而我们可以约束类型并创建指定类型的类,这样的类只对动物类型生效。你也可以在此添加额外的行为,而类型信息也得以保留。

来自这个例子的另一个收获是,泛型可被约束为仅继承自指定的一组类型。正如你所见,T 只能是 DogHorse 而非其他。

可变参数元组(Variadic Tuples)

实际上这是 TypeScript 4.0 中的新特性。并且尽管我 ?已经在这篇文章中介绍了它,此处仍会快速回顾一下。

概况来说,可变参数元组带来的,是用泛型定义某元组中一个可变的部分,默认情况下这部分什么都没有。

一个普通的元组定义将产生一个固定尺寸的数组,其所有元素都是预定义好的类型:

type MyTuple = [string, string, number]

let myList:MyTuple = ["Fernando", "Doglio", 37]

现在,归功于泛型和可变参数元组,你可以这样做:

type MyTuple<T extends unknown[]> = [string, string, ...T, number]

let myList:MyTuple<[boolean, number]> = ["Fernando", "Doglio", true, 3, 37]
let myList:MyTuple<[number, number, number]> = ["Fernando", "Doglio", 1,2,3,4]

如果你注意看,我们使用了一个泛型 T(继承自一个 unknown 数组)用以将一个可变部分置于元组中。因为 Tunknown 类型的一个列表,你可以在里面装任何东西。比分说,你可以将其定义为单一类型的一个列表,就像这样:

type anotherTuple<T extends number[]> = [boolean, ...T, boolean];

let oneNumber: anotherTuple<[number]> = [true, 1, true];
let twoNumbers: anotherTuple<[number, number]> = [true, 1, 2, true]
let manyNumbers: anotherTuple<[number, number, number, number]> = [true, 1, 2, 3, 4, true]

天高任鸟飞,本质上你可以定义出一种模板元组的形式,以供稍后随意(当然要按照你设置的模板)使用。

总结

泛型是一种非常强大的工具,虽然有时阅读由其编写的代码宛如天书,但熟能生巧。慢慢品味,用心阅读,你将看到其内在的潜能。

那你呢?使用过泛型吗?我说明白它的主要用法了吗?在评论中和大家分享你的想法吧!

--End--

本文分享自微信公众号 - 云前端(fewelife),作者:云前端

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-10-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 初识TypeScript -基础一 (持续更新)

    憧憬博客
  • 作为前端leader,为何我在公司力推ts?

    有粉丝在后台给我私信:土哥,现在还有必要学typescript吗?在小城市,怕学了用不到。。。

    闰土大叔
  • TypeScript 3.4 正式发布!

    TypeScript 3.4 带来了一些重要的更新和有趣的新功能,其中包括名为 --incremental 的新标志,高阶类型推断等等。 我们来看一下。

    疯狂的技术宅
  • 十分钟教你理解TypeScript中的泛型

    本文介绍TypeScript中泛型(Generics)的概念和用法,它为什么重要,及其使用场景。我们会以一些清晰的例子,介绍其语法,类型和如何构建参数。你可以在...

    葡萄城控件
  • 约束即类型、TypeScript 编程内参(一)

    本文是《约束即类型、TypeScript 编程内参》系列第一篇:约束即类型,主要记述 TypeScript 的基本使用和语法。

    腾讯IVWEB团队
  • 类型即正义,TypeScript 从入门到实践(四):5000字长文带你重新认识泛型

    在之前的文章中,我们了解了 TypeScript 主要分为 JS 语言侧和类型侧两个部分。

    一只图雀
  • 了不起的 TypeScript 入门教程

    想学习 TypeScript 的小伙伴看过来,本文将带你一步步学习 TypeScript 入门相关的十四个知识点,详细的内容大纲请看下图:

    阿宝哥
  • TypeScript 初学者入门学习笔记(一)

    TypeScript 的类型系统,在很大程度上弥补了 JavaScript 的缺点。

    前端达人
  • 【译】不是 TypeScript 的 TypeScript -- JSDoc 的超能力

    我们可以把 TypeScript 看做为 JavaScript 添加了类型注释的薄层,而类型注释可以确保不会犯任何错误。TypeScript 团队也在努力确保类...

    腾讯IVWEB团队
  • 【译】2019年开始使用Typescript

    基于2018年Stack Overflow Developer的调研,TypeScript作为编程语言比JavaScript更受“喜爱”。TypeScript在...

    嘉明
  • 【TypeScript 演化史 — 第十一章】泛型参数默认类型 和 新的 –strict 编译选项

    TypeScript 2.3 增加了对声明泛型参数默认类型的支持,允许为泛型类型中的类型参数指定默认类型。

    Javanx
  • [译] 使用 TypeScript 开发 React Hooks

    原文:https://www.toptal.com/react/react-hooks-typescript-example

    江米小枣
  • TypeScript 简介及编码规范

    TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象...

    阿宝哥
  • 阿里大佬漫谈 Typescript 研发体系建设~

    TypeScript 自问世以来,由于其灵活的设计和强大的 IDE —— vscode 的支持,变得越来越普及。以下附 Github Javascript 与 ...

    苏南
  • TypeScript

    接口(interface)可以用于对【对象的形状(Shape)】进行描述,当然也可以使用interface 描述 class

    九旬
  • TypeScript 学习笔记(一)

    TypeScript 是 JavaScript 的一个超集,主要提供了 类型系统 和对 ES6 的支持,由 Microsoft 开发。 目前应用:vue3.0,...

    前端老鸟
  • 编写高质量可维护的代码:Awesome TypeScript

    ? 这是第 84 篇不掺水的原创,想要了解更多,请戳上方蓝色字体:政采云前端团队 关注我们吧~

    政采云前端团队
  • 1.8W字|了不起的 TypeScript 入门教程(第二版)

    阿宝哥第一次使用 TypeScript 是在 Angular 2.x 项目中,那时候 TypeScript 还没有进入大众的视野。然而现在学习 TypeScri...

    阿宝哥
  • 初探 TypeScript函数基本类型泛型接口类内置对象

    前段时间有朋友和我推荐 TypeScript ,他说写起来特别爽,让我去试一试,那时候我还在那是啥高深莫测的东西。刚好那段时间忙,一直没有时间看。最近也很忙,还...

    sunseekers

扫码关注云+社区

领取腾讯云代金券