TypeScript 中的交叉类型和联合类型：如何更好地处理复杂类型？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要处理各种复杂的数据类型。TypeScript 作为静态类型语言，为我们提供了更好的类型检查和代码提示，但是对于一些复杂的类型，我们可能需要用到 TypeScript 中的交叉类型和联合类型。

交叉类型

交叉类型是将多个类型合并成一个类型，可以理解为“并集”。在 TypeScript 中，我们可以使用 & 符号来表示交叉类型。

// javascriptcn.com 代码示例
interface A {
  a: number;
}

interface B {
  b: string;
}

type C = A & B;

const c: C = {
  a: 1,
  b: 'hello'
};

在上面的代码中，我们定义了两个接口 A 和 B，分别有一个属性 a 和 b。然后我们使用交叉类型将它们合并成一个新的类型 C，该类型包含了 A 和 B 的所有属性。最后我们创建了一个类型为 C 的对象 c，它包含了 a 和 b 两个属性。

交叉类型的应用场景比较广泛，比如在 Redux 中，我们可能需要将多个 reducer 合并成一个 reducer：

// javascriptcn.com 代码示例
interface Action {
  type: string;
  payload?: any;
}

interface State {
  count: number;
}

function counter(state: State, action: Action): State {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

interface User {
  name: string;
  age: number;
}

function user(state: User, action: Action): User {
  switch (action.type) {
    case 'UPDATE_NAME':
      return { ...state, name: action.payload };
    case 'UPDATE_AGE':
      return { ...state, age: action.payload };
    default:
      return state;
  }
}

type Reducer<S, A> = (state: S, action: A) => S;

const rootReducer: Reducer<State & User, Action> = (state, action) => {
  return {
    count: counter(state, action).count,
    ...user(state, action)
  };
};

在上面的代码中，我们定义了两个 reducer counter 和 user，分别处理 State 和 User 两个状态。然后我们使用交叉类型将它们合并成一个新的状态类型 State & User。最后我们定义了一个 rootReducer，它接收一个 State & User 类型的状态和一个 Action 类型的动作，然后将 counter 和 user 两个 reducer 的结果合并成一个新的状态。

联合类型

联合类型是将多个类型合并成一个类型，可以理解为“交集”。在 TypeScript 中，我们可以使用 | 符号来表示联合类型。

type A = string | number;
type B = number | boolean;
type C = A & B; // 类型为 number

在上面的代码中，我们定义了三个类型 A、B 和 C。A 类型为 string 或 number，B 类型为 number 或 boolean，C 类型为 A 和 B 的交集，即 number 类型。

联合类型的应用场景也比较广泛，比如在 React 中，我们可能需要处理多种类型的 props：

// javascriptcn.com 代码示例
interface PropsA {
  type: 'A';
  a: number;
}

interface PropsB {
  type: 'B';
  b: string;
}

type Props = PropsA | PropsB;

function Component(props: Props) {
  if (props.type === 'A') {
    console.log(props.a);
  } else {
    console.log(props.b);
  }
}

在上面的代码中，我们定义了两个 props 类型 PropsA 和 PropsB，分别有不同的属性。然后我们使用联合类型将它们合并成一个新的类型 Props。最后我们定义了一个组件 Component，它接收一个 Props 类型的 props，然后根据 type 属性的值来判断应该使用哪个属性。

总结

交叉类型和联合类型是 TypeScript 中处理复杂类型的重要工具，它们可以帮助我们更好地定义和使用类型。在实际开发中，我们需要根据具体情况选择使用交叉类型还是联合类型，以便更好地处理复杂类型。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656f0984d2f5e1655d75aa6e