[[401345]]

函數與類

前言本

文章是Typescript系列學習文章，旨在利用碎片時間快速高效上手學習Typescript，也可以對Typescript進行復習知識點，溫故知新。

前文回顧

• 《你好，我叫Typescript 01 ── 數據類型》
• 《你好，我叫Typescript 02 ── 變量與接口》
• 《你好，我叫Typescript 03 ── 泛型》

函數

「蹦蹦」：跳跳，好幾天不見，我最近在學習Typescript又遇到了新問題，亟需你的解答。

「跳跳」：啥問題呀，蹦蹦。

「蹦蹦」：什么是快樂星球，什么是...不對不對 什么是函數?TS的函數和JS的函數有啥區別?

「跳跳」：那就帶你一起研究。

介紹

「跳跳」：函數是定義行為的語法，其實是為JS添加額外的功能。同樣的可以創建有名稱的函數和匿名函數。

function add(num1:number,num2:number):number{ 
  return num1 + num2; 
} 
 
console.log(add(1,2));//3 
 
let addNum = (num1:number,num2:number):number => num1+num2; 
console.log(addNum(1,2));//3 

我們可以給每個參數添加類型之后再為函數本身添加返回值類型。 TypeScript能夠根據返回語句自動推斷出返回值類型，因此我們通常省略它。

簡而言之，函數類型包含「參數類型」和「返回值類型」兩個部分，當寫出完整類型的時候，兩部分都需要完整書寫。其實，可以以參數列表的形式寫出參數類型，為每一個參數指定一個名字和類型，增加代碼的可讀性。

只要參數類型是匹配的，那么就認為它是有效的函數類型，而不在乎參數名是否正確。

第二部分是返回值類型。如之前提到的，返回值類型是函數類型的必要部分，如果函數沒有返回任何值，你也必須指定返回值類型為 void而不能留空。

在賦值語句的一邊指定了類型但是另一邊沒有類型的話，TypeScript編譯器會自動識別出類型。

函數參數定義的方式

1.直接聲明函數參數

function add(num1:number,num2:number):number{ 
  return num1 + num2; 
} 
add(1,2);//3 

2.解構賦值聲明函數參數

function add({num1,num2}:{num1:number,num2:number}):number{ 
  return num1 + num2; 
} 
add({x:1,y:2});//3 

3.剩余參數聲明函數參數

function add(...rest:number[]){ 
  return rest.reduce((pre,cur)=>pre+cur); 
} 
add(2,3,4,5);//14 
add("yichuan",3);//報錯，不能使用字符串 

4.命名式聲明函數參數

type add = (num1:number,num2:number)=>number; 
 
interface add{ 
  (x:number,y:number):number 
} 

調用方式：

let addFun:add=>(num1,num2)=>num1+num2; 

5.可選參數和默認參數

function add(num1:number,num2:number,num3?:number):number{ 
  return num1 + num2; 
} 

顯而易見：num1和num2是默認參數，num3是可選參數。切記，默認參數放前面，可選參數放后面。

this

在JS中的this指向問題很惱火，this的指向是在函數被調用時進行指定的，但是得整明白函數調用的上下文是什么，這是比較困擾的。其實兩者沒多大區別。

幸運的是，TS能夠通知你錯誤地使用了this的地方。

函數重載

函數重載或方法重載是使用相同名稱和不同參數數量或類型創建多個方法的一種能力。

function addFun(num1:number,num2:number):number; 
function addFun(num1:string,num2:string):string; 
function addFun(num1:string,num2:number):string; 
function addFun(num1:number,num2:string):string; 
function addFun(num1:any,num2:any):any{ 
  if(typeof num1 === "string" || typeof num2 === "string"){ 
    return num1.toString() + num2.toString(); 
  } 
  return num1 + num2; 
} 
console.log(addFun(1,2)); 

「蹦蹦」：我們可以看到大多數的庫源碼都是進行函數重載的方式，這是為什么?

「跳跳」：這是因為使用函數重載后，其他人只要看到函數重載聲明就可以知道函數的調用方式。

函數重載的方式，就是ts會從一開始查找類型，如果匹配就返回函數類型，如果不匹配就到下一個。 因此，在定義重載的時候，一定要把最精確的定義放在最前面?！竧ips: 維護一個公共組件時, 可使用這種方式讓使用者和后面維護者快速知道函數的調用方式.」

類

「蹦蹦」：TS的類和JS有啥不同?

「跳跳」：在es6前，傳統的Javascript需要使用函數和原型鏈繼承的方式才能實現可重用的組件，但是這種對于不了解JS原型鏈原理的程序員卻顯得困難。而ES6引入了類的思想，使得程序員可以基于類進行面向對象的方式編程。

類的屬性和方法

「蹦蹦」：在面向對象編程的語言中，類可以創造對象的藍圖，描述所要創建對象的公共屬性和方法。

class Person{ 
  //實例屬性 
  name: string; 
  age: number; 
  //私有字段 
  #score:number; 
  //靜態屬性 
  static height:number = 180; 
  // 
  readonly weight:number = 130; 
  //構造函數 
  constructor(name:string,age:number,score:number){ 
    this.name = name; 
    this.age = age; 
    this.#score = score; 
  } 
  //實例方法 
  getName(){ 
    return this.name; 
  } 
  //靜態方法 
  static getAge(){ 
    return this.age; 
  } 
} 
 
let person:Person = new Person("wenbo",12); 
console.log(person.getName()); 
console.log(Person.height); 
person.name = "zhaoshun"; 
console.log(person.getName()); 
Person.height = 170; 
console.log(Person.height); 
person.weight = 110; 
console.log(person.weight); 

• 實例屬性(成員屬性)：直接在類中定義的屬性就是實例屬性，需要通過對象的實例進行訪問。
• 靜態屬性(類屬性)：在屬性前使用static關鍵字可以定義類屬性(靜態屬性)，可以直接通過類進行訪問。
• 私有字段：在屬性前加上#，即可將屬性變成私有屬性，不能在包含的類之外訪問，甚至不能被檢測到。每個私有屬性都唯一限定了其包含的類，不能在私有屬性上使用ts的可訪問修飾符(public、private)。
• 構造函數(執行初始化操作)：構造函數會在對象創建時調用，在實例方法中，this就表示當前的實例.在構造函數中當前對象就是當前新建的那個對象，可以通過this向新建的對象中添加屬性。
• 實例方法(成員方法)：直接在類中定義的方法就是實例方法，需要通過對象的實例進行調用。在方法中可以通過this來表示當前調用方法的對象。誰調用該方法，就指向誰。
• 靜態方法(類方法)：在方法前使用static關鍵字可以定義類方法(靜態方法)，可以直接通過類進行訪問。

繼承

基于類的程序設計中一種最基本的模式是允許使用繼承來擴展現有的類。

class Animal { 
    move(distanceInMeters: number = 0) { 
        console.log(`Animal moved ${distanceInMeters}m.`); 
    } 
} 
 
class Dog extends Animal { 
    bark() { 
        console.log('Woof! Woof!'); 
    } 
} 
 
const dog = new Dog(); 
dog.bark(); 
dog.move(10); 
dog.bark(); 

如上所示是最基本的繼承：類從基類中繼承了屬性和方法。這里，Dog是一個派生類，它派生自Animal基類，通過 extends關鍵字。派生類通常被稱作 子類，基類通常被稱作 超類。

因為Dog繼承了Animal的功能，因此我們可以創建一個Dog的實例，它能夠bark()和move()。

公共，私有與受保護的修飾符

在TS中可以給類的屬性、方法及構造器設置修飾符，來限定它們的作用范圍。默認修飾符是public，因此可以當前類和子類自由訪問程序中定義的成員。

「tip: 在寫類時, 要養成隨手添加成員修飾符的習慣.」

class Father{ 
  //公共成員 
  public name:string; 
  //私有成員 
  private age:number; 
  //受保護成員 
  protected address:string; 
  public constructor(name:string,age:number,address:string){ 
    this.name = name; 
    this.age = age; 
    this.address = address; 
  } 
 
  public eat(meters:number){ 
    console.log(`${this.name} moved ${meters}`); 
  } 
} 
 
class Son extends Father{ 
  constructor(){ 
    super() 
  } 
  test(){ 
    console.log(this.name);//可訪問 
    console.log(this.age);//屬性“age”為私有屬性，只能在類“Father”中訪問。 
    console.log(this.address);//可訪問 
  } 
} 
 
const bigLiu = new Father("bigLiu",32,"四川省成都市"); 
console.log(bigLiu.name);//可訪問 
console.log(bigLiu.age);//屬性“age”為私有屬性，只能在類“Father”中訪問。 
console.log(bigLiu.address);//屬性“address”受保護，只能在類“Father”及其子類中訪問。  
 
const smallLiu = new Son(); 
console.log(bigLiu.name);//可訪問 
console.log(bigLiu.age);//屬性“age”為私有屬性，只能在類“Father”中訪問。 
console.log(bigLiu.address);//屬性“address”受保護，只能在類“Father”及其子類中訪問。  

訪問器(存取器)

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來截取對對象成員的訪問。解析出來的源碼如下:

抽象類

使⽤ abstract 關鍵字聲明的類，我們稱之為抽象類。抽象類不能被實例化，因為它⾥⾯包含⼀個或多個抽象⽅法。所謂的抽象⽅法，是指不包含具體實現的⽅法：

abstract class Person { 
constructor(public name: string){} 
abstract say(words: string) :void; 
} 
// Cannot create an instance of an abstract class.(2511) 
const lolo = new Person(); // Error 

抽象類不能被直接實例化，我們只能實例化實現了所有抽象⽅法的⼦類。具體如下所示：

abstract class Person { 
  constructor(public name: string){} 
    // 抽象⽅法 
    abstract say(words: string) :void; 
  } 
  class Developer extends Person { 
  constructor(name: string) { 
  super(name); 
} 
say(words: string): void { 
  console.log(`${this.name} says ${words}`); 
  } 
} 
const lolo = new Developer("lolo"); 
lolo.say("I love ts!"); // lolo says I love ts! 

小結

「跳跳」：其實本篇文章主要介紹了：函數和類的概念、繼承、各種屬性等等。

參考文章

• 阿寶哥的《重學TS》
• 《TS中文文檔》