Day 10 进阶型别 Part - 3

今天要介绍的是 Function Overloads、Optional chaining、Nullish Coalescing

Function Overloads 提供了不同种呼叫 function 的方法，在原本定义好的 function 的引数可能带有 Union 型别，意味着那些引数会有两种以上的型别，这时就能够用 function overloads 再去定义呼叫 function 时的架构以确保传进去的参数能够更让 TypeScript 辨识。

从以上图片可以看到，虽然传入的参数是字串，但却不能呼叫字串的方法 split()，这是因为 TypeScript 没办法辨识 Combinable 这个型别到底有没有 split() 方法，要解决这个问题的话可以这麽做：

使用 function overloads 定义会传进去的参数型别，就能够顺利地呼叫字串的 split() 方法了！

Optional chaining 在比如说拿到从後端来的资料时，有时无法确定是否会有资料或是是 null、undefined 等等，为了避免在 runtime 的时候造成错误，因此可以使用 optional chaining 来先行判断该属性是否有存在，写法是在物件跟属性名称後面加上问号，如果存在的话就继续往下取值，有点像 if 判断或是 && 运算子，但是可以让程序码更加简洁。

const fetchUserData = {
  id: 'u1',
  name: 'Claire',
  job: { title: 'FE developer', description: 'Make websites' }
}

console.log(fetchUserData?.job?.title)

延伸下来继续介绍 Nullish Coalescing，在特别想要处理 null 跟 undefined 时就可以派上用场。

const userInput = ''
const storeData = userInput ?? 'Default'

写法是两个问号，这样可以在 userInput 是 null 跟 undefined 时才会跑到後面的 'Default'，而不会像以前如果是用 || 来做判断时，'' 跟 0 也会被当成 falsy 的值而跑到後面的条件式。

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