TypeScript 入门教程 — 联合类型

联合类型表示取值可以为多种类型中的一种

简单的例子:

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;


let myFavoriteNumber: string | number;
myFavoriteNumber = true;

// index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
//   Type 'boolean' is not assignable to type 'number'.

这里的 let myFavoriteNumber: string | number 的含义是,允许 myFavoriteNumber 的类型是 string 或者 number,但是不能是其他类型。

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

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

function getLength(something: string | number): number {
    return something.length;
}

// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

上例中,length 不是stringnumber 的共有属性,所以会报错。

访问 stringnumber 的共有属性是没问题的:

function getString(something: string | number): string {
    return something.toString();
}

推荐阅读更多精彩内容

  • 关于TypeScript TypeScript是JavaScript的超集,主要提供类型系统和对ES6的支持,由M...
    kim_jin阅读 371评论 0 1
  • 一、什么是 TypeScript? 百度解释:TypeScript是一种由微软开发的自由和开源的编程语言。它是Ja...
    wave浪儿阅读 1,794评论 1 20
  • 前言 vue源码看了有一段时间了,由于偷懒,一直没有做记录,今天重看,发现很多知识点有些遗忘,果然懒还是不能偷的....
    一二三kkxx阅读 1,678评论 0 4
  • 基础类型 布尔 let is:boolean = false 数字 let n:number = 6 let n:...
    泡沫的快乐阅读 717评论 0 0
  • 关于知觉的思维导图(幕布连接,已加密,可私信联系密码,不定时可能会补充内容) 关于图片序号说明:01~12分别会对...
    琗琳羽阅读 175评论 0 0