iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
自我挑戰組

從新手開始TypeScript系列 第 20

Day20-JavaScript(JS)與TypeScript(TS)的函式(Function) Part2

  • 分享至 

  • xImage
  •  

今天要來接續上一篇的函式(Function)
上篇著重JavaScript(JS),
本篇當然著重TypeScript(TS)啦,
我們繼續看下去吧。

TypeScript(TS)的函式(Function)

TS的函式(Function)運作方式和JS有些不同,
通常會將函式(Function)定義在類別(Class)之中,
以方法(Method)的形式存在,
透過類別將程式碼組織成容易重複使用的單位。

TS的函式型別與JS的匿名函式較為相近,
我們直接來看範例吧。

這是TS的程式碼,

//宣告函式
let sayHi : Function = function(){
    console.log('Hi');
}

//呼叫函式
sayHello();  //'Hi'

範例中宣告sayHi為Function,
是不是和JS的匿名函式很相似呢?
其實真的只差在型別上的宣告而已,
這也是TS最為重要的一部分。

接著我們再更進一步的來看看這段TS程式碼編譯後的JS程式碼吧,
結果如下,

"use strict";
//宣告函式
let sayHi = function (){
    console.log('Hi') ;
}

//呼叫函式
sayHi() ;  //'Hi'

其實就是匿名函式,給大家參考參考。

箭頭函式(Arrow Function)

箭頭函式(Arrow Function)又稱為Lambdas,
ES6(ECMAScript 6,正式名稱ECMAScript 2015)版本新增到JS的新語法,
提供一個簡單的語法來定義函式。

那麼我們將上面的TS函式範例用箭頭函式來改寫看看吧
改寫後如下,

//宣告函式
let sayHi : Function = () => {
    console.log('Hi');
}

//呼叫函式
sayHello();  //'Hi'

修改方式,
將()前的function移除,
將()後加上=>
就完成了喔。

剛開始看肯定不習慣,
看起來很像一堆符號連在一起,
看久了其實也是會習慣的,
也更能簡化程式碼喔。

今日結語

希望這兩天大家有對**函式(Function)**有更多一些了解,
函式在開發時無論是使用JS還是TS都是是非常重要的喔,
大家要好好理解好好加油才行。


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

尚未有邦友留言

立即登入留言