携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

前言

这一节，我们来介绍下高级类型中的交叉类型、联合类型，来了解下和我们逻辑操作符与、或的一个关联性。

交叉类型

• 交叉类型可以看作是逻辑判断中与的操作，我们可以把多种类型合并成一种类型
• 比如我们定义两个接口，函数返回时，返回值是两个接口所有的参数

interface Info {
  name: string;
  age: number;
  sex: string;
}

interface Action {
  run: () => void;
  say: () => void;
}

function person(): Info & Action {
  return {
    name: "姓名",
    age: 20,
    sex: "男",
    run: () => {},
    say() {},
  };
}

• 当我们执行函数之后，拿到返回结果，我们就可以看到我们的结果包含Info和Action所有的类型参数

联合类型

参数定义

• 联合类型可以看作是逻辑操作中或的操作，我们可能希望我们的参数类型是某种类型，或者是另一种类型。
• 比如我希望函数的形参既可以传入数字，又可以传入字符串，然后做不同的操作

function show(visible: boolean, type: string | number) {
  if(typeof type === "number") {
    console.log('数字处理');
  }
  if(typeof type === 'string') {
    console.log('字符串处理');
  }
}

• 鼠标悬浮在type参数上，我们可以看到参数类型是包含string和number的

接口定义

• 我们可以通过联合类型，将两个接口进行合并，合并后可以访问的参数，是两个接口共有的成员
• 比如我们定义男人和女人两个接口，他们的共有属性合并成一个接口

interface man {
  name: string;
  age: number;
  sex: string;
  say: () => void;
}

interface woman {
  name: string;
  age: number;
  sex: string;
  run: () => void;
}

function person(): man | woman {
  
}
const res = person();

• 这样定义，执行person，在结果中我们能调用到的只有name、age、sex属性

总结

• 通过这一节，我们了解到，为了更好的组合类型进行使用，typeScript帮助我们内置了一些操作类型，交叉类型和联合类型就类似于我们逻辑代码中的与、或的关系。