TypeScript基本知識點整理——函數

 函數

1. 函數定義

定義函數有函數聲明和函數表達式兩種形式。定義函數的參數和返回值可以指定其類型;當調用函數時,傳入參數類型必須與定義函數參數類型保持一致。

函數聲明定義

function f(age:number) : string {    return `找到了${age}的小哥哥`;}let age : number = 22;let res : string = f(age);

函數表達式定義

let f1 = (age:number) : string => {    return `找到了${age}的小哥哥`;}let age1 :number = 21;let res1 : string = f1(age1);

注意:表達式定義完以後,必須調用函數

函數表達式還有一種寫法: 函數表達式:指定變量fn的類型

注意不要混淆了 TypeScript 中的 => 和 ES6 中的 =>

在 TypeScript 的類型定義中,=> 用來表示函數的定義,左邊是輸入類型,需要用括號括起來,右邊是輸出類型。

/ let fn: (x: Type, y: Type) => Type = (x, y) => {} //例子var run3: (x: number, y: number) => string = function(x: number, y: number): string{    return 'run3';}console.log(run3(1, 2))  //當給變量run3指定類型的時候,應該是函數的參數和返回值的約束類型。如果用後面學到的ts類型推論,可以簡寫爲: var run4: (x: number, y: number) => string = function(x, y){ // 類型推論可以確定函數的參數和返回值類型,也就可以省略類型指定    return 'run4';}console.log(run4(1, 2))

2. 函數沒有返回值可以使用void類型值定返回值

function  f3() : void {    console.log('沒有返回值')}f3()

3. 可選參數的函數

注意:可選參數一定要放在參數的最後面

function f4(age:number, cm?:number) : string {//cm爲可選參數,可傳可不傳    if (cm) {        return `可選參數------身高爲${cm}釐米`;    } else {        return `可選參數-----年齡${age}歲`    }}console.log(f4(12))console.log(f4(24, 175))

4. 有默認值參數的函數

注意:ts會將添加了默認值的參數識別爲可選參數,有默認值的參數的位置不受【可選參數必須放在後面】的限制

function f5(age:number, cm:number = 188) : string {    return `默認參數----年齡爲${age}歲---身高爲${cm}cm`}console.log(f5(25))

5. 剩餘參數的函數

//當有很多參數的時候,或者參數個數不確定,可以用三點運算符function f6(...rest:number[]) : number[] {    return [...rest];}console.log(f6(1,2,3,4,5,6,7,8,9)) function f7(a:number, b:number, ...rest:number[]) : number[] {    return [a, b, ...rest]} console.log(f7(100,200,1,2,3,4,5,6))

6. 接口中的函數

第一種寫法

interface int1 {    say (age:number) : void  //抽象方法}

第二種寫法

interface int2 {    say : (age:number) => void  //抽象方法}

7.函數的重載

注意:

先聲明所有方法重載的定義,不包含方法的實現

再聲明一個參數爲any類型的重載方法

實現any類型的方法並通過參數類型(和返回類型)不同來實現重載

typescript中的重載:通過爲同一個函數提供多個函數類型定義來實現多種功能的目的

TypeScript 會優先從最前面的函數定義開始匹配,所以多個函數定義如果有包含關係,需要優先把精確的定義寫在前面。

function f1(x: number, y: number): number;function f1(x: string, y: string): string; // 上面定義函數的格式,下面定義函數的具體實現function f1(x: any, y: any): any {    return x + y;} f1(1, 2);f1('a', 'b');

總結

      學過java的同學可能會感覺到有內味了~。Ts函數和Java的方法有這很相似的地方。

    下一篇文章會出關於TypeScript的類的知識點,敬請期待。

 

 

掃描關注公衆號,更多前端技能Get

 

你點的每個贊,我都認真當成了喜歡

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章