TypeScript是JavaScrip【原创不易,请尊重版权】原创内容,盗版必究。t的超集。这是最大的一个误解!TS并不能本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】在没有任何的条件下,包含JS,你必须升级原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。TS编译器来支持新的JS特性,所以,TS未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】并不是JS的超集,而是以JS为编译目标的【转载请注明来源】本文版权归作者所有,未经授权不得转载。另一门语言。TypeScript的核心概【本文受版权保护】【版权所有】唐霜 www.tangshuang.net念就是“类型”,对于很多初接触TS的同学【版权所有,侵权必究】【本文受版权保护】,类型就是冒号后面的内容,然而,事实真的【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net是这样吗?本文将从一个另类的角度,聊一聊【转载请注明来源】本文作者:唐霜,转载请注明出处。TS里面的泛型、&、子类型、类型原创内容,盗版必究。【原创不易,请尊重版权】推导、类型空间等话题,从而为你展现一个可本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】能从来没想过的TS类型概念。
【转载请注明来源】【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。ng.net类型声明文件.d.ts
一切先从.d.ts文件开始说起吧。在我们【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。已经写好的js库中,可以通过.d.ts向【未经授权禁止转载】【原创不易,请尊重版权】外提供本库的类型声明,以方便类似vsco【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】de之类的编辑器可以智能提示和补全,以及【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。在ts项目中正确推导本库的api用法。在【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net.d.ts文件中,我们通过declare【本文首发于唐霜的博客】【本文受版权保护】来对需要暴露的api进行声明。
转载请注明出处:www.tangshua【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】ng.net【本文受版权保护】原创内容,盗版必究。declare是一个新的关键字,起码我们在以前只写js未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。的生涯中,从来没有使用过。我们如下声明一【未经授权禁止转载】【未经授权禁止转载】个函数:
declare function plus(a: number, b: number): number;
在声明中,我们只提供了函数的类型描述(下【本文受版权保护】【转载请注明来源】文我们会用形状Shape来表达这一概念)【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。,而没有函数的具体内容。这就像接口(in【作者:唐霜】原创内容,盗版必究。terface)一样,只有描述,没有实现【未经授权禁止转载】【本文首发于唐霜的博客】。如果我们的库是以模块的形式提供给外部使本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。用,那么,只需要在最前面加上export转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。导出这个函数的描述:
【访问 www.tangshuang.n【版权所有,侵权必究】【原创不易,请尊重版权】et 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。export declare function plus(a: number, b: number): number;
这样,在这个库的外部,当我们通过impo著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。rt导入它时,ts就会把它当作一个ES模原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net块,并从模块中提供暴露的plus接口给外【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】部的这个项目使用。
【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。在.d.ts文件中,我们不会存在任何js原创内容,盗版必究。原创内容,盗版必究。的具体实现。?真的吗?也不一定,有时候我【关注微信公众号:wwwtangshuangnet】【作者:唐霜】们会独立声明一个enum,而此时,你需要本文版权归作者所有,未经授权不得转载。【作者:唐霜】给定具体的值,以方便在外部阅读。
著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。export enum Colors {
Red: 'red';
Blue: 'blue';
Yellow: 'yellow';
}
export declare function paint(color: Colors): void;
注意第一个export,倘若此处我们不导【转载请注明来源】原创内容,盗版必究。出enum,那么我们在外部只能通过硬编码转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net的形式传入字符串的red/blue/ye【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】llow,但当我们导出之后,就可以在外部未经授权,禁止复制转载。【本文首发于唐霜的博客】使用Colors.Red等:
转载请注明出处:www.tangshua【作者:唐霜】本文作者:唐霜,转载请注明出处。ng.net【版权所有】唐霜 www.tangshu【未经授权禁止转载】【版权所有,侵权必究】ang.net未经授权,禁止复制转载。【访问 www.tangshuang.n本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】import { Colors } from 'some-lib/index.d' // <- 把它当作一个普通的.ts导入
import { paint } from 'some-lib'
paint(Colors.Red)
.d.ts只是一个摘要文件,它不被作为真【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。正的运行时代码进行编译,但同时,我们也可【本文受版权保护】【版权所有】唐霜 www.tangshuang.net以把它作为一个.ts文件进行使用,使用时【未经授权禁止转载】【本文受版权保护】,通过declare声明的部分,不会被作为运行时进行编译。
当你读到这里的时候,我想,你应该对dec转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。lare产生了兴趣,以及对带来这个新语法本文版权归作者所有,未经授权不得转载。【转载请注明来源】的新语言产生了兴趣。但是,不要着急,我们【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。还有很多东西要聊。
未经授权,禁止复制转载。未经授权,禁止复制转载。&不是“交集”?
我们直观感受是,当看到&时,我们本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。要得到一个交集。例如:
【转载请注明来源】本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。interface A {
name: string;
age: number;
}
interface B {
name: string;
weight: number;
}
我们直观感受是,A&B ->本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。; interface C { name【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】: string },然而,事实恰恰相反【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net,A&B的结果是:
【访问 www.tangshuang.n【作者:唐霜】【本文首发于唐霜的博客】et 获取更多精彩内容】【本文首发于唐霜的博客】【作者:唐霜】【未经授权禁止转载】interface D {
name: string;
age: number;
weight: number;
}
咦……这……不是并集吗?为了便于理解,你【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。可以这样想:D既符合A也符合B,所以是A本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net和B的“交叉”。但是,如果只能通过这种方【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。式来记忆TS,那么,真的毫无意义,掌握不原创内容,盗版必究。【本文首发于唐霜的博客】到TS的皮毛。
著作权归作者所有,禁止商业用途转载。【本文受版权保护】此extends非彼extends
TS中的extends和JS里面的ext【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】ends形式相同概念不同。例如:
未经授权,禁止复制转载。【未经授权禁止转载】转载请注明出处:www.tangshua原创内容,盗版必究。未经授权,禁止复制转载。ng.netinterface Animal {
name: string;
}
interface Snake extends Animal {
length: number;
}
Snake是在Animal的基础上增加了【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】length字段。我们可以换一种写法:
【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】ang.net转载请注明出处:www.tangshua【作者:唐霜】【未经授权禁止转载】ng.net转载请注明出处:www.tangshua【未经授权禁止转载】【原创内容,转载请注明出处】ng.net【关注微信公众号:wwwtangshua原创内容,盗版必究。【本文首发于唐霜的博客】ngnet】type Snake = Animal & {
length: number,
}
两者在语义上是有差别的,虽然结果上一致。本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net太不可思议了,我看到了感觉上完全不同的两本文作者:唐霜,转载请注明出处。【作者:唐霜】种操作,竟然得到了相同的结果?
转载请注明出处:www.tangshua【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.netng.net转载请注明出处:www.tangshua【未经授权禁止转载】【版权所有,侵权必究】ng.netextends在TS中,代表着从一个类型扩展出另外一个转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】新类型,这个新类型是原来这个类型的子类型【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】。同时,extends在TS中具有条件属原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。性,它用于判断一个类型是否是另外一个类型本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net的子类型:
type Some = A extends B ? C : D
在这一意义上,TS和JS中的extend本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】s具有完全不同的性质。JS中extend【转载请注明来源】【作者:唐霜】s代表继承(inherit),而TS中e【版权所有】唐霜 www.tangshuang.net【转载请注明来源】xtends就是它的字面意思“扩展”。
【版权所有,侵权必究】【本文受版权保护】Subtyping子类型
子类型是一个庞大的话题,涉及到抽象概念、【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net(推导)规则、协变、逆变等等,你可以阅读这篇文章深入了解,本文只会聊其中很小的一部分。子类型揭示转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】了TS类型系统的核心实质,它是一个推导系原创内容,盗版必究。【版权所有,侵权必究】统,推导即基于某些定理、公理、定律进行演本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。算的过程(在TS中主要是基于内建的一些规【原创内容,转载请注明出处】原创内容,盗版必究。则用于检查值的类型)。
【关注微信公众号:wwwtangshua未经授权,禁止复制转载。原创内容,盗版必究。ngnet】【关注微信公众号:wwwtangshua【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netngnet】TS的类型基于“集合”的概念。一个类型,【转载请注明来源】原创内容,盗版必究。代表一个集合,例如string类型代表的本文版权归作者所有,未经授权不得转载。【本文受版权保护】是所有字符串的集合。在检查过程中,如何决未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。定一个值属于这个“集合”呢?它的依据在于著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net这个值的“形状(Shape)”。怎么定义转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】值的形状呢?它由两部分组成,一部分是基于【作者:唐霜】转载请注明出处:www.tangshuang.netJS的基础类型,得到该值的数据类型,另一【关注微信公众号:wwwtangshuangnet】【作者:唐霜】部分是基于TS的另外一个核心Struct未经授权,禁止复制转载。未经授权,禁止复制转载。ural(结构化的),得到该值的结构。基【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。于数据类型和结构这两个概念,TS获得值的【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】形状,基于“推导”的运行方式,决定该值是转载请注明出处:www.tangshuang.net【未经授权禁止转载】否符合某个类型。
【访问 www.tangshuang.n【未经授权禁止转载】【原创不易,请尊重版权】et 获取更多精彩内容】【未经授权禁止转载】正是这样,那么下面两个类型,在TS里面,【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。竟然是“相等”的:
【作者:唐霜】【本文受版权保护】著作权归作者所有,禁止商业用途转载。class A {
name: string;
}
class B {
name: string;
}
这在Java或C#这样的语言中,完全不能转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。被理解,它俩怎么可能相等?而在TS中,它转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。们代表着形状为 { name: stri【作者:唐霜】著作权归作者所有,禁止商业用途转载。ng } 的对象(JS中一切复合类型皆是【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net对象)的集合。一个值,在TS中,它和集合原创内容,盗版必究。【未经授权禁止转载】的对应关系不是一对一的,它可以同时属于多【作者:唐霜】【作者:唐霜】个集合中,是一对多的关系。而同时,两个不【未经授权禁止转载】【作者:唐霜】同的集合,却可能表达相同的形状。如果你看著作权归作者所有,禁止商业用途转载。【本文受版权保护】它像鸭子,那么它就是鸭子。于是,A和B相【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】等了,只是取了不同的名字而已,就像一个人未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】在这个杂志上叫鲁迅,在另一个杂志上叫润土著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。。
【未经授权禁止转载】【未经授权禁止转载】【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshu未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.netang.netTS是怎么对待(treat)这些集合的呢【本文受版权保护】【版权所有,侵权必究】?它基于一种推导的范式确定两个集合之间的【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】关系。两个集合存在什么关系呢?只存在两种转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。关系:一种是A是B的子类型,另一种是A不【转载请注明来源】原创内容,盗版必究。是B的子类型。(A和B可交换位置。)子类原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】型,是TS对待类型集合的唯一方式。在TS【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。中,所有类型的总和,都处在子类型体系中,【本文首发于唐霜的博客】【原创内容,转载请注明出处】这个子类型体系是一个树状网络,它的根是一未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net个叫unknow的类型,而它的底是一个叫【未经授权禁止转载】原创内容,盗版必究。never的类型(never是所有类型的【作者:唐霜】【版权所有,侵权必究】子类型,是树状的所有叶子)。
本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshua原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ng.net本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。子类型用于表达类型与类型的二元关系,当一个值的类型属于某一类型时,它同时属【关注微信公众号:wwwtangshuangnet】【转载请注明来源】于该类型的父类型。它的产生方式又有多种,未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。一种是基于父类型扩展,也就是使用exte【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netnds,一种是基于一种叫交叉(A &am【转载请注明来源】【版权所有,侵权必究】p; B)的操作得到,一种则是基于一种叫【本文受版权保护】【版权所有】唐霜 www.tangshuang.net联合(A | B)的操作得到。曾经有这样【作者:唐霜】【作者:唐霜】一个预言,让一只猴子坐在一台电脑前敲击键著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。盘,总有一天它能敲出莎士比亚的所有著作(转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net猴子不懂艺术)。同样的道理,只要给定条件【关注微信公众号:wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】,你永远可以在TS的子类型体系中找到对应原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net的类型,而这个过程基于“推导”完成。因此【本文受版权保护】【版权所有,侵权必究】,实际上,子类型的产生方式只有一种而非三著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net种或更多,这种方式就是基于某一类型(ne【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ver除外)扩展出新类型。
未经授权,禁止复制转载。原创内容,盗版必究。字面量类型
基于“形状”我们确实可以做类型的断言,但【本文首发于唐霜的博客】【未经授权禁止转载】是这套方法会有个例外:字面量类型。特别是本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。基础类型的字面量类型,比如string,【转载请注明来源】未经授权,禁止复制转载。 number等的字面量。字面量类型只有【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net结构(structure)没有数据类型,【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net这听上去有点反常识,且往下读。
本文版权归作者所有,未经授权不得转载。【转载请注明来源】【本文受版权保护】type Str = 'hello' | 'world' let a: Str = 'hello'
我们在用字面量类型时,常常并不是按照我们【原创内容,转载请注明出处】【本文首发于唐霜的博客】所想的那样工作,例如:
本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshu【版权所有,侵权必究】【本文受版权保护】ang.nettype Source = {
name: string,
ext: 'mp3' | 'mp4',
}
function play(source: Source): void {
...
}
const source = {
name: 'xxx',
ext: 'mp3',
}
play(source) // <- error
此时却会抛出错误。这是因为当TS在断言时【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】,是以形参source的形状进行推导,对【转载请注明来源】【原创不易,请尊重版权】实参source的形状进行断言。因此,接著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】收到的参数在形状上是 { name: s本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】tring, ext: string }【本文首发于唐霜的博客】未经授权,禁止复制转载。 并不是Source的子类型,所以TS认【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。为此处检查不通过。解决办法是在实参sou本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.netrce.ext后面跟上as const,未经授权,禁止复制转载。【本文受版权保护】告诉编译器此处我强制’mp3本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。’为常量,因此就符合Sour本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。ce的约束。
本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。但这个问题不是由字面量本身引起的,我们看【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.net另外一个case:
原创内容,盗版必究。原创内容,盗版必究。【访问 www.tangshuang.n【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。et 获取更多精彩内容】本文作者:唐霜,转载请注明出处。type Ext = 'mp3' | 'mp4'
const mp3 = 'mp3'
function play(ext: Ext): void {}
play(mp3) // <- ok
字面量本身并不会带来问题,问题在于mut【作者:唐霜】【版权所有,侵权必究】(可变)。假如我上面把const mp3原创内容,盗版必究。【转载请注明来源】改为let mp3,此时就会报错。在pl【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】ay接收source的时候,虽然此时so著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.neturce.ext的值为mp3,但是,并不【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。代表source.ext的值永远为mp3著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】,因为它是可变的。假如它是不可变的,那么未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。就没有问题。
转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。ng.net【访问 www.tangshuang.n本文作者:唐霜,转载请注明出处。原创内容,盗版必究。et 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】问题解决了,现在,让我们回到类型系统的讨【本文受版权保护】【本文首发于唐霜的博客】论上来。
【版权所有,侵权必究】【关注微信公众号:wwwtangshua【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。ngnet】【原创不易,请尊重版权】上文提到TS基于推导进行类型断言,推导就未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net是寻找子类型二元关系,如果不存在父子类型【未经授权禁止转载】【本文首发于唐霜的博客】关系,就断言失败,抛出错误。那么,【原创不易,请尊重版权】【版权所有,侵权必究】217;mp3′ | 【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。216;mp4′ 的子类型是【关注微信公众号:wwwtangshuangnet】【作者:唐霜】谁呢?’mp3’【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net, ‘mp4′ 原创内容,盗版必究。【原创不易,请尊重版权】和 never,以及它自身。
未经授权,禁止复制转载。【本文首发于唐霜的博客】原创内容,盗版必究。现在,’mp3’【原创不易,请尊重版权】【本文首发于唐霜的博客】 & ‘mp4【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】217;的子类型时谁呢?就是它的本身ne【未经授权禁止转载】【版权所有,侵权必究】ver。为什么它的本身是never呢?我著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】们来看,’mp3’未经授权,禁止复制转载。【原创内容,转载请注明出处】;的子类型是什么?’mp3&著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。#8217;和never。’转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】mp4’的子类型呢?R【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。17;mp4’和never。【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。只有never满足’mp3&未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。#8217;&’mp【原创不易,请尊重版权】【原创不易,请尊重版权】4’。
本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.n【版权所有,侵权必究】【版权所有,侵权必究】et 获取更多精彩内容】【转载请注明来源】【版权所有,侵权必究】我们回过头来看文章前面提到的A&【版权所有,侵权必究】原创内容,盗版必究。B的例子。
本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。interface A {
name: string;
} // -> { name: string }
interface A1 extends A {
age: number;
} // -> { name: string, age: number }
interface A2 extends A {
weight: number;
} // -> { name: string, weight: number }
interface B {
sex: string;
} // -> ???
谁是A的子类型一目了然了吧。所有含有na【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】me:string的形状都是A的子类型,本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。包括A本身,以及never。那么,谁是B【版权所有,侵权必究】【转载请注明来源】的子类型呢?所有包含sex:string【关注微信公众号:wwwtangshuangnet】【版权所有,侵权必究】的形状都是B的子类型,包括B本身,以及n【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ever。
转载请注明出处:www.tangshua【本文受版权保护】著作权归作者所有,禁止商业用途转载。ng.net【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.netang.net【转载请注明来源】现在,我们知道了A&B本身是A&转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.netamp;B的子类型,那么A&B是【本文受版权保护】【本文首发于唐霜的博客】什么?是指“既是A的子类型,也是B的子类转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。型”的类型,也就是A的子类型的集合与B的本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】子类型的集合的交集。所以,A&B【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。表达的是这样的“交集”,而实际产生的结果【本文受版权保护】【版权所有,侵权必究】是形状的“并集”,这并不是矛盾的,而是推转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。导结果。
本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。ng.net纯类型编程
TS的类型系统几乎快要成为图灵完备的一门本文作者:唐霜,转载请注明出处。【作者:唐霜】语言,你可以用它来写出一门新语言。我们要理解的是,纯类型编程和作为JS超未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。集的TS编程的边界。我们几乎不会只写类型未经授权,禁止复制转载。【本文受版权保护】,而不写JS代码……等一下,真的不会吗?【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】我们有的时候,会把项目中反复用到的一些类本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】型,提取到公用的typings目录下进行著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。管理,在其他地方引入这些类型。当我们脱离【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netJS单纯写类型的时候,我们开始进入另外一本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。个世界,这个世界叫类型空间。
【本文首发于唐霜的博客】【未经授权禁止转载】我们写JS处于一个叫值空间的世界,面向运【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。行时编程。而在类型空间,我们面向编译时编【版权所有,侵权必究】【未经授权禁止转载】程。大多数情况下,两个空间是隔绝的(虽然在写【版权所有】唐霜 www.tangshuang.net【本文受版权保护】代码的时候大部分情况下它们被写在一起),【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】但偶尔也有例外,也就是字面量类型出现的时转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。候,TS会在两个世界传送字面量(的结构而【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】非值),以完成类型识别。所以严格讲,值,【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】永远不会出现在类型空间。
【转载请注明来源】未经授权,禁止复制转载。【访问 www.tangshuang.n【本文受版权保护】【作者:唐霜】et 获取更多精彩内容】【访问 www.tangshuang.n【本文首发于唐霜的博客】【作者:唐霜】et 获取更多精彩内容】在官方网站有这样一句话:别名只是别名。它【本文受版权保护】【未经授权禁止转载】的意思是,你并非在用type关键字定义一【原创内容,转载请注明出处】【未经授权禁止转载】个类型,你只是给一个类型取了一个别名。无本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。论你给一个类型取了多少个别名,它还是它自本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。己,没有发生任何变化。
【未经授权禁止转载】【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netang.net【转载请注明来源】【本文受版权保护】联合类型或交叉类型不具备存储类型的功能。原创内容,盗版必究。转载请注明出处:www.tangshuang.net例如type C = A & B转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】,C并不能存储一个具体的类型,而是存储一著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】个推导逻辑。原因很简单,因为C是无数个类【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】型的集合。而在前面我们讲过,一个类型是一转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net个集合,所以,C是无数个集合的集合。你不本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】可能存储无数个类型。C参与断言的方式,是本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】将具体的形状,参与推导过程。举个例子:有【本文首发于唐霜的博客】【本文受版权保护】一条这样的规则:S-Arrow: 对于任【原创不易,请尊重版权】未经授权,禁止复制转载。何类型T1,T2,S1,S2 ,如果T1<:S1, 而且S2<:T2,那么S1->S2 <: T1->T2。
【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netngnet】【本文受版权保护】转载请注明出处:www.tangshua【本文受版权保护】【原创内容,转载请注明出处】ng.net【本文受版权保护】declare const foo: (x: unknown) => string; // S1->S2 const bar: (x: number) => unknown = foo; // T1->T2
在上面的这个例子中,TS可以根据S-Ar【作者:唐霜】本文版权归作者所有,未经授权不得转载。row规则,快速断言foo的类型是bar【作者:唐霜】【版权所有】唐霜 www.tangshuang.net的类型的子类型,所以,将foo赋值给ba【本文受版权保护】转载请注明出处:www.tangshuang.netr是完全ok的操作。类似这样的规则,是具本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net有数学意义的公理、定理或定律,有的是前提【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。条件,有的是推导结论,在TS的断言中,都【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net可以直接使用。基于这些推导规则,TS并不本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net需要确定一个别名的具体类型,而可以做到编著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。译时实时且高效的推导和断言。
本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】“类型”是TS世界的一等公民,是唯一的主转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net角,TS类型编程无非是基于一个或多个类型著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】,生成其他类型。但类型世界的运转规则和值【未经授权禁止转载】本文作者:唐霜,转载请注明出处。世界的运转规则完全不同。值世界的新值由计未经授权,禁止复制转载。未经授权,禁止复制转载。算得到,计算规则有常见的运算、辅助运算规未经授权,禁止复制转载。原创内容,盗版必究。则、内存与数据结构、位运算等等。类型世界【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】的新类型如上文所述,由父类型扩展而来,扩【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】展规则有扩展、联合、交叉、推导、获取等。转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】类型具有抽象性,TS没有命令指令,因此没著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】有副作用,因此类型只能被创建无法被修改,【转载请注明来源】转载请注明出处:www.tangshuang.net因此TS是静态的系统。没有副作用并不代表【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。无法实现编程,和值世界完全不同的运行规则【关注微信公众号:wwwtangshuangnet】【作者:唐霜】,让TS可以基于推导完成复杂的编程,而我未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net们常把这种需要动脑子找到推导路径的过程称转载请注明出处:www.tangshuang.net【作者:唐霜】为“类型体操”,例如,我们找出从A|B推【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。导出A&B的路径是type UnionToIntersection<U> =。
(U extends any ? (k: U)=>void : never) extends ((k: infer I)=>void) ? I : never
除了借用JS的typeof, in等指令【转载请注明来源】转载请注明出处:www.tangshuang.net关键字外,TS的keyof, infer【版权所有】唐霜 www.tangshuang.net【本文受版权保护】, as等指令,都不具备副作用。同时,在【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】TS中,也支持三目运算,根据条件选择使用本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】类型,例如 T extends Some【本文首发于唐霜的博客】未经授权,禁止复制转载。 ? T : Some. TS直接支持递【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】归,可配合泛型用于替代循环语句。keyo【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。f和in配合可用于支持迭代遍历效果。泛型【本文首发于唐霜的博客】【原创不易,请尊重版权】,则是通往类型编程的高速公路,是实现类型原创内容,盗版必究。原创内容,盗版必究。编程的核心条件。
未经授权,禁止复制转载。【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net【转载请注明来源】ang.net【版权所有,侵权必究】我在之前的一篇博客文章中有聊过自己第一次接触泛型时,如何用已知的【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net知识理解它。但那种理解仍然是套用知识,而【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】非认知。简单讲,泛型是TS类型编程中的“【本文受版权保护】原创内容,盗版必究。函数”,用以根据已有类型,按照给定推导路未经授权,禁止复制转载。【未经授权禁止转载】径,生成新的类型,可以简称为“类型生成函原创内容,盗版必究。转载请注明出处:www.tangshuang.net数”。泛型参数是TS中最有趣最灵活最强大【原创不易,请尊重版权】【未经授权禁止转载】最麻烦的存在。我们来看一下一个解构的例子【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】:
本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshu未经授权,禁止复制转载。【本文受版权保护】ang.netconst { name } = { name: 'yj' } // javascript
我们尝试用TS类型编程来做类似的事情(出自):
【版权所有,侵权必究】【版权所有】唐霜 www.tangshu【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】ang.net【版权所有】唐霜 www.tangshu原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。ang.net【原创不易,请尊重版权】type NameType<T> = T extends { name: infer N } ? N : never;
type name = NameType<{ name: 'yj' }>; // name is 'yj'
NameType可以从给定的类型中解构出原创内容,盗版必究。【原创不易,请尊重版权】给定类型的name属性的类型’【关注微信公众号:wwwtangshuangnet】【本文受版权保护】;yj’。前文提到在类型空间本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。没有值,但是此刻,我们却可以利用TS的类【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。型编程能力,获得的是泛型参数类型的nam本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。e属性类型(字面量)。
【原创内容,转载请注明出处】【原创内容,转载请注明出处】【本文受版权保护】本文作者:唐霜,转载请注明出处。但是遗憾的是,TS没有输出指令,类型世界【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】的结果也无法传递给值世界,所以,我们在类【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net型世界的编程,最终无法产生效果。不过随着未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。时间的推移,事情有了转机,TS官方提供了【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】生成器接口,通过一些工厂方法,你可以修改原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。TS的编译结果。而在这个过程中,我们可以【转载请注明来源】著作权归作者所有,禁止商业用途转载。尝试破坏TS的Erased特性,保留类型【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】的某些信息,从而可以将类型世界的结果传送【未经授权禁止转载】未经授权,禁止复制转载。回值的世界,输出类型编程的结果。
【转载请注明来源】本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。结语
本文并没有展开typescript中关于【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】类型的用法,本文从另外一个角度,探索ty【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.netpescript中“类型”的概念,其中很【本文受版权保护】【原创不易,请尊重版权】多表述可能并不准确甚至并不正确,但是,我未经授权,禁止复制转载。【原创不易,请尊重版权】努力抛开用法,从本源出发去思考types转载请注明出处:www.tangshuang.net【本文受版权保护】cript中最核心(甚至是唯一)的概念。未经授权,禁止复制转载。【原创不易,请尊重版权】我们在写TS代码的时候,或许也该意识到,原创内容,盗版必究。本文作者:唐霜,转载请注明出处。我们在做一件在两个世界之间穿越的事情,听【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】起来很魔幻。掌握TS中类型的规律,我们必原创内容,盗版必究。【本文受版权保护】须深入去思考子类型是什么,并且在子类型体【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。系中,寻求我们的最短路径。
【本文受版权保护】未经授权,禁止复制转载。2021-06-27 8444 TypeScript



技术文章,学习了。
文章真长
很有价值的一文, 解释了为什么我一会儿觉得ts好写, 一会儿就觉得ts好难写.
还有个小疑惑, as const解决完字面量的问题之后数组的类型又会报错, 这时候是怎么解决的?
“`
type Source = {
name: string,
ext: ‘mp3’ | ‘mp4’,
list:{name:string}[]
}
function play(source: Source): void {
}
const source = {
name: ‘xxx’,
ext: ‘mp3’,
list:[]
} as const
play(source) // <- error
/**
* Argument of type '{ readonly name: "xxx"; readonly ext: "mp3"; readonly list: readonly []; }' is not assignable to parameter of type 'Source'.
Types of property 'list' are incompatible.
The type 'readonly []' is 'readonly' and cannot be assigned to the mutable type '{ name: string; }[]'.(2345)
*/
“`
const source = {
name: ‘xxx’,
ext: ‘mp3’ as const,
list:[]
}
play(source)
感谢解惑, 回头看看, 其实文中已经给出了答案, 还是我对mut的理解不到位.
类型体操可真是太秀了( ̄~ ̄)