代码编织梦想

在 TypeScript 中,你可能遇见过以下这样“看起来不太对,但竟然能正常运行”的代码:

class Cat {
  eat() { }
}

class Dog {
  eat() { }
}

function feedCat(cat: Cat) { }

feedCat(new Dog())

这是因为,TypeScript 比较两个类型并非通过类型的名称,而是比较这两个类型上实际拥有的属性与方法。也就是说,这里实际上是比较 Cat 类型上的属性是否都存在于 Dog 类型上,在比较对象类型的属性时,同样会采用结构化类型系统进行判断。

TypeScript 的结构化类型系统是基于类型结构进行比较的,而标称类型系统是基于类型名来进行比较的。在 TypeScript 中,通过为类型附加信息的方式,从类型层面或者逻辑层面出发去模拟标称类型系统。

🍟 类型运算

条件类型基础 extends

type LiteralType<T> = T extends string ? "string" : "other";

type Res1 = LiteralType<"linbudu">; // "string"
type Res2 = LiteralType<599>; // "other"

条件类型还可以用来对更复杂的类型进行比较,比如函数类型:

type Func = (...args: any[]) => any;

// T extends Func 泛型约束要求你传入符合结构的类型参数,相当于参数校验
// 条件类型使用类型参数进行条件判断(就像 if else),相当于**实际内部逻辑**
type FunctionConditionType<T extends Func> = T extends (...args: any[]) => string
  ? 'A string return func!'
  : 'A non-string return func!';

//  "A string return func!"
type StringResult = FunctionConditionType<() => string>;
// 'A non-string return func!';
type NonStringResult1 = FunctionConditionType<() => boolean>;
// 'A non-string return func!';
type NonStringResult2 = FunctionConditionType<() => number>;

提取传入的类型信息 infer

TypeScript 中支持通过 infer 关键字来在条件类型中提取类型的某一部分信息,比如上面我们要提取函数返回值类型的话,可以这么放:

type FunctionReturnType<T extends Func> = T extends (
  ...args: any[]
) => infer R
  ? R
  : never;

当传入的类型参数满足 T extends (...args: any[] ) => infer R 这样一个结构(不用管 infer R,当它是 any 就行),返回 infer R 位置的值,即 R。否则,返回 never。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jexxx/article/details/128842379

前端架构师亲述:前端工程师成长之路的 n 问 及 回答_chentang6196的博客-爱代码爱编程

问题回答者:黄轶,目前就职于 Zoom 公司担任前端架构师,曾就职于滴滴和百度。 1. 前端开发 问题 大佬,能分享下学习路径么,感觉天天忙着开发业务,但是能力好像没有太大提升,不知道该怎么充实自己 ? 解答 业务开发有没有痛点,能不能通过技术的手段解决 ?平时开发业务用到了哪些技术栈和周边的生态链,我是否对他

TypeScript超详细入门教程(上)-爱代码爱编程

TypeScript超详细入门教程(上)   01 开篇词:Hello~TypeScript 01 开篇词:Hello~TypeScript 更新时间:2019-10-30 13:49:46   既然我已经踏上这条道路,那么,任何东西都不应妨碍我沿着这条路走下去。——康德   同学你好,我是Lison。很高兴你对TypeScript感兴

七厂面经--应届小前端的破局之路-爱代码爱编程

自我介绍 双非二本,软件工程,自学前端,今年毕业。 喜欢编程,古风,日语和英语。 常以冷月心之名混迹前端江湖,也曾在混迹网文圈时用冷月心做笔名签约掌阅,作品《清起风云》,百度可查。 求职期间写了一个小博客,感兴趣的可以看看 https://lengyuexin.github.io/gatsby 为什么离职 这个问题,几乎我参加的每一场面试

写给初中级前端的高级进阶指南(万字路线)-爱代码爱编程

前言 我曾经一度很迷茫,在学了 Vue、React 的实战开发和应用以后,好像遇到了一些瓶颈,不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题,这篇文章,笔者结合自己的一些成长经历整理出一些路线,帮助各位初中级前端工程师少走一些弯路。 本篇文章面对的人群是开发经验1到3年的初中级前端工程师。 JavaScript 原生 js

写给初中级前端的高级进阶指南-爱代码爱编程

大家好,我是若川。最近组织了源码共读活动。每周读 200 行左右的源码。很多第一次读源码的小伙伴都感觉很有收获,感兴趣可以加我微信ruochuan12,拉你进群学习。 前言 我曾经一度很迷茫,在学了 Vue、React 的实战开发和应用以后,好像遇到了一些瓶颈,不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题,

【TS】快速上手(一)初遇:Hello,TypeScript-爱代码爱编程

文章目录 一、学习TypeScript的意义1. 强类型 VS 弱类型2. 静态语言 VS 动态语言二、TypeScript特性三、搭建TypeScript环境 嗨!~ 大家好,我是YK菌 🐷 ,一个微系前端 ✨,爱思考,爱总结,爱记录,爱分享 🏹,欢迎关注我呀 😘 ~ [微信公众号:ykyk2012] 今天开始学习Typ

2022届秋招,从被拒到SP+ | 谈谈YK菌在2021年的经历与收获-爱代码爱编程

嗨!~ 大家好,我是YK菌 🐷 ,一个微系前端 ✨,爱思考,爱总结,爱记录,爱分享 🏹,欢迎关注我呀 😘 ~ [微信公众号:ykyk2012] YK菌的秋招之路走的不是特别顺利,从简历挂、笔试挂、一面挂、二面挂,我经历了很多很多次的失败;但好在我坚持下来了,最后终于收获了一些企业的 offer。 从 被拒 到 白菜 到 SP 再到 SP+

【第二届青训营-寒假前端场】- 「构建Webpack知识体系」笔记-爱代码爱编程

本节课重点内容什么是WebpackWebpack打包核心流程示例步骤关键配置项(如何使用?)使用Webpack处理CSS/less等思考题使用Webpack接入Babel思考题使用Webpack生成html思考题使用Webpack——HMR使用Webpack——Tree-Shaking其他工具思考题理解Loader认识Loader:链式调用认识

【ts】快速上手(六)面向对象oop - 封装 - 继承 - 多态_yk菌的博客-爱代码爱编程

文章目录 面向对象类面向对象三大基本特征继承方法的重写抽象类(`abstract class`)封装访问修饰符(TS)只读属性静态方法/属性属性存取器多态this类型参考文献TS基础系列相关博文 面向对象 面向对象是一种优秀的程序设计方法,它的基本思想是使用类、对象、继承、封装、消息等基本概念进行程序设计。 传统的面向对象编程(O

三年半经验,成功拿下字节阿里网易offer_java晴天过后的博客-爱代码爱编程

背景介绍 今年的铜三铁四可真是够离谱的,hc 各种锁。但是本人运气比较好,也是拿下了阿里、网易、字节的 offer。最终来了 base 杭州的抖音电商团队。 先说下自己的情况吧,本科 211,硕士 985,计算机相关专业,前端。工作三年半。 第一家公司:是一家南京的国企,技术不咋地,基本上就是前后端混着写的那种政府项目的业务,也是从这个时候

理解 typescript 背后的结构化类型系统-爱代码爱编程

前言 你能说清楚类型、类型系统、类型检查这三个的区别吗?在理解TypeScript的结构化类型系统之前,我们首先要搞清楚这三个概念和它们之间的关系 类型:即对变量的访问限制与赋值限制。如 TypeScript 中的原始类

一名运营,自学一年前端,成功入职杭州某独角兽企业,他的面试经验和学习方法等分享...-爱代码爱编程

大家好,我是若川。这是我的微信群里小伙伴@年年 的投稿。他是19年毕业,之前做的是运营相关的工作,在我的交流群里非常活跃,自学一年前端,目前成功转行入职杭州一家独角兽企业。相信他的文章能带给大家一些启发和激励。 0 写在最前面 我是年年,于19年毕业的,之前两份工作都不是开发相关,也就是0经验转行。工作之余持续学习前端大概

前端大佬的学习方法论,我推荐……-爱代码爱编程

技术日新月异,发展迅速,作为一个与时俱进的互联网人,需要不断地学习扩宽视野。 今天为大家推荐几个技术领域中出类拔萃的公众号,它们的每一篇推文都值得你点开! 1     若川视野 源码共读 开阔视野 100w+阅读 若川,江西人,写有《学习源码整体架构系列》20余篇,全网阅读量超100w+。组织了近3000人参与的每周一起读20

如何高效学习前端新知识,拓展视野,我推荐-爱代码爱编程

技术日新月异,发展迅速,作为一个与时俱进的互联网人,需要不断地学习扩宽视野。 今天为大家推荐几个技术领域中出类拔萃的公众号,它们的每一篇推文都值得你点开! 1     前端开发爱好者 学习路线 数据结构算法 前端进阶 「前端开发爱好者」号主xy,目前在某独角兽公司担任【前端Leader】,公众号创建的初心是【致力于基础到进阶再