TypeScript中的函數(shù)
1.函數(shù)定義
1.1JavaScript中的函數(shù)
在學(xué)習(xí)TypeScript中的函數(shù)前我們先來回顧一下JavaScript中的函數(shù)定義常用的包含以下幾種：
第一種：使用function關(guān)鍵字聲明函數(shù)
function add1 (x, y) {
return x + y
}
第二種：使用字面量方式聲明函數(shù)
const add2 = function (x, y) {
return x + y
}
第三種：使用箭頭函數(shù)聲明函數(shù)
const add3 = (x, y) => {
return x + y
}
1.2TypeScript中的函數(shù)
TS中的函數(shù)聲明方式與JS類似，唯一不同的就是固定了參數(shù)類型了返回值類型，如果沒有返回值其返回值類型必須為void而不是留空。
接下來用 TS 的方式重新聲明以上是三個函數(shù)：
第一種：使用function關(guān)鍵字聲明函數(shù)：
/*
語法結(jié)構(gòu)如下
function 函數(shù)名(形參1: 類型, 形參2: 類型,...): 返回值類型 {
函數(shù)體
}
*/
function add4(x: number, y: number): number {
return x + y
}
第二種：使用字面量方式聲明函數(shù)
/*
語法結(jié)構(gòu)如下
const 函數(shù)名 = function (形參1: 類型, 形參2: 類型,...): 返回值類型 {
函數(shù)體
}
*/
const add5 = function (x: number, y: number): number {
return x + y
}
第三種：使用箭頭函數(shù)聲明函數(shù)
/*
語法結(jié)構(gòu)如下
const 函數(shù)名 = (形參1: 類型, 形參2: 類型,...): 返回值類型 => {
函數(shù)體
}
*/
// 3. 使用箭頭函數(shù)聲明函數(shù)
const add6 = (x: number, y: number): number => {
return x + y
}
以上就是在TS中聲明函數(shù)的方式。JS中還有一種參數(shù)解耦賦值的情況，這種在TS中怎么指定參數(shù)類型呢？示例代碼如下：
const add7 = ({ x, y }: { x: number; y: number }): number => {
return x + y
}
在TS中還有一種可讀性更高的寫法，如下所示：
const add8: (baseValue: number, increment: number) => number = function (
x: number,
y: number
): number {
return x + y
}
這種方式將函數(shù)分為兩個部分，=前面是函數(shù)的類型的返回值類型，后半部分才是函數(shù)定義的地方。
其實前半部分也就是為了增加代碼的可讀性，沒有太大的實際意義。
2.可選參數(shù)和默認參數(shù)
TypeScript 里的每個函數(shù)都是必須。這并不代表不能傳遞null和undefined作為參數(shù)，而是是否為每個參數(shù)都傳遞了值，如果不一一對應(yīng)，則會拋出異常。簡單的說就是形參個數(shù)與實參個數(shù)一致。
示例代碼如下所示：
function add(x: number, y: number): number {
return x + y
}
let result1 = add(1) // Expected 2 arguments, but got 1.
let result2 = add(1, 2)
let result3 = add(1, 2, 3) // Expected 2 arguments, but got 3
在JS中每個參數(shù)都是可選的，可傳遞也可不傳遞，如果不傳遞的時候，它將是默認的undefined 。
在TS中也是可以實現(xiàn)的，我們只需要在參數(shù)名后面添加 ?即可實現(xiàn)可選參數(shù) 的功能。
如下代碼：
// 實現(xiàn)可選參數(shù)功能
// 參數(shù)名旁加一個?即可
function add(x: number, y?: number): number {
return x + y
}
let result1 = add(1)
let result2 = add(1, 2)
// let result3 = add(1, 2, 3) // Expected 2 arguments, but got 3
如上代碼就實現(xiàn)了可選參數(shù)
在TS中實現(xiàn)默認參數(shù)與JS實現(xiàn)默認參數(shù)是相同的，只需要為其賦值即可。
示例代碼如下所示：
;(function () {
function add(x: number, y: number = 2): number {
return x + y
}
let result1 = add(1) // 3
let result2 = add(1, 2) // 3
})()
當(dāng)然，如果不為y指定類型就與JS中一樣一樣了。
3.剩余參數(shù)
所謂的剩余參數(shù)就是函數(shù)定義時需要傳遞兩個參數(shù)，而函數(shù)調(diào)用時傳遞了3個參數(shù)；此時就多余出一個參數(shù)，該參數(shù)就是剩余參數(shù)。
在 JS 中我們可以使用arguments來訪問多余傳遞的參數(shù)。那在TS中怎么訪問剩余參數(shù)呢？
實際上TS中可以將所有的參數(shù)存儲在一個變量中，該變量實際上一個解耦的一個數(shù)組。
示例代碼如下：
function fun(x: number, ...numbers: number[]): void {
console.log(numbers)
}
fun(1, 2, 3, 4) // [ 2, 3, 4 ]
到此這篇關(guān)于TypeScript中的函數(shù)的文章就介紹到這了,更多相關(guān)TypeScript函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在數(shù)組中有兩個可以用來直接排序的方法，分別是reverse（）和sort（）。下面通過本文給大家詳細介紹，對js 數(shù)組重排序相關(guān)知識感興趣的朋友一起看看吧2016-11-11
javascript制作網(wǎng)頁圖片上實現(xiàn)下雨效果
這里給大家分享的是一則使用javascript實現(xiàn)在網(wǎng)頁圖片上下雨的特效，效果非常炫酷，推薦給小伙伴們。2015-02-02
使用GruntJS構(gòu)建Web程序之構(gòu)建篇
前一篇記錄了Grunt的安裝，這篇介紹下怎么使用Gruntjs來搭建一個前端項目，然后使用grunt合并，壓縮JS文件。2014-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)京東快遞單號查詢，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JS消息彈框alert、confirm、prompt的實現(xiàn)代碼
這篇文章主要介紹了JS消息彈框alert、confirm、prompt,文中還給大家介紹了js的三大基礎(chǔ)彈框，結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
下面小編就為大家?guī)硪黄狫S字符串長度判斷,超出進行自動截取的實例(支持中文)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
下面小編就為大家?guī)硪黄猨s發(fā)送短信倒計時的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
easyui tree帶checkbox實現(xiàn)單選的簡單實例
下面小編就為大家?guī)硪黄猠asyui tree帶checkbox實現(xiàn)單選的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了通過JavaScript下載文件到本地的方法（單文件），文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細介紹了微信小程序使用二次貝塞爾曲線畫波浪，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12