Day 9 进阶型别 Part - 2

今天要来介绍 Discriminated Union、Type casting、Index properties。

Discriminated Union 可以为 Union 型别做出更多的判断，针对不同的物件可以赋予一个同样名称的属性，然後给予不同的值来辨别各个物件：

interface Bicycle {
  type: 'bicycle';
  bicycleSpeed: number;
}

interface Motobike {
  type: 'motobike';
  motobikeSpeed: number;
}

type Transportation = Bicycle | Motobike;

function moveTransportation(transpotation: Transportation) {
  let speed;
  switch (transpotation.type) {
    case 'bicycle':
      speed = transpotation.bicycleSpeed;
      break;
    case 'motobike':
      speed = transpotation.motobikeSpeed;
  }
  console.log('Moving at speed: ' + speed);
}

这边看到在两个 interface 都定义了 type，这样就能够更准确的在 function 定义要使用那一个 interface，除了用 switch 判断之外也能用 if 来判断。

Type casting 会用在选取 DOM 物件上面，比如说当选取了 Input 物件时，TypeScript 没办法辨别它是 Input 物件，只会单纯的认为它是一个 HTML 的 element，这时如果想要为 Input 设置 value 的时候就会报错，因为 TypeScript 不确定它有没有 value 这个属性：

这时候就能够使用 Type casting 来告诉 TypeScript 选取的 DOM 物件到底是什麽东西，有两种写法，分别是使用 <> 以及 as 关键字：

Index properties 是在基於 TypeScript 的规则上能够写出更加弹性的程序码，通常运用在定义物件上：

interface ErrorContainer { // { email: 'Not a valid email', username: 'Must start with a character!' }
  [prop: string]: string;
}

const errorBag: ErrorContainer = {
  email: 'Not a valid email!',
  username: 'Must start with a capital character!'
}

如果不确定物件属性的数量，但是已经预知它 key value 的结构会一致，那就可以使用上面的方式分别定义 key 的型别以及 value 的型别，这样在定义物件时，就可以不限制属性的数量来增加或删除了。

今天的学习笔记就到这边，感谢阅读。：）