《五》大話 Typescript 函數與類

時間 2019-12-28

標籤大話 typescript 函數简体版

原文原文鏈接

前言: 本文章爲 TypeScript 系列文章. 旨在利用碎片時間快速入門 Typescript. 或從新溫故 Typescript 查漏補缺.在官方 api 的基礎上, 加上一些平常使用的感想. 若是感興趣的話~ 歡迎關注, 後續持續推出文章.前端

文章列表:typescript

目錄結構:api

函數聲明方式
函數聲明常見錯誤
函數重載
類的修飾符
類聲明常見錯誤

函數聲明方式

直入正題, 下面介紹下四種函數定義的方法: TypeScript可以根據返回語句自動推斷出返回值類型，所以咱們一般省略它。數組

直接聲明函數參數

function add(x:number, y: number) {
    return x + y;
}
複製代碼

在實際開發中, 函數調用常常會直接使用解構賦值的方式, 進而減小賦值. 這種場景的聲明方式以下:

function add({ x, y }:{x: number, y: number}) {
    return x + y;
}
add({x: 2,y: 3}) 
複製代碼

聲明剩餘參數剩餘參數在使用的時候, 實際是一個數組. 按照這個思路, 咱們只須要聲明數組格式便可. 代碼以下:

function add(...rest: number[]) {
    return rest.reduce((pre,cur) => pre+cur)
}
add(2, 3, 4, 5)
add('23',3) // 報錯, 不能是字符串
複製代碼

在沒有提供函數實現的狀況下，有如下兩種聲明函數類型的方式:

type add = (x: number, y: number) => number;
interface add {
    (x: number, y: number):number
}
複製代碼

調用以下:bash

let addFn:add  = (a, b) => {
    return a + b
}
複製代碼

函數聲明常見錯誤

必選參數不能位於可選參數後面. [題外話: 其實ts的錯誤提示特別明顯,定位問題的時候仔細看每每就能夠知道問題了]ide

// A required parameter cannot follow an optional parameter.
function add(x?: number,y: number) {
    return x + y;
} 
複製代碼

函數重載

這是一個不錯的功能. 在不少大型庫裏面均可以看到函數重載這種方式. 使用他以後, 其餘人看函數重載的個數即可知道函數裏面的全部功能以及分支. 函數重載的方式以下, ts 會從一開始查找類型, 若是匹配就返回對應類型, 若是不匹配就到下一個函數

function add(x: string, y: string): string;
function add(x: number, y: number): number;
function add(x: any, y: any): any{
    if (typeof x === 'string') {
        return 'string';
    } else if(typeof x === 'number') {
        return x + y;
    }
}
複製代碼

好比看下面的代碼: ui

從上面這塊代碼, 咱們能夠很清晰的獲得,這個函數有如下幾種調用方式:

只傳 key
傳 key, config
傳 key , fn, config

tips: 維護一個公共組件時, 可以使用這種方式讓使用者和後面維護者快速知道函數的調用方式以及函數功能.this

類的修飾符

類的修飾符擴展了原生js的一些功能特性,這個功能點很是好. 一、公共，私有與受保護的修飾符.spa

class Greeter {
    constructor(message: string) {
        this.greeting = message;
    }
    
    greeting: string;
    readonly x: number; // 只讀屬性, 不可修改
    public greet() {
        return "Hello, " + this.greeting;
    }
    private hello() {
        return 'ee';
    }
    protected hi() {
        return 'ee';
    }
}

class children extends Greeter {
    constructor(m: string) {
        super(m);
    }

    test() {
        this.hello(); // 報錯: 是私有成員, 不可在類外部調用
        this.hi(); // 可調用
    }
}
new children('333').greet()
new children('333').hello() // 報錯: 是私有成員, 不可在類外部調用
new children('333').hi() //報錯: 只能在子類中調用
複製代碼

總結如下上面的代碼:

private不能被子類調用, 不能在實例中訪問,只能在聲明類內部調用
protected 只能在子類中調用, 不能在實例中訪問
public 均可以調用.

二、存取器 TypeScript支持經過getters/setters來截取對對象成員的訪問。它能幫助你有效的控制對對象成員的訪問。

class Greeter {
    constructor(message: string) {
        this.greeting = message;
    }
    greeting: string;
    get hello() {
        return this.greeting;
    }
    set hi(x) {
        this.greeting = x;
    }
}
const x = new Greeter('eeee')
x.hi('22');
x.hello = '2' // 報錯, 不能修改
複製代碼

實際上就是使用getters/setters來截取對對象成員的訪問。解析出來的源碼以下:

var Greeter = /** @class */ (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Object.defineProperty(Greeter.prototype, "hello", {
        get: function () {
            return this.greeting;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Greeter.prototype, "hi", {
        set: function (x) {
            this.greeting = x;
        },
        enumerable: true,
        configurable: true
    });
    return Greeter;
}());
複製代碼

三、靜態屬性

static 它是一個不用 new 就能夠直接調用的方法.

class Greeter {
    constructor() {}
    static config: string = '33';
}
Greeter.config ='3'
複製代碼

類常見錯誤

若屬性在 constructor 中聲明可訪問性了, 則沒必要在下面再聲明一次.

class Dog {
    constructor(public name: string) {  
        // th.is.x = x
    }
    name: string; // 報錯, Duplicate identifier 'name'. 重複聲明
    eat() { }
}
複製代碼