上一篇文章总结了 TypeScript的类型注解，这一篇来聊聊同样重要的函数和类

函数

以下申明了一个函数类型，通过type来定义类型别名，void 示意没有返回值

type fnType = () => void;
作为参数

函数能够作为参数，传递到另一个函数中

type fnType = () => void;function foo(fn: fnType) {  fn();}function bar() {  console.log("bar");}foo(bar);      // bar

与js代码不同的点在于传入的参数须要定义类型注解

定义函数

定义函数的时候，须要给入参指定类型注解，返回值如果能够自行推导进去，也能够不写，如 add 和 minus 函数，然而作为参数时，是必须要写的，如 calc 函数中的入参 fn

function add(num1: number, num2: number): number {  return num1 + num2;}function minus(num1: number, num2: number): number {  return num1 - num2;}function calc(  num1: number,  num2: number,  fn: (num1: number, num2: number) => void) {  console.log(fn(num1, num2));}calc(30, 20, add);      // 50calc(30, 20, minus);      // 10
函数参数的类型

ts中函数会规定参数的类型和个数，当个数不确定时，能够应用可选类型、残余参数、默认值

可选类型
可选类型相当于该定义的类型和undefined的联结类型，所以参数有三种抉择、传入该类型、不传或者undefined

function foo(x: number, y?: number) {  console.log(x, y);}foo(1, 2);      // 1 2foo(3);      // 3 undefinedfoo(4, undefined);      // 4 undefined

参数默认值
参数设置了默认值就使之称为了可选类型，不过有默认值的参数最好放在必传参数前面

function baz(x: number = 20, y: number) {  console.log(x, y);}baz(10, 20);      // 10 20baz(undefined, 20);      // 20 20

残余参数
残余参数要放在必传参数之后

function sum(num: number, ...args: number[]) {  console.log(num, args);}sum(10);      // 10 []sum(10, 20);      // 10 [20]sum(10, 20, 30);      // 10 [20, 30]
this的默认推导

在对象的办法中定义的this，ts是能够主动推导的，然而独立函数中的this，是推导不进去的。

必须要在独立函数中定义this的类型

type ThisType = { name: string };const eating = function (this: ThisType) {  console.log(this.name + " eating~");};const person = {  name: "kiki",  eating,};person.eating()
函数重载

函数重载指的是函数名雷同，参数个数或者类型不同，所定义的多个解决办法。

比方须要对字符串拼接或者数字求和操作，尽管咱们晓得 + 号能够用在字符串和数字上，然而在类型检测严格的ts代码中，这样写编译是不通过的，须要应用【类型放大】，放大类型的判断，再进行解决。

通过联结类型，参数组合的可能性越多，须要越多的if语句来进行判断，并且函数的返回值类型也是未知的，在这种状况下能够应用【函数重载】

在ts中，定义函数名和参数类型的重载函数，再通过实现函数来定义具体实现。 会依据数据类型在重载函数中调用，再执行实现函数的代码。

function add(x: number, y: number): number;function add(x: string, y: string): string;function add(x: any, y: any) {  return x + y;}console.log(add(1, 2));console.log(add("a", "b"));

如果传递的参数与重载函数中定义参数不同，是无奈通过编译的。

类

初始化

类中定义的变量须要初始化，能够在定义类的时候就赋值或者通过constructor来操作

class Person {  name: string;  age: number;  constructor(name: string, age: number) {    this.name = name;    this.age = age;  }}const person = new Person("alice", 20);
继承

ts和js中统一，都是通过 extends 实现继承，应用父级参数和办法时应用 super 关键字。

class Person {  name: string;  age: number;  constructor(name: string, age: number) {    this.name = name;    this.age = age;  }}class Student extends Person {  sno: number;  constructor(name: string, age: number, sno: number) {    super(name, age);    this.sno = sno;  }}const student = new Student("alice", 20, 1);
多态

应用多态能够写出更加具备通用性的代码，如果想要实现多态首先得有继承，并且父类援用指向子类对象。

class Animal {  action() {    console.log("animal action");  }}class Dog extends Animal {  action() {    console.log("dog running");  }}class Fish extends Animal {  action() {    console.log("fish swimming");  }}function doAction(animals: Animal[]) {  animals.forEach((animal) => {    animal.action();  });}doAction([new Dog()]);doAction([new Dog(), new Fish()]);doAction([new Dog(), new Fish(), new Animal()]);

这里相当于 const animal1: Animal = new Dog() ，看起来是 Animal 对象，其实是 Dog 对象，这里的父类援用指向的是子类对象，所以最初执行的是 Dog 对象的办法

成员修饰符

成员修饰符有以下三种

  • public 示意共有的，任何中央都可见，当没有定义成员修饰符时，默认为public
  • private 公有的，只有类中可能拜访到
  • protected 被爱护的，示意类本身和子类能够拜访到

public

class Person {  public username: string = "alice";  getName() {    return this.username;  }}const person = new Person();console.log(person.username);

private
通过private润饰的变量，在实例对象上也是不可拜访的。

protected
通过protected润饰的变量，在实例对象上也是不可拜访的。

readonly

readonly示意该属性只读，初始化了之后就不能以任何形式批改，无论是在类外部，还是批改实例对象，但当它是一个对象时，只有不扭转它的内存地址，批改对象的属性是能够的。

拜访器

拜访器给公有属性提供get/set办法，让咱们在类内部获取/批改公有属性

class Person {  private _name: string;  constructor(newName: string) {    this._name = newName;  }  get name() {    return this._name;  }  set name(newName) {    if (newName) this._name = newName;  }}const person = new Person("alice");console.log(person.name);person.name = "kiki";console.log(person.name);person.name = "";console.log(person.name);

通过get/set属性来批改公有属性能够做到拦挡/判断的作用

动态成员

动态成员通过 static 关键字来定义，通过 static 定义的属性，是定义在类本身的，只能通过本人拜访，在类外部和实例对象都是无法访问到的。

抽象类

在定义很多通用的调用接口时，咱们通常会让调用者传入父类，通过多态来实现更加灵便的调用形式。

然而，父类自身可能并不需要对某些办法进行具体的实现，所以父类中定义的办法, 咱们能够定义为形象办法。

abstract class Shape {  abstract getArea(): void;}class Circle extends Shape {  private radius: number;  constructor(radius: number) {    super();    this.radius = radius;  }  getArea() {    return this.radius * this.radius * 3.14;  }}class Rectangle extends Shape {  private width: number;  private height: number;  constructor(width: number, height: number) {    super();    this.width = width;    this.height = height;  }  getArea() {    return this.width * this.height;  }}function calcArea(shape: Shape) {  return shape.getArea();}console.log(calcArea(new Circle(3)));console.log(calcArea(new Rectangle(2, 6)));

形象办法和办法通过 abstract 来润饰，并且抽象类定义时有两条规定：

  • 形象办法必须要在子类实现
  • 抽象类是不能被实例化的

类的类型

类自身也是能够作为一种数据类型的，能够用作类型注解。

class Person {  name: string = "alice";  eating() {}}const person: Person = {  name: "kiki",  eating() {    console.log("i am eating");  },};function printPerson(person: Person) {  console.log(person.name);}printPerson(new Person());printPerson(person);printPerson({ name: "macsu", eating() {} });

只有合乎类的格局，就能够应用类的类型

函数和类在JS和TS中都是至关重要的，能够帮忙开发者更好标准开发时的代码，缩小线上故障~

以上就是对于TypeScript函数和类的内容，对于js和ts，还有很多须要开发者把握的中央，能够看看我写的其余博文，继续更新中~