[Day21] Conditional Chains

虽然昨天说 TypeScript 已经差不多，但其实还有一个（或一些？）还没写到。我们来看一段程序码：

上面这个是在 React 中的一段型别定义，今天没有要细部看里面的每个部分，而是着重在 Day08 时提到的 Conditional Type 的部分，通常当有多个条件判断 if...else if ... else if ... else 的时候，为了避免难以阅读，我们不会用三元运算子这样的写法，可能会改用 switch 等其他写法，然而在 TypeScript 中，要表达条件式没有其他的方法，还是只能透过三元运算子，所以你有时会看到上面这种排列，这种串连 ? : 的写法称作 Conditional Chains。

Conditional Chains

实际上 Conditional Chains 并不是 TypeScript 特有的东西，只是一般有其他选择的情况下（例如，JavaScript）我们不会这样写。虽然第一眼看到时头很痛，但其实如果 Conditional Chain 有适当排列的话，并没有想像的这麽难懂。

在 MDN 中提供了 Conditional Chains 很好的范例：

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator#conditional_chains

function example(…) {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

// Equivalent to:

function example(…) {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

对应着刚刚看到的那段原始码，就可以发现：

它其实是由三个条件判断是所组成。也就是：

if C extends { propTypes, defaultProps } ... Defaultize ... 
else if C extends { propTypes } ... MergePropTypes ...
else if C extends { defaultProps } ... Defaultize
else P

这里在做的事情，其实就是判断这个泛型 C 是同时带有 propTypes 和 defaultProps，或只有带有其中之一的情况，分别要回传不同的型别。这里你也可以看到笔者曾在 Day10 提到的，在使用 Conditional Types 时，还可以使用 infer 来取出对应的型别使用。

虽然我们单从这里可能还没有办法完全理解这段 Utility Types 做了什麽，但至少我们大概可以了解在不同的条件下，它会在呼叫不同的 Utility Types 来回传不同的型别。

Nested Conditional Chains

如果是像上面那种单纯的 Conditional Chains 还算好理解，但有些时候还会有 nested 的 conditional chains，这时候缩排就又显得更重要了，例如：

function example(…) {
    if (condition1) { 
      if (condition1_1) {
	      return value1;        
      } else {
        return value1_1;
      }
    } else if (condition2) {
      return value2;
    } else { 
      return value4;
    }
}

写成三元运算子就会像这样：

function example() {
  return condition1
    ? condition1_1
      ? 'value1' 
      : 'value1_1'
    : condition2
    ? 'value2' 
    : 'value4';
}

我知道有点吓人，第一眼看到有点吓人，但在 TypeScript 中因为没有 if 或 switch 这种关键字，所以最好的方式就是透过良好的缩排来帮助阅读。

但真的还是很不好阅读就是...

参考资料

• Conditional Chains @ MDN