TypeScript中的联合类型使用示例详解

type A1 = number;
type B1 = string;
type C1 = A1 | B1;
const c1: C1 = 42;
// 这种可以理解成集合的并集，但是他们没有交集
type A2 = { name: string };
// 这里要理解成 A2表示name为string的所有对象，比如{name: 'a', age: 14}, 它既可以有age也可以没age
type B2 = { age: number };
type C2 = A2 | B2;
const c2: C2 = {
  name: 'John',
  age: 18,
};
// 这种可以理解成两个集合的并集，并且他们有交集

const f1 = (a: number | string) => {
  if (typeof a === 'number') {
    a.toFixed();
  } else {
    a.split(',');
  }
};

const f1 = (a: Date | Date[]) => {
  if (a instanceof Date) {
    a;
  } else {
    a;
  }
};

const f1 = (a: Date | string | Date[]) => {
  if (typeof a === 'string') {
    a;
  } else if (a instanceof Date) {
    a;
  } else {
    a;
  }
};

type Person = {
  name: string;
};
type Animal = {
  x: string;
};
const f1 = (a: Person | Animal) => {
  if('name' in a) {
    a
  } else if ('x' in a) {
    a
  } else {
    a
  }
}

type Rect = {
  height: number;
  width: number;
};
type Circle = {
  center: [number, number];
  radius: number;
};
const f1 = (a: Rect | Circle) => {
  if (isRect(a)) {
    a;
  }
};
// 这里x is Rect就是类型谓词,用于收窄类型，写boolean不行，因为这里写boolean的话ts不知道boolean的含义是什么
function isRect(x: Rect | Circle): x is Rect {
  return 'height' in x && 'width' in x;
}

type Circle = { kind: 'Circle'; center: [number, number] };
type Square = { kind: 'Square'; sideLength: number };
// 两个联合起来的类型通过加上kind字段来进行判断类型
type Shape = Circle | Square;
const f1 = (a: string | number | Shape) => {
  if (typeof a === 'string') {
    a;
  } else if (typeof a === 'number') {
    a;
  } else if (a.kind === 'Circle') {
    a;
  } else {
    a;
  }
};

type Action =
  | { type: 'getUser'; id: string }
  | { type: 'createUser'; attributes: any }
  | { type: 'deleteUser'; id: string }
  | { type: 'updateUser'; attributes: any };

type Circle = { kind: 'Circle'; center: [number, number] };
type Square = { kind: 'Square'; x: number };
type Shape = Circle | Square;
const f1 = (a: Shape) => {
  (a as Circle).center; // 这就是断言
};
f1({ kind: 'Circle', center: [1, 2] });

const f1 = (a: number | string) => {
  a.toFixed(); // 会报错
  a.split(); // 会报错
  a.toString(); // 只能用number和string共有的方法
};
const f2 = (a: any) => {
  a.toFixed(); // 不会报错
  a.split(); // 不会报错
};

const f1 = (a: any) => {
  const b: never = a; // 会报错，这算是any唯一不能违反的规则
};

const f1 = (a: unknown) => {
 if(a instanceof Date) {
   a // Date
 }
 if(isPerson(a)) {
   a // Person
 }
}