『TypeScript』高级数据类型

Avatarcoderfee/Aug 25, 2019/#TypeScript#

交叉类型

交叉类型是把多种类型结合为一种类型,使之拥有所有类型的成员,使用 & 进行连接:

interface User {
name: string
age: number
}
interface Employee {
company: string
}
// 交叉类型
type NewType = User & Employee
const tom: NewType = { name: 'tom', age: 20, company: 'xxx' }

联合类型

联合类型表示一个值可以是一种或多种类型,使用 | 进行表示:

let x: string | number = '2'
x = 3 // OK

如果某个值是联合类型,那么我们只能访问该联合类型的共用成员:

interface Bird {
fly()
layEggs()
}
interface Fish {
swim()
layEggs()
}
function getSmallPet(): Bird | Fish {
//...
}
let pet = getSmallPet()
pet.layEggs() // OK
pet.swim() // Error

字面量类型

既可以限制变量的类型,也可以限制变量的取值范围。

  1. 字符串
const b = 'a' | 'b' | 'c'
  1. 数值
const c = 1 | 2 | 3

索引类型

场景之一是从一个对象中取出某些属性:

function pluck(o, props) {
return props.map((p) => o[p])
}

用 TS 实现:

function pluck<T, K extends keyof T>(o: T, props: K[]): T[K][] {
return props.map((p) => o[p])
}
interface Car {
manufacturer: string
model: string
year: number
}
let taxi: Car = {
manufacturer: 'Toyota',
model: 'Camry',
year: 2018,
}
let modelYear = pluck(taxi, ['model', 'year']) // ['Toyota', 2018]

keyof T 是类型 T 中已知属性的并集,如 keyof Car 即表示 'manufacturer' | 'model' | 'year'

T[K] 表示 T 类型中 K 属性的类型。

映射类型

TypeScript 中内置几种映射类型,通常和泛型结合使用。

  • Readonly
  • Partial
  • Pick
  • Record

条件类型

T extends U ? X : Y

这个表达式表示如果 T 能够分配给 U,则类型是 X,否则类型是 Y

类型保护

TypeScript 能在特定的区块中确保变量属于某种确定的类型,以便在该区块中使用该变量。在 TypeScript 中有几种方法可以创建类型保护:

class Java {
helloJava() {}
java: any
}
class JavaScript {
helloJavaScript() {}
javascript: any
}
function lang(lang: Java | JavaScript, x: string | number) {
// 1. instanceof 关键词
if (lang instanceof Java) {
lang.helloJava()
} else {
lang.helloJavaScript()
}
// 2. in 关键词
if ('java' in lang) {
console.log(lang.java)
} else {
console.log(lang.javascript)
}
// 3. typeof 关键词
if (typeof x === 'string') {
console.log(x.length)
} else {
x.toFixed(2)
}
}

类型别名

type 关键词可以为类型创建别名,它可以为原始类型、联合类型、元组或者其他指定的类型创建别名:

type Name = string
const a: Name = 'TypeScript'
type Pet = Fish | Bird
Copyright ©; 2016-2022 coderfee, All rights reserved.