快捷導(dǎo)航

TypeScript中的函數(shù)和類你了解嗎

更新時(shí)間：2022年03月16日 14:56:25 作者：一顆冰淇淋

這篇文章主要為大家詳細(xì)介紹了TypeScript中的函數(shù)和類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

函數(shù)

以下聲明了一個(gè)函數(shù)類型，通過(guò)type來(lái)定義類型別名，void 表示沒(méi)有返回值

type fnType = () => void;

作為參數(shù)

函數(shù)可以作為參數(shù)，傳遞到另一個(gè)函數(shù)中

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

與js代碼不同的點(diǎn)在于傳入的參數(shù)需要定義類型注解

定義函數(shù)

定義函數(shù)的時(shí)候，需要給入?yún)⒅付愋妥⒔?，返回值如果可以自行推?dǎo)出來(lái)，也可以不寫(xiě)，如 add 和 minus 函數(shù)，但是作為參數(shù)時(shí)，是必須要寫(xiě)的，如 calc 函數(shù)中的入?yún)?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);      // 50
calc(30, 20, minus);      // 10

函數(shù)參數(shù)的類型

ts中函數(shù)會(huì)規(guī)定參數(shù)的類型和個(gè)數(shù)，當(dāng)個(gè)數(shù)不確定時(shí)，可以使用可選類型、剩余參數(shù)、默認(rèn)值

可選類型

可選類型相當(dāng)于該定義的類型和undefined的聯(lián)合類型，所以參數(shù)有三種選擇、傳入該類型、不傳或者undefined

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

參數(shù)默認(rèn)值

參數(shù)設(shè)置了默認(rèn)值就使之稱為了可選類型，不過(guò)有默認(rèn)值的參數(shù)最好放在必傳參數(shù)后面

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

剩余參數(shù)

剩余參數(shù)要放在必傳參數(shù)之后

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的默認(rèn)推導(dǎo)

在對(duì)象的方法中定義的this，ts是可以自動(dòng)推導(dǎo)的，但是獨(dú)立函數(shù)中的this，是推導(dǎo)不出來(lái)的。

在這里插入圖片描述

必須要在獨(dú)立函數(shù)中定義this的類型

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

函數(shù)重載

函數(shù)重載指的是函數(shù)名相同，參數(shù)個(gè)數(shù)或者類型不同，所定義的多個(gè)處理方法。

比如需要對(duì)字符串拼接或者數(shù)字求和操作，雖然我們知道 + 號(hào)可以用在字符串和數(shù)字上，但是在類型檢測(cè)嚴(yán)格的ts代碼中，這樣寫(xiě)編譯是不通過(guò)的，需要使用【類型縮小】，縮小類型的判斷，再進(jìn)行處理。

在這里插入圖片描述

通過(guò)聯(lián)合類型，參數(shù)組合的可能性越多，需要越多的if語(yǔ)句來(lái)進(jìn)行判斷，并且函數(shù)的返回值類型也是未知的，在這種情況下可以使用【函數(shù)重載】

在ts中，定義函數(shù)名和參數(shù)類型的重載函數(shù)，再通過(guò)實(shí)現(xiàn)函數(shù)來(lái)定義具體實(shí)現(xiàn)。會(huì)根據(jù)數(shù)據(jù)類型在重載函數(shù)中調(diào)用，再執(zhí)行實(shí)現(xiàn)函數(shù)的代碼。

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"));

如果傳遞的參數(shù)與重載函數(shù)中定義參數(shù)不同，是無(wú)法通過(guò)編譯的。

在這里插入圖片描述

類

初始化

類中定義的變量需要初始化，可以在定義類的時(shí)候就賦值或者通過(guò)constructor來(lái)操作

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中一致，都是通過(guò) extends 實(shí)現(xiàn)繼承，使用父級(jí)參數(shù)和方法時(shí)使用 super 關(guān)鍵字。

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);

多態(tài)

使用多態(tài)可以寫(xiě)出更加具備通用性的代碼，如果想要實(shí)現(xiàn)多態(tài)首先得有繼承，并且父類引用指向子類對(duì)象。

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()]);

這里相當(dāng)于 const animal1: Animal = new Dog() ，看起來(lái)是 Animal 對(duì)象，其實(shí)是 Dog 對(duì)象，這里的父類引用指向的是子類對(duì)象，所以最后執(zhí)行的是 Dog 對(duì)象的方法

在這里插入圖片描述

成員修飾符

成員修飾符有以下三種

public 表示共有的，任何地方都可見(jiàn)，當(dāng)沒(méi)有定義成員修飾符時(shí)，默認(rèn)為public
private 私有的，只有類中能夠訪問(wèn)到
protected 被保護(hù)的，表示類自身和子類可以訪問(wèn)到

public

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

private

通過(guò)private修飾的變量，在實(shí)例對(duì)象上也是不可訪問(wèn)的。

在這里插入圖片描述

protected

通過(guò)protected修飾的變量，在實(shí)例對(duì)象上也是不可訪問(wèn)的。

在這里插入圖片描述

readonly

readonly表示該屬性只讀，初始化了之后就不能以任何方式修改，無(wú)論是在類內(nèi)部，還是修改實(shí)例對(duì)象，但當(dāng)它是一個(gè)對(duì)象時(shí)，只要不改變它的內(nèi)存地址，修改對(duì)象的屬性是可以的。

在這里插入圖片描述

訪問(wèn)器

訪問(wèn)器給私有屬性提供get/set方法，讓我們?cè)陬愅獠揩@取/修改私有屬性

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);

通過(guò)get/set屬性來(lái)修改私有屬性可以做到攔截/判斷的作用

在這里插入圖片描述

靜態(tài)成員

靜態(tài)成員通過(guò) static 關(guān)鍵字來(lái)定義，通過(guò) static 定義的屬性，是定義在類自身的，只能通過(guò)自己訪問(wèn)，在類內(nèi)部和實(shí)例對(duì)象都是無(wú)法訪問(wèn)到的。

在這里插入圖片描述

抽象類

在定義很多通用的調(diào)用接口時(shí)，我們通常會(huì)讓調(diào)用者傳入父類，通過(guò)多態(tài)來(lái)實(shí)現(xiàn)更加靈活的調(diào)用方式。

但是，父類本身可能并不需要對(duì)某些方法進(jìn)行具體的實(shí)現(xiàn)，所以父類中定義的方法, 我們可以定義為抽象方法。

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)));

抽象方法和方法通過(guò) abstract 來(lái)修飾，并且抽象類定義時(shí)有兩條規(guī)則：

抽象方法必須要在子類實(shí)現(xiàn)
抽象類是不能被實(shí)例化的

在這里插入圖片描述

類的類型

類本身也是可以作為一種數(shù)據(jù)類型的，可以用作類型注解。

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() {} });

只要符合類的格式，就可以使用類的類型

函數(shù)和類在JS和TS中都是至關(guān)重要的，可以幫助開(kāi)發(fā)者更好規(guī)范開(kāi)發(fā)時(shí)的代碼，減少線上故障~