Skip to content

交叉类型

将多个类型合并成为一个新的类型,新类型具有所有类型的特性 场景: 交叉类型具有所有类型的特性,非常适合对象混入的场景 语法: A & B 注意: 交叉类型中的交叉,并不是指两个类型的交集,而是并集

typescript
interface DogInterface {
  run(): void
}

interface CatInterface {
  jump(): void
}

// 交叉类型:取所以类型的并集
let pet: DogInterface & CatInterface = {
  run() {},
  jump() {},
}

联合类型

简单的联合类型

联合类型:类型可能为多个类型中的一种,但不能确定是哪一种

typescript
let strA: number | string = 'a'
let strB: 'a' | 'b' | 'c'

字面量联合类型

不仅限定变量类型,还限定变量的取值范围

typescript
let strC: 1 | 2 | 3
let strD: '1' | '2' | '3' = '1'

对象联合类型

typescript
// 定义两个类,分别实现两个接口
class Doga implements DogInterface {
  run() {}
  eat() {}
}

class Cata implements CatInterface {
  jump() {}
  eat() {}
}

// 定义枚举 Master
enum Master {
  Boy,
  Girl,
}
// 根据类型获取实例
function getPet(master: Master) {
  let pet = master === Master.Boy ? new Doga() : new Cat()
  pet.eat()
  // pet.run()
  return pet
}

可区分的联合类型

本质上是结合联合类型和字面量类型的一种类型保护方法 如果一个类型是多个类型的联合类型,且多个类型间有一个公共属性。那么,就可以利用这个公共属性,创建不同的类型保护区块

typescript
// 正方形
interface Square {
  kind: 'square'
  side: number // 边长
}

// 长方形
interface Rectangle {
  kind: 'rectangle'
  width: number // 宽
  height: number // 高
}

// 圆
interface Circle {
  kind: 'circle'
  r: number // 半径
}

type Shape = Square | Rectangle | Circle
// 计算面积: 利用两种类型共有的kind属性,创建不同的类型保护区块
// function area(s: Shape): number {
function area(s: Shape) {
  switch (s.kind) {
    case 'square':
      return s.side * s.side
    case 'rectangle':
      return s.height * s.width
    case 'circle':
      return Math.PI * s.r ** 2
    default:
      // 在default中检查未被之前case捕捉到的类型是否为never类型;
      // 如果s是never类型, 说明前面的所有分支都被覆盖了, 这个分支永远不会走到;
      // 如果s不是never类型, 说明前面的分支有遗漏, 需要补上这个分支;
      return ((e: never) => {
        throw new Error(e)
      })(s)
  }
}

console.log(area({ kind: 'circle', r: 1 })) // 3.141592653589793

Layout Switch

Adjust the layout style of VitePress to adapt to different reading needs and screens.

Expand all
The sidebar and content area occupy the entire width of the screen.
Expand sidebar with adjustable values
Expand sidebar width and add a new slider for user to choose and customize their desired width of the maximum width of sidebar can go, but the content area width will remain the same.
Expand all with adjustable values
Expand sidebar width and add a new slider for user to choose and customize their desired width of the maximum width of sidebar can go, but the content area width will remain the same.
Original width
The original layout width of VitePress

Page Layout Max Width

Adjust the exact value of the page width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the page layout
A ranged slider for user to choose and customize their desired width of the maximum width of the page layout can go.

Content Layout Max Width

Adjust the exact value of the document content width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the content layout
A ranged slider for user to choose and customize their desired width of the maximum width of the content layout can go.

Spotlight

Highlight the line where the mouse is currently hovering in the content to optimize for users who may have reading and focusing difficulties.

ONOn
Turn on Spotlight.
OFFOff
Turn off Spotlight.