【TypeScript 演化史 -- 3】标记联合类型 与 never 类型

做者：Marius Schulz

译者：前端小智

来源：Marius Schulz

---

阿里云最近在作活动，低至2折，真心以为很划算了，能够点击本条内容或者连接进行参与： promotion.aliyun.com/ntms/yunpar…

腾讯云最近在作活动，百款云产品低至 1 折，能够点击本条内容或者连接进行参与

---

TypeScript 2.0 实现了一个至关有用的功能：标记联合类型，您可能将其称为 sum 类型或与其余编程语言区别开的联合类型。 标记联合类型是其成员类型都定义了字面量类型的区分属性的联合类型。

上面的讲的是理论性的，来几个例子看看更贴切。

使用标记的联合类型构建付款方式

假设我们为系统用户能够选择的如下支付方式建模

• Cash (现金)
• PayPal 与给定的电子邮件地址
• Credit card 带有给定卡号和安全码

对于这些支付方法，我们能够建立一个 TypeScript 接口

interface Cash {
  kind: "cash";
}

interface PayPal {
  kind: "paypal",
  email: string;
}

interface CreditCard {
  kind: "credit";
  cardNumber: string;
  securityCode: string;
}
复制代码

注意，除了必需的信息外，每种类型都有一个 kind 属性，即所谓的判别属性。这里每种状况都是字符串字面量类型。

如今定义一个 PaymentMethod 类型，它是咱们刚才定义的三种类型的并集。经过这种方式，用声明 PaymentMethod 每一个变量， 必须具备给定的三种组成类型中的一种：

type PaymentMethod = Cash | PayPal | CreditCard;
复制代码

如今咱们的类型已经就绪，来编写一个函数来接受付款方法并返回一个读得懂的话语：

function describePaymentMethod(method: PaymentMethod) {
  switch (method.kind) {
    case "cash":
      // Here, method has type Cash
      return "Cash";

    case "paypal":
      // Here, method has type PayPal
      return `PayPal (${method.email})`;

    case "credit":
      // Here, method has type CreditCard
      return `Credit card (${method.cardNumber})`;
  }
}
复制代码

首先，该函数包含的类型注释不多，method 参数仅包含一个。除此以外，函数基本是纯 ES2015 代码。

在 switch 语句的每一个 case 中，TypeScript 编译器将联合类型缩小到它的一个成员类型。例如，当匹配到 "paypal"，method 参数的类型从 PaymentMethod 缩小到 PayPal。所以，我们能够访问 email 属性，而没必要添加类型断言。

本质上，编译器跟踪程序控制流以缩小标记联合类型。除了 switch 语句以外，它还要考虑条件以及赋值和返回的影响。

function describePaymentMethod(method: PaymentMethod) {
  if (method.kind === "cash") {
    // Here, method has type Cash
    return "Cash";
  }

  // Here, method has type PayPal | CreditCard

  if (method.kind === "paypal") {
    // Here, method has type PayPal
    return `PayPal (${method.email})`;
  }

  // Here, method has type CreditCard
  return `Credit card (${method.cardNumber})`;
}
复制代码

控制流的类型分析 使得使用标记联合类型很是顺利。使用最少的 TypeScript 语法开销，咱能够编写几乎纯 JS，而且仍然能够从类型检查和代码完成中受益。

使用标记联合类型构建 Redux 操做

标记联合类型真正发挥做用的用例是在 TypeScript 应用程序中使用 Redux 时。 编写一个事例，其中包括一个模型，两个 actions 和一个 Todo 应用程序的 reducer。

如下是一个简化的 Todo 类型，它表示单个 todo。这里使用 readonly 修饰符为了防止属性被修改。

interface Todo {
  readonly text: string;
  readonly done: boolean;
}
复制代码

用户能够添加新的 todos 并切换现有 todos 的完成状态。根据这些需求，我们须要两个 Redux 操做，以下所示：

interface AddTodo {
  type: "ADD_TODO";
  text: string;
}

interface ToggleTodo {
  type: "TOGGLE_TODO";
  index: number
}
复制代码

与前面的示例同样，如今能够将Redux操做构建为应用程序支持的全部操做的联合

type ReduxAction = AddTodo | ToggleTodo;
复制代码

在本例中，type 属性充当判别属性，并遵循Redux中常见的命名模式。如今添加一个与这两个action 一块儿工做的 Reducer：

function todosReducer(
  state: ReadonlyArray<Todo> = [],
  action: ReduxAction
): ReadonlyArray<Todo> {
  switch (action.type) {
    case "ADD_TODO":
      // action has type AddTodo here
      return [...state, { text: action.text, done: false }];

    case "TOGGLE_TODO":
      // action has type ToggleTodo here
      return state.map((todo, index) => {
        if (index !== action.index) {
          return todo;
        }

        return {
          text: todo.text,
          done: !todo.done
        };
      });

    default:
      return state;
  }
}
复制代码

一样，只有函数签名包含类型注释。代码的其他部分是纯 ES2015，而不是特定于 TypeScript。

咱们遵循与前面示例相同的逻辑。基于 Redux 操做的 type 属性，咱们在不修改现有状态的状况下计算新状态。在 switch 语句的状况下，咱们能够访问特定于每一个操做类型的 text 和 index 属性，而不须要任何类型断言。

never 类型

TypeScript 2.0 引入了一个新原始类型 never。never 类型表示值的类型从不出现。具体而言，never 是永不返回函数的返回类型，也是变量在类型保护中永不为 true 的类型。

这些是 never 类型的确切特征，以下所述：

• never 是全部类型的子类型而且能够赋值给全部类型。
• 没有类型是 never 的子类型或能赋值给 never（never类型自己除外）。
• 在函数表达式或箭头函数没有返回类型注解时，若是函数没有 return 语句，或者只有 never 类型表达式的 return 语句，而且若是函数是不可执行到终点的（例如经过控制流分析决定的），则推断函数的返回类型是 never。
• 在有明确 never 返回类型注解的函数中，全部 return 语句（若是有的话）必须有 never 类型的表达式而且函数的终点必须是不可执行的。

听得云里雾里的，接下来，用几个例子来说讲 never 这位大哥。

永不返回的函数

下面是一个永不返回的函数示例：

// Type () => never
const sing = function() {
  while (true) {
    console.log("我就是不返回值，怎么滴！");
    console.log("我就是不返回值，怎么滴！");
    console.log("我就是不返回值，怎么滴！");
    console.log("我就是不返回值，怎么滴！");
    console.log("我就是不返回值，怎么滴！");
    console.log("我就是不返回值，怎么滴！");
  }
}
复制代码

该函数由一个不包含 break 或 return 语句的无限循环组成，因此没法跳出循环。所以，推断函数的返回类型是 never。

相似地，下面函数的返回类型被推断为 never

// Type (message: string) => never
const failwith = (message: string) => {
  throw new Error(message);
};
复制代码

TypeScript 推断出 never 类型，由于该函数既没有返回类型注释，也没有可到达的端点(由控制流分析决定)。

不可能有该类型的变量

另外一种状况是，never 类型被推断为从不为 ture。在下面的示例中，咱们检查 value 参数是否同时是字符串和数字，这是不可能的。

function impossibleTypeGuard(value: any) {
  if (
    typeof value === "string" &&
    typeof value === "number"
  ) {
    value; // Type never
  }
}
复制代码

这个例子显然是过于做，来看一个更实际的用例。下面的示例展现了 TypeScript 的控制流分析缩小了类型守卫下变量的联合类型。直观地说，类型检查器知道，一旦我们检查了 value 是字符串，它就不能是数字，反之亦然

function controlFlowAnalysisWithNever(
  value: string | number
) {
  if (typeof value === "string") {
    value; // Type string
  } else if (typeof value === "number") {
    value; // Type number
  } else {
    value; // Type never
  }
}
复制代码

注意，在最后一个 else 分支中，value 既不能是字符串，也不能是数字。在这种状况下，TypeScript 推断出 never 类型，由于我们已经将 value 参数注解为类型为 string | number，也就是说，除了string 或 number, value 参数不可能有其余类型。

一旦控制流分析排除了 string 和 number 做为 value 类型的候选项，类型检查器就推断出never 类型，这是唯一剩下的可能性。可是，我们也就不能对 value 作任何有用的事情，由于它的类型是 never，因此我们的编辑器工具不会显示自动显示提示该值有哪些方法或者属性可用。

never 和 void 之间的区别

你可能会问，为何 TypeScript 已经有一个 void 类型为啥还须要 never 类型。虽然这二者看起来很类似，但它们是两个不一样的概念：

没有显式返回值的函数将隐式返回 undefined 。虽然咱们一般会说这样的函数“不返回任何东西”，但它会返回。在这些状况下，咱们一般忽略返回值。这样的函数在 TypeScript 中被推断为有一个 void 返回类型。

具备 never 返回类型的函数永不返回。它也不返回 undefined。该函数没有正常的完成，这意味着它会抛出一个错误，或者根本不会完成运行。

函数声明的类型推断

关于函数声明的返回类型推断有一个小问题。我们前面列出的几条 never 特征，你会发现下面这句话：

在函数表达式或箭头函数没有返回类型注解时，若是函数没有return语句，或者只有never类型表达式的return语句，而且若是函数是不可执行到终点的（例如经过控制流分析决定的），则推断函数的返回类型是never。

它提到了函数表达式和箭头函数，但没有提到函数声明。也就是说，为函数表达式推断的返回类型可能与为函数声明推断的返回类型不一样：

// Return type: void
function failwith1(message: string) {
  throw new Error(message);
}

// Return type: never
const failwith2 = function(message: string) {
  throw new Error(message);
};
复制代码

这种行为的缘由是向后兼容性，以下所述。若是但愿函数声明的返回类型 never ，则能够对其进行显式注释：

function failwith1(message: string): never {
  throw new Error(message);
}
复制代码

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：

mariusschulz.com/blog/tagged…

mariusschulz.com/blog/the-ne…

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

github.com/qq449245884…

由于篇幅的限制，今天的分享只到这里。若是你们想了解更多的内容的话，能够去扫一扫每篇文章最下面的二维码，而后关注我们的微信公众号，了解更多的资讯和有价值的内容。

每次整理文章，通常都到2点才睡觉，一周4次左右，挺苦的，还望支持，给点鼓励