iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
自我挑戰組

TypeScript 三十天學習日記系列 第 7

Day 7 Functions

今天要來對 function 來做深入一點的介紹。

如果想要把 function 存在變數裡,可以對該變數作更精確的 function 規範:

function add(n1: number, n2: number):number {
  return n1 + n2
}

function print(input1: string, n2: number) {
  console.log(input1, n2)
}

let combineValues: (a: number, b:number) => number

combineValues = add
combineValues = print

可以看到 combineValues 定義了 function 型別,然後連要接收的 function 架構也都定義好了,要接收兩個是數字的參數以及會 return 一個數字,這時可以看到第二個 combineValue 會報錯,因為跟原本定義好的不同:
https://ithelp.ithome.com.tw/upload/images/20210921/20131989bF6ug7yzIU.png

另外根據文件,當 function 沒有 return 的敘述或是不會 return 任何值時,那就代表 function return 的值是 void,因為 TypeScript 也可以為 return 的值進行型別定義:

function add(n1: number, n2: number):number {
  return n1 + n2
}

在引數括號後面的 number 就是代表這個 function 會 return 的值的型別,如果沒有特別指定的話 TypeScript 其實也會自行做 Type Inference:
https://ithelp.ithome.com.tw/upload/images/20210921/20131989JbIt79EWjG.png

void 的狀況就會變成這樣:
https://ithelp.ithome.com.tw/upload/images/20210921/20131989vVHLO4umGc.png
這邊要特別注意的是沒有 return 值的 voidundefined 是不一樣的,在 JavaScript 裡面如果想要試著拿到沒有 return 值的 function 時會拿到 undefined,但是在這邊 undefinedvoid 是完全不一樣的東西。

有一個跟 void 很像的狀況是 return 值設定成 never,我目前理解的是雖然沒有 return 值的 function 可以設定成 void,不過其實還是可以 return 值,但是 never 是絕對不會 return 任何值的,想要先暫且理解到這邊,等之後如果有更深的理解後會再回來多做說明。

今天的學習筆記就到這邊,謝謝閱讀。:)


上一篇
Day 6 基本型別 - part 3
下一篇
Day 8 進階型別 - Part 1
系列文
TypeScript 三十天學習日記24
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言