——点击上方蓝色字体,关注我哦~——

前言: 本文章为 TypeScript 系列文章. 

旨在利用碎片时间快速入门 Typescript. 或重新温故 Typescript 查漏补缺.

在官方 api 的基础上, 加上一些日常使用的感想. 

如果感兴趣的话~ 欢迎关注, 后续持续推出文章. 

文章列表: 

• 《一》大话 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

}

简单的声明之后, 我们来看看函数声明的一些常见错误.

函数声明常见错误

必选参数不能位于可选参数后面. 可选参数必须位于所有必选参数后面. 

// 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 的一些功能特性,这个功能点非常好. 在日常使用中也特别特别多. 直接看代码. 

1、 公共，私有与受保护的修饰符. 

class Father {

   constructor() { }

   public greet() {

       return "Hello";

   }

   private hello() {

       return 'ee';

   }

   protected hi() {

       return 'ee';

   }

}

class children extends Father {

   constructor() {

       super();

   }

   test() {

       this.hello(); // 报错: 是私有成员, 不可在类外部调用

       this.hi(); // 可调用

   }

}

new children().greet()

new children().hello() // 报错: 是私有成员, 不可在类外部调用

new children().hi() //报错: 只能在子类中调用

总结以下上面的代码: 

• private 不能被子类调用, 不能在实例中访问,只能在声明类内部调用

• protected 只能在子类中调用, 不能在实例中访问

• public 都可以调用. 

tip: 在写类时, 要养成随手添加成员修饰符的习惯. 

2、存取器

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;

}());

3、静态属性

static 它是一个不用 new 就可以直接调用的方法. 

class Greeter {

   constructor() { }

   static config: string = '33';

}

Greeter.config = '3'

类常见错误

若属性在 constructor 中声明可访问性了, 则不必在下面再声明一次.

class Dog {

   constructor(public name: string) {}

   name: string; // 报错, Duplicate identifier 'name'. 重复声明

   eat() { }

}

总结

最后\

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

最后

扫描二维码

关注前端加加

我在这里等你呦~

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

原创不易，如果觉得有点用，希望可以随手转发或者”在看“，拜谢各位老铁。

点击在看