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ù)和默認(rèn)參數(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ù)都是可選的，可傳遞也可不傳遞，如果不傳遞的時候，它將是默認(rèn)的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)默認(rèn)參數(shù)與JS實現(xiàn)默認(rè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)文章希望大家以后多多支持腳本之家！
- 使用?TypeScript?開發(fā)?React?函數(shù)式組件
- TypeScript?泛型重載函數(shù)的使用方式
- TypeScript防抖節(jié)流函數(shù)示例詳解
- TypeScript函數(shù)和類型斷言實例詳解
- Typescript 實現(xiàn)函數(shù)重載的方式
- Typescript 函數(shù)重載的實現(xiàn)
- Typescript中函數(shù)類型及示例詳解
- TypeScript使用函數(shù)重載確定返回類型的實現(xiàn)方法
- 如何在TypeScript中使用函數(shù)
- TypeScript中的函數(shù)重載示例分析
- TypeScript中使用回調(diào)函數(shù)的實現(xiàn)
相關(guān)文章
js中flexible.js實現(xiàn)淘寶彈性布局方案
這篇文章主要為大家詳細(xì)介紹了js中flexible.js實現(xiàn)淘寶彈性布局方案，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
TypeScript?背后的結(jié)構(gòu)化類型系統(tǒng)原理詳解
這篇文章主要為大家介紹了TypeScript?背后的結(jié)構(gòu)化類型系統(tǒng)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了js在IE與FF之間的區(qū)別。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
Javascript?、Vue禁止鼠標(biāo)右鍵點擊事件實例
這篇文章主要給大家介紹了關(guān)于Javascript?、Vue禁止鼠標(biāo)右鍵點擊事件的相關(guān)資料,禁止右鍵的原理是通過JavaScript阻止瀏覽器右鍵事件的默認(rèn)行為,從而達(dá)到禁止右鍵的效果,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
我們知道，數(shù)組的sort方法可以對數(shù)組元素進(jìn)行排序，默認(rèn)是按ASCII字母表順序排序。如果要根據(jù)其他的順序排序就需要為sort方法提供一個比較函數(shù)作為參數(shù)。這里講的就是如何寫這個比較函數(shù)。2010-07-07
Javascript計算時間差函數(shù),獲得時間差,時間格式為 年-月-日 小時:分鐘:秒 或者 年/月/日 小時：分鐘：秒。2013-10-10
css的定位設(shè)置代碼2008-12-12
JavaScript實現(xiàn)設(shè)計模式中的單例模式的一些技巧總結(jié)
單例模式是JavaScript項目中最常用的設(shè)計模式之一,下面羅列了JavaScript實現(xiàn)設(shè)計模式中的單例模式的一些技巧總結(jié),包括惰性加載與分支技術(shù)等,需要的朋友可以參考下.2016-05-05
這篇文章主要為大家詳細(xì)介紹了原生js驗證簡潔美觀注冊登錄頁面的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
ES6提供了更接近面向?qū)ο?注意:javascript本質(zhì)上是基于對象的語言)語言的寫法,引入了Class(類)這個概念,作為對象的模板,下面這篇文章主要給大家介紹了關(guān)于JavaScript ES6中class定義類的相關(guān)資料,需要的朋友可以參考下2022-11-11