TypeScript中class類型實(shí)例講解

更新時(shí)間：2022年12月30日 11:50:18 作者：亦世凡華、

眾所周知在TypeScript中定義變量需要指定標(biāo)識(shí)符的類型,下面這篇文章主要給大家介紹了關(guān)于TypeScript中class類型的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

class類型

TypeScript支持ES引入的class關(guān)鍵字，并為其添加了類型注解和其他語法(例如：可見性修飾符)。

class person {
  // 聲明初始值，可省略類型注解(TS類型推論為string)
  name:'張三'
  // 聲明成員類型為 number 沒有初始值
  age: number
}
const p = new person()
p.name
p.age

構(gòu)造函數(shù)

在class構(gòu)造函數(shù)中，需要為構(gòu)造函數(shù)指定類型注解，否則會(huì)被隱式推斷為any，構(gòu)造函數(shù)不需要返回值類型。

class Person {
  name:string
  age:number
  constructor(name:string,age:number){
    this.name = name
    this.age = age 
  }
}
const p = new Person('張三',18)

在class的實(shí)例方法中，方法的類型注解（參數(shù)與返回值）與函數(shù)用法相同。

class Point {
  x=1
  y=2
  scale(n: number){
    this.x*=n
    this.y*=n
  }
}
const p = new Point()
p.scale(5)
console.log(p.x,p.y);// 5 10

class類的繼承

在class類的繼承中，提供了兩種類的繼承方式：1、extends(繼承父類) 2、implements(實(shí)現(xiàn)接口)。注意：JS中只有extends，而implements是TS提供的。

class Animal {
  move(){
    console.log('我是動(dòng)物');
  }
}
// 使用 extends 繼承父類
class Dog extends Animal {
  name='狗'
  say(){
    console.log('我是狗');
  }
}
const p = new Dog()
p.move()// 我是動(dòng)物
p.say()// 我是狗
console.log(p.name);// 狗

interface Animals {
  name: string
  say(): void
}
// Dog類繼承接口Animals，意味著Dog類必須提供Animals接口中指定的所有方法和屬性
class Dog implements Animals {
  name = 'hobble'
  say(): void {
    console.log('汪汪汪');
  }
}

可見修飾符

在class中，類的可見性可以使用TS來控制class的方法或?qū)傩詫?duì)于class外的代碼是否可見?？梢娦孕揎椃ǎ?strong>public（公有的）、protected（受保護(hù)的）、private（私有的）。

class Animal1 {
  // 因?yàn)?public 是默認(rèn)可見的，所以可以直接忽略
  public move(){
    console.log('我是動(dòng)物');
  }
}
class Dog1 extends Animal1 {}
const p1 = new Dog1()
p1.move()// 我是動(dòng)物
 
 
class Animal2 {
  // 僅對(duì)其聲明的所在類和子類中（非實(shí)例對(duì)象）可見
  protected move(){
    console.log('我是動(dòng)物');
  }
  run(){
    this.move
  }
}
class Dog2 extends Animal2 {
  say(){
    this.move
  }
}
const p2 = new Dog2()
// p.move() 報(bào)錯(cuò)
 
 
class Animal3 {
  // private表示私有的，只在當(dāng)前類中可見，對(duì)實(shí)例對(duì)象以及子類是不可見的
  private move(){
    console.log('我是動(dòng)物');
  }
  run(){
    this.move
  }
}
class Dog3 extends Animal3 {
  say(){
    // this.move 報(bào)錯(cuò)
  }
}

只讀修飾符

除了可見修飾符之外，還有一個(gè)常見的修飾符就是：readonly（只讀修飾符）。readonly：表示只讀，用來防止在構(gòu)造函數(shù)之外對(duì)屬性進(jìn)行賦值。

 class Person {
  // 注意：只要是readonly來修飾的屬性，必須手動(dòng)提供明確屬性，否則就是字面量類型
  readonly age: number = 18
  constructor(age: number){
    this.age = age
  }
  setAge(){
    // 無法分配到 "age" ，因?yàn)樗侵蛔x屬性。
    // this.age = 20 
  }
 }

注意：readonly只能修飾屬性不能修飾方法。

在接口和{}表示的對(duì)象類型中，也可以使用 readonly 。

// 在接口中
interface People {
  readonly name: string
}
 
let obj: People = {
  name:'張三'
}
// obj.name = '李四' 報(bào)錯(cuò)
 
// 在對(duì)象中
let oj: { readonly name: string } = {
  name:'張三'
}
// oj.name = '李四' 報(bào)錯(cuò)