快捷導(dǎo)航

Typescript使用修飾器混合方法到類的實(shí)例

更新時(shí)間：2022年09月28日 11:09:28 作者：江鳥木又源碼分析

這篇文章主要介紹了Typescript使用修飾器混合方法到類的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Typescript使用修飾器混合方法到類

mixins.ts

//導(dǎo)出混合方法
export function mix(...args){
    return function (t){
        Object.assign(t.prototype,...args);//添加方法到對象原型
    }
}

test_mixins.ts

import { mix} from './mixins';//導(dǎo)入混合方法
//聲明要混合入類的方法
let methodToMix = {
    MixFunc(){console.log('this method use for Mix');}
}
 
@mix(methodToMix)//在類聲明中使用了修飾器@mix
class MyClass{}
 
let obj = new MyClass();//實(shí)例化類,類對象具有修飾器混入的方法MixFunc
obj.MixFunc();//調(diào)用混入的方法

測試結(jié)果 :

Typescript類（class）與修飾符的使用

簡介

通過 class 關(guān)鍵字定義一個(gè)類，然后通過 new 關(guān)鍵字可以方便的生產(chǎn)一個(gè)類的實(shí)例對象，這個(gè)生產(chǎn)對象的過程叫實(shí)例化，類的成員就是類中所有的屬性和方法。

// 定義類
class Person {
? // 名稱
? name: string
? // 年齡
? age: number
? // 構(gòu)造函數(shù)
? constructor(name: string, age: number) {
? ? // 更新熟悉數(shù)據(jù)
? ? this.name = name
? ? this.age = age
? }
}

// 發(fā)送一個(gè)人的信息
function sendPerson (person: Person) {
? console.log(`姓名：${person.name}，年齡：${person.age}`)
}

// 實(shí)例化對象
const p = new Person('dzm', 20)
sendPerson(p) // 名稱：dzm，年齡：20

實(shí)例在new出來的時(shí)候，它實(shí)際是調(diào)用了類中的一個(gè)方法進(jìn)行初始化，這個(gè)方法被叫做構(gòu)造器，一般都會(huì)在類中顯示地寫上 constructor 方法，如果沒有顯示定義的 constructor，就會(huì)調(diào)用系統(tǒng)自帶的 constructor 構(gòu)造函數(shù)。

成員修飾符

訪問修飾符的作用就是用于限制別人亂用類中的東西

訪問修飾符

public：公開的，誰都能用（默認(rèn)就是 public）
private：私有的，僅類自己能使用，子類與外部都不能使用
protected：受保護(hù)的，僅類和類的子類能使用，外部不能使用

// 定義類
class Person {
? // 公開參數(shù)
? name: string
? // 公開參數(shù)
? public age: number
? // 私有參數(shù)
? private num:number = 10
? // 內(nèi)部參數(shù)
? protected num1: number = 20
? // 構(gòu)造函數(shù)
? constructor(name: string, age: number) {
? ? // 更新熟悉數(shù)據(jù)
? ? this.name = name
? ? this.age = age
? }
? // 發(fā)送個(gè)人信息
? public send() {
? ? console.log('發(fā)送成功1')
? }
? // 私有方法
? private post() {
? ? console.log('發(fā)送成功2')
? }
}

只讀修飾符

readonly：只能讀不能寫

class Person {
? // 聲明賦值
? readonly name = 'dzm'
}
let p = new Person()
console.log(p.name)
// 不能賦值
// p.name = 'xxx'

readonly 只能在 constructor 構(gòu)造方法初始化時(shí)賦值，或者聲明時(shí)賦值，之后都不能在修改值。

class Person{
? readonly name: string
? // 構(gòu)造初始化賦值
? constructor(name: string) {
? ? this.name = ?name
? }
}

靜態(tài)修飾符

static：靜態(tài)成員無需實(shí)例化，直接通過類名調(diào)用

// 定義類
class Person {
? // 公開參數(shù)
? name: string
? // 公開參數(shù)
? public age: number
? // 靜態(tài)參數(shù)
? static num:number = 10
? // 構(gòu)造函數(shù)
? constructor(name: string, age: number) {
? ? // 更新熟悉數(shù)據(jù)
? ? this.name = name
? ? this.age = age
? }
? // 發(fā)送個(gè)人信息
? static send() {
? ? console.log('發(fā)送成功')
? }
}

// 不需要實(shí)例化對象，通過類名就能進(jìn)行訪問
console.log(Person.num)
Person.send()

總結(jié)

1、上面總共分為三種類型修飾符：訪問修飾符、只讀修飾符、靜態(tài)修飾符。

2、修飾符是可選的，在沒有寫任何修飾符的情況下，默認(rèn)為 public。

3、同類型修飾符只能有一個(gè)，也就是上面三種修飾符可以組合起來修飾一個(gè)成員。

4、三種類型修飾符有先后順序，分別是：訪問、靜態(tài)、只讀，即：public/static/protected、static、readonly

實(shí)現(xiàn)(implements)

類可以被多個(gè)接口協(xié)議約束，類也可以作為接口使用，也就是 implements 后面可以添加單個(gè)或多個(gè) 接口與類。

格式：class 類名 implements 接口名, 接口名, 類名 ... {}

例如：class Person implements Action, Info {}

案例

// 定義行動(dòng)接口
interface Action {
? // 跑起來
? run():void
}

// 定義信息接口
interface Info {
? // 用戶名稱
? name: string
}

// 定義一個(gè)類，并實(shí)現(xiàn)上面的接口
class Person implements Action, Info {
? // 用戶名稱
? name: string
? // 跑起來
? run(): void {
? ? console.log(`${this.name} 跑起來了`)
? }
}

// 定義一個(gè)類，并實(shí)現(xiàn)上面的類接口
class Person2 implements Person {
? name: string
? run(): void {
? ? console.log(`${this.name} 跑起來了`)
? }
}

// 實(shí)例化
const p = new Person()
p.name = 'DZM'
p.run()

// 實(shí)例化
const p2 = new Person2()
p2.name = 'XYQ'
p2.run()

繼承(extends)

類不能繼承接口協(xié)議(interface)，只能通過 implements 關(guān)鍵詞進(jìn)行實(shí)現(xiàn)，支持實(shí)現(xiàn)多個(gè)接口協(xié)議。

類不支持多繼承，也就是 extends 后面只能存在一個(gè)父類，但是可以通過多個(gè)接口協(xié)議來實(shí)現(xiàn)多繼承。

格式：class 類名 extends 類名 implements 接口名, 接口名, 類名 ... {}
例如：class Person3 extends Person implements Action, Info {}

接口支持多繼承。

格式：interface 接口名 extends 接口名, 接口名, 類名 ... {}
例如：interface Person extends Action, Info {}

案例

// 定義行動(dòng)接口
interface Action {
  // 跑起來
  run():void
}

// 定義信息接口
interface Info {
  // 用戶名稱
  name: string
}

// 定義一個(gè)類，并實(shí)現(xiàn)上面的接口
class Person implements Action, Info {
  // 用戶名稱
  name: string
  // 跑起來
  run(): void {
    console.log(`${this.name} 跑起來了`)
  }
}

// 定義一個(gè)類，并實(shí)現(xiàn)上面的類接口
class Person2 extends Person {
  name: string
  run(): void {
    console.log(`${this.name} 跑起來了`)
  }
}

// 定義一個(gè)類，并實(shí)現(xiàn)上面的類接口
class Person3 extends Person implements Action, Info {
  name: string
  run(): void {
    console.log(`${this.name} 跑起來了`)
  }
}

// 實(shí)例化
const p = new Person()
p.name = 'DZM'
p.run()

// 實(shí)例化
const p2 = new Person2()
p2.name = 'XYQ'
p2.run()

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: