《五》大话 Typescript 函数与类

前言: 本文章为 TypeScript 系列文章. 旨在利用碎片时间快速入门 Typescript. 或从新温故 Typescript 查漏补缺.在官方 api 的基础上, 加上一些平常使用的感想. 若是感兴趣的话~ 欢迎关注, 后续持续推出文章.

文章列表:

• 《一》大话 TypeScript 基本类型
• 《二》大话 Typescript 枚举
• 《三》大话 Typescript 接口
• 《四》大话 Typescript 泛型
• 《五》大话 Typescript 函数与类
• 《六》大话 Typescript 类型断言

目录结构:

• 函数声明方式
• 函数声明常见错误
• 函数重载
• 类的修饰符
• 类声明常见错误

函数声明方式

直入正题, 下面介绍下四种函数定义的方法: TypeScript可以根据返回语句自动推断出返回值类型，所以咱们一般省略它。

1. 直接声明函数参数

function add(x:number, y: number) {
    return x + y;
}
复制代码

2. 在实际开发中, 函数调用常常会直接使用解构赋值的方式, 进而减小赋值. 这种场景的声明方式以下:

function add({ x, y }:{x: number, y: number}) {
    return x + y;
}
add({x: 2,y: 3}) 
复制代码

3. 声明剩余参数 剩余参数在使用的时候, 实际是一个数组. 按照这个思路, 咱们只须要声明数组格式便可. 代码以下:

function add(...rest: number[]) {
    return rest.reduce((pre,cur) => pre+cur)
}
add(2, 3, 4, 5)
add('23',3) // 报错, 不能是字符串
复制代码

4. 在没有提供函数实现的状况下，有如下两种声明函数类型的方式:

type add = (x: number, y: number) => number;
interface add {
    (x: number, y: number):number
}
复制代码

调用以下:

let addFn:add  = (a, b) => {
    return a + b
}
复制代码

函数声明常见错误

必选参数不能位于可选参数后面. [题外话: 其实ts的错误提示特别明显,定位问题的时候仔细看每每就能够知道问题了]

// 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;
    }
}
复制代码

好比看下面的代码:

从上面这块代码, 咱们能够很清晰的获得,这个函数有如下几种调用方式:

1. 只传 key
2. 传 key, config
3. 传 key , fn, config

tips: 维护一个公共组件时, 可以使用这种方式让使用者和后面维护者快速知道函数的调用方式以及函数功能.

类的修饰符

类的修饰符扩展了原生js的一些功能特性,这个功能点很是好. 一、 公共，私有与受保护的修饰符.

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() //报错: 只能在子类中调用
复制代码

总结如下上面的代码:

1. private不能被子类调用, 不能在实例中访问,只能在声明类内部调用
2. protected 只能在子类中调用, 不能在实例中访问
3. 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() { }
}
复制代码

总结

本篇文章介绍 typescript的函数和类, 类的修饰符在实际应用中有着普遍的应用,声明好一个类的私有成员, 公有成员,存取器, 可让第三方调用更为安心.函数重载对于提升可读性也提供了很大的帮助.

• 欢迎关注「前端加加」,认真学前端，作个有专业的技术人...