iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
自我挑戰組

從新手開始TypeScript系列 第 21

Day21-TypeScript(TS)的函式(Function) Part1

  • 分享至 

  • xImage
  •  

經過前兩天的函示介紹相信大家對函式(Function)已經有一定程度的了解了吧,
那麼對於TS的函式我們就用實例來看看吧。

函式(Function)加入型別

那我們來看看TS的函式要如何寫吧,

function add(x: number, y: number): number {
    return x + y;
}

跟JS寫法很相似呢,
特別要注意的地方是,
再傳入x與y參數後方都必須加上傳入時的型別喔,
以範例來說,
傳入的兩個值只能是number型別
而且不能多也不能少,
而傳入參數的括號後方加上冒號後在加上的型別為傳出值得型別,
所以這個函式也必須回傳number型別值

那我們來看看實際的使用方式吧,

let i: number = 10;
let j: number = 20;
let m: number  = add(i, j);
console.log(m); //30

這邊定義
inumber型別,值為10
jnumber型別,值為20
接著將這兩個變數傳入上面宣告的函式add()
並請將回傳的值帶入變數m,且m為number型別
那麼此時m的值就為30 ( 因為i的10 + j的20 )。

不過其實在呼叫函式時也不需要一直加上型別標記(Type Annotation),
因為
大部分的情況下會自動推論型別,可省略Type Annotation
那麼省略後的寫法如下,

let i = 10;
let j = 20;
let n = add(i, j);
console.log(n); //30

因為這個範例都直接有明確的值帶給變數,
這些變數都能直接透過拿到的值來推論型別,
因此在這不另外再加上型別也式沒問題的喔。

今日結語

今天帶大家看看TS基本的傳入傳出函式,
會用函式後,
能做到的事情就會多很多很多喔,
大家也要動動小腦袋瓜想想能做什麼吧~
加油加油。


上一篇
Day20-JavaScript(JS)與TypeScript(TS)的函式(Function) Part2
下一篇
Day22-TypeScript(TS)的函式(Function) Part2
系列文
從新手開始TypeScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言