今天要來接續上一篇的函式(Function),
上篇著重JavaScript(JS),
本篇當然著重TypeScript(TS)啦,
我們繼續看下去吧。
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)又稱為Lambdas,
是ES6(ECMAScript 6,正式名稱ECMAScript 2015)版本新增到JS的新語法,
提供一個簡單的語法來定義函式。
那麼我們將上面的TS函式範例用箭頭函式來改寫看看吧,
改寫後如下,
//宣告函式
let sayHi : Function = () => {
console.log('Hi');
}
//呼叫函式
sayHello(); //'Hi'
修改方式,
將()前的function
移除,
將()後加上=>
,
就完成了喔。
剛開始看肯定不習慣,
看起來很像一堆符號連在一起,
看久了其實也是會習慣的,
也更能簡化程式碼喔。
希望這兩天大家有對**函式(Function)**有更多一些了解,
函式在開發時無論是使用JS還是TS都是是非常重要的喔,
大家要好好理解好好加油才行。