Day11:【TypeScript 学起来】只有 TS 才有的型别 : Union Types(联合型别) / Intersection types (交集型别)

四个工程师一起坐上了车，发现车子发不动了。
机械工程师说：看来是引擎出问题了。
电机工程师说：看来车上的电子系统出问题了。
化学工程师说：可能是汽油内容物比例有问题。
资讯工程师说：我们试试看下车再上车一次好不好。

XDDDD 笑屎

今天来笔记Union Types(联合型别) 及 Intersection types (交叉型别)。

Union Types(联合型别)

联合型别（Union Types）表示取值可以为多种型别中的其中一种。跟JavaScript || or 的概念是一样的。

✅ 联合型别使用 | 分隔每个型别。允许 id 的型别是 string 或者 number，但是不能是其他型别。

function printId(id: number | string) {
  console.log("Your ID is: " + id);
}
printId(101); //ok
printId("202"); //ok

❌ 若使用 boolean 值，就会报错。


// Error
printId({ myID: 22342 });
// error : Argument of type '{ myID: number; }' is not assignable to parameter of type 'string | number'.Type '{ myID: number; }' is not assignable to type 'number'.

存取联合型别的属性或方法

当 TypeScript 不确定一个联合型别的变数到底是哪个型别的时候，我们只能存取此联合型别的所有型别里共有的属性或方法。

✅ 使用两种型别都有的属性时，没问题。

function printId(id: number | string) {
    console.log(id.toString());
}

❌ 如果使用不同属性，则会报错， toUpperCase 属性无法适用於数值型别。

function printId(id: number | string) {
  console.log(id.toUpperCase());
}

//error: Property 'toUpperCase' does not exist on type 'string | number'.
//Property 'toUpperCase' does not exist on type 'number'.

✅ 若要解决不同情境，可以使用typeof去做判断。官网将这些情况限缩某个具体型别上的行为，称作为 Narrowing。

function printId2(id: number | string) {
  if (typeof id === "string") {
    //型别为字串才 toUpperCase
    console.log(id.toUpperCase());
  } else {
    //其他自动判定为 number 型别
    console.log(id);
  }
}
printId2("ABC");

✅ 若是阵列型别与其他型别联合，可以使用Array.isArray()来检查传入的值是否为一个 Array。

function welcomePeople(x: string[] | string) {
    if (Array.isArray(x)) {
      console.log("Hello, " + x.join(" and "));
    } else {
      console.log("Welcome lone traveler " + x);
    }
}
welcomePeople(["a","b","c"]);

Intersection Types (交集型别)

交集型别(Intersection Type) 跟 JavaScript 的 && and 概念相同，使用& 表示其定义的值都必须同时符合两种型别。

❌ 以下面的例子，Intersection 在 primitive type（原始型别）中使用，是无法同时满足两种型别的，会被认定为 never 型别。

function printId(id: number & string) {
  console.log("Your ID is: " + id);
}
printId(101); //error
printId("202"); //error

✅ 主要用来组合现有的型别，若都没符合两种型别，则会报错提醒。而且像下面的例子，ColorfulCircle 需满足 Colorful 及 Circle 型别。而且 TS 很聪明，radius写错字写成 raidus，complier 也会报错提醒，真心觉得很棒！

interface Colorful {
  color: string;
}

interface Circle {
  radius: number;
}

//用type aliases 宣告 ColorfulCircle 型别，需满足 Colorful 及 Circle 型别
type ColorfulCircle = Colorful & Circle;

//带入的参数需满足 ColorfulCircle 型别
function draw(circle: ColorfulCircle) {
  console.log(`Color was ${circle.color}`);
  console.log(`Radius was ${circle.radius}`);
}

draw({ color: "blue", radius: 42 });// ok
draw({ color: "red", raidus: 42 }); //error