TypeScript 高级类型

前面我们学的数字类型、字符串类型、布尔类型、数组类型等等可能都是我们比较熟悉的数据类型,在其他计算机语言中也能经常见到。而本节我们要学习的是 TypeScript 中的高级类型,例如交叉类型、联合类型、类型别名、字面量类型等。

交叉类型

交叉类型是将多个类型合并为一个类型。可以通过 & 来实现合并,生成的新类型包含了所需的所有类型的特性。

举一个例子,假设 ABC 是三种不同的数据类型, 我们将三种类型合并为一个新的交叉类型 A & B & C ,那么使用这个交叉类型声明的对象可以同时包含 A、B、C 这个三种类型的成员。

一般交叉类型大多用于混入(mixins),或其他不适合典型面向对象模型的地方使用。在 JavaScript 里发生这种情况的场合很多。

示例:

我们来看一个简单的例子,下面 UserStudent 是我们定义好的两个接口:

interface User {
    id: number,
    username: string,
    age: number
}
  
interface Student{
    id: number,
    score: number[],
}
  
let cross: User & Student;  // 交叉类型

// 变量cross拥有两个接口中的所有属性
cross.id;
cross.username;
cross.age;
cross.score;

交叉类型 User & Student 就包含了上述两个接口中的所有属性,而通过交叉类型声明的变量 cross,拥有两个接口中的所有的属性。

但是这种方式也需要注意一个问题,就是如果两个接口中有相同的属性,但是属性的类型不同,这样就会造成冲突,不可以赋值。例如:


联合类型

联合类型可以通过管道将变量设置多种类型,赋值时可以根据设置的类型来赋值。也就是说联合类型的变量可以是指定的几种数据类型中的一种,我们可以通过竖线 | 来分隔不同的类型。

语法格式:

Type1|Type2|Type3 

需要注意的是,声明为联合类型的变量,只能赋值指定的类型的值,如果赋值其他类型的值也会报错哟。

示例:

例如我们声明一个联合类型的变量 our

let our:number|string|boolean;

our = 18;
our = 'xkd';
our = true;

上述的代码表示变量 our 的值可以是 number 类型、string 类型或者 boolean 类型中的一种。如果我们给变量 our 赋值为这三个指定数据类型以外的类型值,则会导致报错哟。

类型别名

我们在使用类型时,可以通过 type 关键字为类型起一个别名,类型别名较多应用于联合类型、交叉类型这种复合类型,这样可以避免我们重复它们的定义。

起别名并不会新建一个类型,只是创建了一个新的名字来引用那个类型。

示例:

例如给一个自定义的联合类型加上一个类型别名 admix,然后我们在使用这个联合类型来声明变量的时候,就只需要指定变量为 admix 类型即可。这样我们就不需要多次定义 number|string|boolean ,而直接使用别名 admix 来引用此类型就行了:

type admix = number|string|boolean;  // 给联合类型加上别名

let a:admix = 100;
let b:admix = 'xkd';
let c:admix = true;

console.log(a);
console.log(b);
console.log(c);

编译成 JavaScript 代码:

var a = 100;
var b = 'xkd';
var c = true;
console.log(a);
console.log(b);
console.log(c);

输出:

100
xkd
true

字面量类型

TypeScript 中,字面量类型允许我们指定必须的固定值,通过分隔符 | 将不同字面量分隔,且也可以通过 type 关键字为自定义的字面量类型加上别名。

示例:

例如当变量的值为”小飞侠”就是“水星仔”其中之一,那我们就可以将这两个值构成一个联合类型字面量,:

type names = '小飞侠' | '水星仔';  

let a:names = '小飞侠';
let b:names = '水星仔';

上述代码中通过别名 names 将变量 ab 声明为我们自定义的字面量,那么这两个变量的值仅能为“小飞侠” 或者 “水星仔” 其中之一,否则会报错。

一般我们是很少直接这样使用的,在一些特殊情况下,例如使用字符串字面量类型来区分函数重载,或用于缩小范围调试 bug 等,可以这样使用。

访问联合类型的属性或者方法

TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法。

示例:

例如我们在一个函数 info 中定义两个参数,参数 username 的类型为 string 类型,而 age 的类型为一个联合类型,可以是 string 类型或 number 类型:

function info( username: string, age : string | number) {
    console.log(age.length);  // 报错
}

我们在使用 age 来访问属性 length 时会导致报错,这是因为只有字符串类型中才有属性 length,数字类型没有这个属性。 由于 length 并不是数字类型和字符串类型的共有属性,所以被声明为这个联合类型的变量 age 不能访问这个属性。

function info( username: string, age : string | number) {
    console.log(age.toString());  
}

通过 age 来访问 toString() 方法不会报错,这是因为 toString() 方法是数字类型和字符串类型共有的方法,所以被声明为联合类型的 age 可以访问这个方法。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,525评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,203评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,862评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,728评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,743评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,590评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,330评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,244评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,693评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,885评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,001评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,723评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,343评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,919评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,042评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,191评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,955评论 2 355

推荐阅读更多精彩内容

  • 交叉类型 交叉类型将多个类型合并为一个类型,相当于新类型具有这多个类型的所有特性,相当于是一种并的操作,通常在使用...
    这个前端不太冷阅读 667评论 0 0
  • 一、交叉类型 交叉类型将多个类型合并为一个新的类型,新的具有所有参与合并的类型的特性,本质上是一种并的操作。形式如...
    kuxingseng686阅读 530评论 0 0
  • 可以为null的类型 TypeScript具有两种特殊的类型, null和 undefined,它们分别具有值nu...
    2o壹9阅读 960评论 0 49
  • 数字字面量类型 TypeScript还具有数字字面量类型。 function rollDie(): 1 | 2 |...
    2o壹9阅读 831评论 2 50
  • 交叉类型(Intersection Types) 交叉类型是将多个类型合并为一个类型。 这让我们可以把现有的多种类...
    2o壹9阅读 739评论 0 49