摘要:類型聲明中的函數定義,需要聲明參數和返回值的類型。其中隱藏有一個點類型推斷,箭頭函數沒有聲明返回值類型,這里編譯器不會報錯,因為它可以推斷出返回值類型。
引言
TypeScript中的函數和JavaScript中的函數,和其他特性相比,是相差不大的。
這里會補充一點進階知識。
下面列舉一些TypeScript中函數相關的知識點。
類型聲明TypeScript中的函數定義,需要聲明參數和返回值的類型。
// function add function add(x: number, y: number): number { return x + y; } // arrow funtion add const add = (x: number, y: number) => x + y;
上面是兩種基本用法:普通函數定義、箭頭函數定義。
其中隱藏有一個點:類型推斷,箭頭函數沒有聲明返回值類型,這里編譯器不會報錯,因為它可以推斷出返回值類型。這個特性,在數據類型學習的時候也接觸過,規則也是類似的:能推斷出類型的,不需要顯示聲明。
這兩個特性實際使用的時候是很有用的,很清晰,也省掉不少代碼。
// function log function myLog(message: string, level: ("info" | "warn" | "error") = "info", prefix?: string): void { // todo, logging }
這里:
level參數是有一個默認值的
prefix參數是可選的
注意一點:可選參數必須放最后
剩余參數剩余參數就是,剩余的其他參數,這里用到了結構,看示例。
function myCallback(status: boolean, ...restData: any[]) { console.log(`${status}: ${restData.join()}`); } myCallback(false); myCallback(true, "完成一個"); myCallback(true, "完成第一個", "完成第二個");
剩余參數使用起來非常靈活。
進階知識點 this指向JavaScript中的this是個入門的難點,JavaScript函數的this是和調用上下文直接相關的,和定義不相關,所以很容易出現this指向和預期不一致的問題。
目前有幾種解決方案:this綁定、箭頭函數、閉包。
箭頭函數箭頭函數的出現,可以緩解了這個難題。箭頭函數中的this,是和定義的上下文相關(底層是利用閉包實現的),如下例:
const myLottery = { prizes: ["pen", "pencil", "notebook", "dictionary"], getDraw: function() { return (name: string) => { const result = Math.floor(Math.random() * 4); return `Bingo, ${name}, you win the ${this.prizes[result]}!`; } } } const myDraw = myLottery.getDraw(); console.log(myDraw("Tom"));閉包實現
閉包方案就是在函數上下文中把this保存在變量中。
... getDraw: function() { const _this = this; return function (name: string) { const result = Math.floor(Math.random() * 4); return `Bingo, ${name}, you win the ${_this.prizes[result]}!`; } } ...bind綁定
bind綁定在TypeScript里面會麻煩一點,需要聲明this類型,否則編譯不過,提示this類型不確定。
interface Lottery { prizes: string[]; getDraw(): {(name: string): string}; } const myLottery: Lottery = { prizes: ["pen", "pencil", "notebook", "dictionary"], getDraw: function() { return function (this: Lottery, name: string) { const result = Math.floor(Math.random() * 4); return `Bingo, ${name}, you win the ${this.prizes[result]}!`; }.bind(this); } } const myDraw = myLottery.getDraw(); console.log(myDraw("Tom"));函數重載
TypeScript的重載,我是感覺有點牽強的,如下示例:
function myAdd(x: number, y: number): number; function myAdd(x: string, y: string): string; function myAdd(x, y): any { if (typeof x === "number" && typeof y === "number") { return x + y; } else if (typeof x === "string" && typeof y === "string") { return x + y; } } myAdd(1, 2); myAdd("Hello", "world");
這種實現,其實就是動態參數的分支處理,好處是代碼提示比較友好,能識別出來重載。
無法實現類似靜態語言的重載的原因之前也提過:靜態語言,如Java,函數重載,是生成了多個不同名的函數,同時使用的地方也會被更新成對應的函數名。TypeScript要兼容JavaScript,這個就無法實現。高階函數
高階函數聽起來很高大上,其實概念并不難:參數是函數或返回值是函數的函數。
我們接觸比較多的比如,數組內置的map方法。
// 數組元素自增 let arr = [1, 2, 3]; // 傳統方式 for(let i=0; i < arr.length; i++) { arr[i]++; } // map arr = arr.map(function(item) { return item + 1; }); // 結合箭頭函數 arr = arr.map(item => item + 1);
下面再學一個復雜一點的案例,前置處理器。比如,我們要在請求數據之前,記錄一些日志。
interface Request { (url: string, options: {[key: string]: any}): Promise; } function withLog(func: Request): Request { return function(url: string, options: {[key: string]: any}) { console.log("request"); return func(url, options); }; } function myRequest(url: string, options: {[key: string]: any}) { return new Promise(function(resolve) { setTimeout(() => { resolve("completed!") }, 1000); }); } withLog(myRequest)("/a", {method: "post"}).then(val => { console.log(val); })
上述方案就是把請求函數通過另外一個函數包裝成一個新的函數。
再復雜一點,像這樣,參數是函數,返回值也是函數的,是可以無限嵌套的,每嵌套一次,它就多了一個功能。這在很多框架里面特別常見,用于抽象和解耦。
function withLog2(func: Request): Request { return function(url: string, options: {[key: string]: any}) { return func(url, options).then(val => { return `[${val}]`; }); }; } withLog2(withLog(myRequest))("/a", {method: "post"}).then(val => { console.log(val); })
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105956.html
摘要:學習之路學習之路安裝環境起步開發工具自動編譯文件中的數據類型中的函數中類的定義繼承中的繼承中的繼承類的靜態屬性和靜態方法類的多態的抽象類中的接口中的泛型學習之路安裝環境查看版本起步新建通過命令編譯此時路徑下 ...
摘要:想學好前端,真的要主動,然后對所有的英文文檔耐心一點。在年月日,國際組織發布了的第六版,該版本正式名稱為,但通常被稱為或者。自此,每年發布一次新標準。但保留了用于依賴注入的構造函數參數類型。必須在構造函數中聲明屬性,而不是在類的代碼體中。 從 TypeScript 到 ES6 到 ES5 在我初學前端的很長一段時間,不愿意碰git,不愿意碰框架,總是嫌麻煩,連ES6也沒有怎么去弄明白...
摘要:最近開始用來寫項目,寫起來還是挺順暢的。和在類型上的區別被稱作是一種動態腳本語言,其中有一個被瘋狂詬病的特性缺乏靜態強類型。當然,這是可以的,此時變量的類型已經發生改變字符串數字。 最近開始用 TypeScript 來寫項目,寫起來還是挺順暢的。其實學習 TypeScript,看它的官方文檔就夠了,剩下就是 coding 了。我這里主要是我在 TypeScript 學習過程中記錄的一些...
摘要:本套課程包含兩大部分,第一部分是基礎部分,也是重要部分,參考官方文檔結構,針對內容之間的關聯性和前后順序進行合理調整。 showImg(https://segmentfault.com/img/bVbpBA0?w=1460&h=400); 講師簡介: iview 核心開發者,iview-admin 作者,百萬級虛擬渲染表格組件 vue-bigdata-table 作者。目前就職于知名互...
閱讀 2395·2021-11-11 16:54
閱讀 1204·2021-09-22 15:23
閱讀 3644·2021-09-07 09:59
閱讀 1990·2021-09-02 15:41
閱讀 3283·2021-08-17 10:13
閱讀 3037·2019-08-30 15:53
閱讀 1235·2019-08-30 13:57
閱讀 1210·2019-08-29 15:16