欢乐颂小说txt,完美世界小说txt下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

如何在TypeScript中使用裝飾器

介紹

TypeScript 是 JavaScript 語言的擴展，它使用 JavaScript 的運行時和編譯時類型檢查器。

創(chuàng)新互聯(lián)是專業(yè)的仙游網(wǎng)站建設公司，仙游接單;提供成都做網(wǎng)站、成都網(wǎng)站設計,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行仙游網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

這種組合允許開發(fā)人員使用完整的 JavaScript 生態(tài)系統(tǒng)和語言功能，同時，還可以在其之上添加可選的靜態(tài)類型檢查、枚舉、類和接口。這些額外功能之一是裝飾器的支持。

裝飾器是一種裝飾類成員或類本身的方法，具有額外的功能。

當我們將裝飾器應用于類或類成員時，我們實際上是在調用一個函數(shù)，該函數(shù)將接收被裝飾內容的詳細信息，然后，裝飾器實現(xiàn)將能夠動態(tài)轉換代碼，添加額外的功能，并且減少樣板代碼。

它們是在 TypeScript 中進行元編程的一種方式，TypeScript 是一種編程技術，使程序員能夠創(chuàng)建使用來自應用程序本身的其他代碼作為數(shù)據(jù)的代碼。

本教程將分享如何在 TypeScript 中為類和類成員創(chuàng)建自己的裝飾器，以及如何使用它們。

它將引導我們完成不同的代碼示例，我們可以在自己的 TypeScript 環(huán)境或 TypeScript Playground（一個允許我們直接在瀏覽器中編寫 TypeScript 的在線環(huán)境）中遵循這些示例。

準備工作

要完成本教程實例，我們需要做如下準備：

一個環(huán)境，我們可以在其中執(zhí)行 TypeScript 程序以跟隨示例。要在本地計算機上進行設置，您將需要以下內容。
為了運行處理 TypeScript 相關包的開發(fā)環(huán)境，同時，安裝了 Node 和 npm（或 yarn）。本教程使用 Node.js 版本 14.3.0 和 npm 版本 6.14.5 進行了測試。
如果是要在 macOS 或 Ubuntu 18.04 上安裝，請按照如何在 macOS 上安裝 Node.js 和創(chuàng)建本地開發(fā)環(huán)境或如何在 Ubuntu 18.04 上安裝 Node.js 的使用 PPA 安裝部分中的步驟進行操作。
如果您使用的是適用于 Linux 的 Windows 子系統(tǒng) (WSL)，這也適用。
此外，我們還需要在機器上安裝 TypeScript 編譯器 (tsc)。為此，請參閱官方 TypeScript 網(wǎng)站。
如果我們不想在本地機器上創(chuàng)建 TypeScript 環(huán)境，我們可以使用官方的 TypeScript Playground 來跟隨。
我們將需要足夠的 JavaScript 知識，尤其是 ES6+ 語法，例如解構、rest 運算符和導入/導出。
本教程將參考支持 TypeScript 并顯示內聯(lián)錯誤的文本編輯器的各個方面。這不是使用 TypeScript 所必需的，但確實可以更多地利用 TypeScript 功能。
為了獲得這些好處，我們可以使用像 Visual Studio Code 這樣的文本編輯器，它完全支持開箱即用的 TypeScript。你也可以在 TypeScript Playground 中嘗試這些好處。
本教程中顯示的所有示例都是使用 TypeScript 4.2.2 版創(chuàng)建的。

在 TypeScript 中啟用裝飾器支持

目前，裝飾器在 TypeScript 中仍然是一個實驗性功能，因此，必須先啟用它。在本節(jié)中，我們將了解如何在 TypeScript 中啟用裝飾器，具體取決于您使用 TypeScript 的方式。

TypeScript 編譯器 CLI

要在使用 TypeScript Compiler CLI (tsc) 時啟用裝飾器支持，唯一需要的額外步驟是傳遞一個附加標志 --experimentalDecorators：

tsc --experimentalDecorators

tsconfig.json

在具有 tsconfig.json 文件的項目中工作時，要啟用實驗性裝飾器，我們必須將實驗性裝飾器屬性添加到 compilerOptions 對象：

{
"compilerOptions": {
"experimentalDecorators": true
  }}

在 TypeScript Playground 中，裝飾器默認啟用。

使用裝飾器語法

在本節(jié)中，我們將在 TypeScript 類中應用裝飾器。

在 TypeScript 中，我們可以使用特殊語法 @expression 創(chuàng)建裝飾器，其中 expression 是一個函數(shù)，將在運行時自動調用，其中包含有關裝飾器目標的詳細信息。

裝飾器的目標取決于我們添加它們的位置。目前，裝飾器可以添加到類的以下組件中：

類聲明本身
特性
訪問器
方法
參數(shù)

例如，假設我們有一個名為 seal 的裝飾器，它在類中調用 Object.seal。要使用我們的裝飾器，我們可以編寫以下內容：

@sealed
class Person {}

請注意，在突出顯示的代碼中，我們在密封裝飾器的目標之前添加了裝飾器，在本例中為 Person 類聲明。

這同樣適用于所有其他類型的裝飾器：

@classDecorator
class Person {
@propertyDecorator
public name: string;
@accessorDecorator
get fullName() {
// ...
  }
@methodDecorator
  printName(@parameterDecorator prefix: string) {
// ...
  }
}

要添加多個裝飾器，請將它們一個接一個地添加在一起：

@decoratorA
@decoratorB
class Person {}

在 TypeScript 中創(chuàng)建類裝飾器

在本節(jié)中，我們將完成在 TypeScript 中創(chuàng)建類裝飾器的步驟。

對于名為 @decoratorA 的裝飾器，我們告訴 TypeScript 它應該調用函數(shù) decoratorA。將調用 decoratorA 函數(shù)，其中包含有關如何在代碼中使用裝飾器的詳細信息。

例如，如果您將裝飾器應用于類聲明，則該函數(shù)將接收有關該類的詳細信息。此功能必須在您的裝飾器工作的范圍內。

要創(chuàng)建自己的裝飾器，我們必須創(chuàng)建一個與裝飾器同名的函數(shù)。也就是說，要創(chuàng)建您在上一節(jié)中看到的密封類裝飾器，您必須創(chuàng)建一個接收一組特定參數(shù)的密封函數(shù)。讓我們這樣做：

@sealed
class Person {}
function sealed(target: Function) {
Object.seal(target);
Object.seal(target.prototype);
}

傳遞給裝飾器的參數(shù)將取決于裝飾器的使用位置。第一個參數(shù)通常稱為目標。

密封裝飾器將僅用于類聲明，因此，我們的函數(shù)將接收一個參數(shù)，即目標，其類型為 Function。這將是應用裝飾器的類的構造函數(shù)。

然后，在密封函數(shù)中，在目標（即類構造函數(shù)）以及它們的原型上調用 Object.seal。當這樣做時，不能將新屬性添加到類構造函數(shù)或其屬性中，并且現(xiàn)有屬性將被標記為不可配置。

重要的是要記住，目前在使用裝飾器時無法擴展目標的 TypeScript 類型。這意味著，例如，你無法使用裝飾器將新字段添加到類并使其成為類型安全的。

如果在密封類裝飾器中返回了一個值，該值將成為該類的新構造函數(shù)。如果想完全覆蓋類構造函數(shù)，這很有用。

已經創(chuàng)建了第一個裝飾器，并將它與一個類一起使用。

接下來，我們將學習如何創(chuàng)建裝飾器工廠。

創(chuàng)建裝飾器工廠

有時，我們需要在應用裝飾器時將其他選項傳遞給裝飾器，為此，我們必須使用裝飾器工廠。

在這里，我們將學習如何創(chuàng)建和使用這些工廠。

裝飾器工廠是返回另一個函數(shù)的函數(shù)。他們收到這個名字是因為他們不是裝飾器實現(xiàn)本身。

相反，它們返回另一個負責實現(xiàn)裝飾器的函數(shù)并充當包裝函數(shù)。通過允許客戶端代碼在使用裝飾器時將選項傳遞給裝飾器，它們在使裝飾器可定制方面很有用。

假設，有一個名為 decoratorA 的類裝飾器，并且，我們想添加一個可以在調用裝飾器時設置的選項，例如，布爾標志，可以通過編寫類似于以下的裝飾器工廠來實現(xiàn)此目的：

const decoratorA = (someBooleanFlag: boolean) => {
return (target: Function) => {
  }
}

在這里，decoratorA 函數(shù)返回另一個帶有裝飾器實現(xiàn)的函數(shù)。注意，裝飾器工廠如何接收一個布爾標志作為它的唯一參數(shù)：

const decoratorA = (someBooleanFlag: boolean) => {
return (target: Function) => {
  }
}

我們可以在使用裝飾器時傳遞此參數(shù)的值。

請參閱以下示例中突出顯示的代碼：

const decoratorA = (someBooleanFlag: boolean) => {
return (target: Function) => {
  }
}
@decoratorA(true)
class Person {}

在這里，當我們使用 decoratorA 裝飾器時，將調用裝飾器工廠，并將 someBooleanFlag 參數(shù)設置為 true。

然后，裝飾器實現(xiàn)本身將運行。這允許我們根據(jù)使用方式更改裝飾器的行為，從而，使我們的裝飾器易于自定義和通過應用程序重用。

請注意，我們需要傳遞裝飾器工廠預期的所有參數(shù)。如果，我們只是應用裝飾器而不傳遞任何參數(shù)，如下例所示：

const decoratorA = (someBooleanFlag: boolean) => {
return (target: Function) => {
  }
}
@decoratorA
class Person {}

TypeScript 編譯器會給你兩個錯誤，這可能會因裝飾器的類型而異。對于類裝飾器，錯誤是 1238 和 1240：

Unable to resolve signature of class decorator when called as an expression.
  Type '(target: Function) => void' is not assignable to type 'typeof Person'.
    Type '(target: Function) => void' provides no match for the signature 'new (): Person'. (1238)
Argument of type 'typeof Person' is not assignable to parameter of type 'boolean'. (2345)

我們剛剛創(chuàng)建了一個能夠接收參數(shù)并根據(jù)這些參數(shù)更改其行為的裝飾器工廠。

在下一步中，我們將學習如何創(chuàng)建屬性裝飾器。

創(chuàng)建屬性裝飾器

類屬性是另一個可以使用裝飾器的地方，在這里，我們將了解如何創(chuàng)建它們。

任何屬性裝飾器都接收以下參數(shù)：

對于靜態(tài)屬性，類的構造函數(shù)，對于所有其他屬性，類的原型。
成員的姓名。

目前，沒有辦法獲取屬性描述符作為參數(shù)。這是由于 TypeScript 中屬性裝飾器的初始化方式。

這是一個裝飾器函數(shù)，它將成員的名稱打印到控制臺：

const printMemberName = (target: any, memberName: string) => {
console.log(memberName);
};
class Person {
@printMemberName
  name: string = "Jon";
}

當我們運行上面的 TypeScript 代碼時，你會在控制臺中看到如下打?。?

name

我們可以使用屬性裝飾器來覆蓋被裝飾的屬性。這可以通過Object.defineProperty與屬性的新 setter 和 getter 一起使用來完成。

讓我們看看如何創(chuàng)建一個名為的裝飾器allowlist，它只允許將屬性設置為靜態(tài)允許列表中存在的值：

const allowlist = ["Jon", "Jane"];
const allowlistOnly = (target: any, memberName: string) => {
let currentValue: any = target[memberName];
Object.defineProperty(target, memberName, {
set: (newValue: any) => {
if (!allowlist.includes(newValue)) {
return;
      }
      currentValue = newValue;
    },
get: () => currentValue
  });
};

首先，我們要在代碼頂部創(chuàng)建一個靜態(tài)許可名單：

const allowlist = ["Jon", "Jane"];

然后，我們創(chuàng)建一個屬性裝飾器：

const allowlistOnly = (target: any, memberName: string) => {
let currentValue: any = target[memberName];
Object.defineProperty(target, memberName, {
set: (newValue: any) => {
if (!allowlist.includes(newValue)) {
return;
      }
      currentValue = newValue;
    },
get: () => currentValue
  });
};

請注意，我們如何使用 any 作為目標的類型：

const allowlistOnly = (target: any, memberName: string) => {

對于屬性裝飾器來說，目標參數(shù)的類型可以是類的構造函數(shù)，也可以是類的原型，在這種情況下使用any比較容易。

在裝飾器實現(xiàn)的第一行中，我們將被裝飾的屬性的當前值存儲到 currentValue 變量中：

let currentValue: any = target[memberName];

對于靜態(tài)屬性，這將設置為其默認值（如果有）。

對于非靜態(tài)屬性，這將始終未定義。這是因為在運行時，在編譯的 JavaScript 代碼中，裝飾器在實例屬性設置為其默認值之前運行。

然后，我們將使用 Object.defineProperty 覆蓋該屬性：

Object.defineProperty(target, memberName, {
set: (newValue: any) => {
if (!allowlist.includes(newValue)) {
return;
      }
      currentValue = newValue;
    },
get: () => currentValue
  });

Object.defineProperty 調用有一個 getter 和一個 setter。getter 返回存儲在 currentValue 變量中的值。

如果 currentVariable 在允許列表中，setter 會將其值設置為 newValue。

讓我們使用您剛剛編寫的裝飾器。創(chuàng)建以下 Person 類：

class Person {
  @allowlistOnly
  name: string = "Jon";
}

我們現(xiàn)在將創(chuàng)建類的新實例，并測試設置并獲取name實例屬性：

const allowlist = ["Jon", "Jane"];
const allowlistOnly = (target: any, memberName: string) => {
let currentValue: any = target[memberName];
Object.defineProperty(target, memberName, {
set: (newValue: any) => {
if (!allowlist.includes(newValue)) {
return;
      }
      currentValue = newValue;
    },
get: () => currentValue
  });
};
class Person {
@allowlistOnly
  name: string = "Jon";
}
const person = new Person();
console.log(person.name);
person.name = "Peter";
console.log(person.name);
person.name = "Jane";
console.log(person.name);

運行代碼，我們應該看到以下輸出：

OutputJon
Jon
Jane

該值永遠不會設置為 Peter，因為 Peter 不在允許列表中。

如果我們想讓代碼更具可重用性，允許在應用裝飾器時設置允許列表，該怎么辦？這是裝飾器工廠的一個很好的用例。

讓我們通過 allowlistOnly 裝飾器變成裝飾器工廠來做到這一點。

const allowlistOnly = (allowlist: string[]) => {
return (target: any, memberName: string) => {
let currentValue: any = target[memberName];
Object.defineProperty(target, memberName, {
set: (newValue: any) => {
if (!allowlist.includes(newValue)) {
return;
        }
        currentValue = newValue;
      },
get: () => currentValue
    });
  };
}

在這里，我們將之前的實現(xiàn)包裝到另一個函數(shù)中，即裝飾器工廠。裝飾器工廠接收一個名為允許列表的參數(shù)，它是一個字符串數(shù)組。

現(xiàn)在，要使用的裝飾器，我們必須通過許可名單，如以下突出顯示的代碼所示：

class Person {
@allowlistOnly(["Claire", "Oliver"])
  name: string = "Claire";
}

嘗試運行與之前編寫的代碼類似的代碼，但有新的更改：

const allowlistOnly = (allowlist: string[]) => {
return (target: any, memberName: string) => {
let currentValue: any = target[memberName];
Object.defineProperty(target, memberName, {
set: (newValue: any) => {
if (!allowlist.includes(newValue)) {
return;
        }
        currentValue = newValue;
      },
get: () => currentValue
    });
  };
}
class Person {
@allowlistOnly(["Claire", "Oliver"])
  name: string = "Claire";
}
const person = new Person();
console.log(person.name);
person.name = "Peter";
console.log(person.name);
person.name = "Oliver";
console.log(person.name);

輸出如下：

OutputClaire
Claire
Oliver

顯示它按預期工作，person.name 永遠不會設置為 Peter，因為 Peter 不在給定的白名單中。

現(xiàn)在，我們已經使用普通裝飾器函數(shù)和裝飾器工廠創(chuàng)建了第一個屬性裝飾器，是時候看看如何為類訪問器創(chuàng)建裝飾器了。

創(chuàng)建訪問器裝飾器

在這里，我們將了解裝飾類訪問器。

就像屬性裝飾器一樣，訪問器中使用的裝飾器接收以下參數(shù)：

對于靜態(tài)屬性，類的構造函數(shù)，對于所有其他屬性，類的原型。
成員的姓名。

但與屬性裝飾器不同的是，它還接收第三個參數(shù)，即訪問器成員的屬性描述符。

鑒于 Property Descriptors 包含特定成員的 setter 和 getter，訪問器裝飾器只能應用于單個成員的 setter 或 getter，而不能同時應用于兩者。

如果我們從訪問器裝飾器返回一個值，該值將成為 getter 和 setter 成員的訪問器的新屬性描述符。

下面是一個可用于更改 getter/setter 訪問器的可枚舉標志的裝飾器示例：

const enumerable = (value: boolean) => {
return (target: any, memberName: string, propertyDescriptor: PropertyDescriptor) => {
    propertyDescriptor.enumerable = value;
  }
}

請注意示例中，我們是如何使用裝飾器工廠的。這允許我們在調用裝飾器時指定可枚舉標志。

以下是如何使用裝飾器：

class Person {
  firstName: string = "Jon"
  lastName: string = "Doe"
@enumerable(true)
get fullName () {
return `${this.firstName} ${this.lastName}`;
  }
}

訪問器裝飾器類似于屬性裝飾器。唯一的區(qū)別是它們接收帶有屬性描述符的第三個參數(shù)。現(xiàn)在，我們已經創(chuàng)建了第一個訪問器裝飾器。

接下來，我們將學習如何創(chuàng)建方法裝飾器。

創(chuàng)建方法裝飾器

在這里，我們將學習如何使用方法裝飾器。

方法裝飾器的實現(xiàn)與創(chuàng)建訪問器裝飾器的方式非常相似。傳遞給裝飾器實現(xiàn)的參數(shù)與傳遞給訪問器裝飾器的參數(shù)相同。

讓我們重用之前創(chuàng)建的同一個可枚舉裝飾器，但這次是在以下 Person 類的 getFullName 方法中：

const enumerable = (value: boolean) => {
return (target: any, memberName: string, propertyDescriptor: PropertyDescriptor) => {
    propertyDescriptor.enumerable = value;
  }
}
class Person {
  firstName: string = "Jon"
  lastName: string = "Doe"
@enumerable(true)
  getFullName () {
return `${this.firstName} ${this.lastName}`;
  }
}

如果我們從方法裝飾器返回一個值，該值將成為該方法的新屬性描述符。

讓我們創(chuàng)建一個deprecated的裝飾器，它在使用該方法時將傳遞的消息打印到控制臺，記錄一條消息說該方法已被棄用：

const deprecated = (deprecationReason: string) => {
return (target: any, memberName: string, propertyDescriptor: PropertyDescriptor) => {
return {
get() {
const wrapperFn = (...args: any[]) => {
console.warn(`Method ${memberName} is deprecated with reason: ${deprecationReason}`);
          propertyDescriptor.value.apply(this, args)
        }
Object.defineProperty(this, memberName, {
            value: wrapperFn,
            configurable: true,
            writable: true
        });
return wrapperFn;
      }
    }
  }
}

在這里，我們正在使用裝飾器工廠創(chuàng)建裝飾器。這個裝飾器工廠接收一個字符串類型的參數(shù)，這是棄用的原因，如下面突出顯示的部分所示：

const deprecated = (deprecationReason: string) => {
return (target: any, memberName: string, propertyDescriptor: PropertyDescriptor) => {
// ...
  }
}

deprecationReason 將在稍后將棄用消息記錄到控制臺時使用。在不推薦使用裝飾器的實現(xiàn)中，我們正在返回一個值。當我們從方法裝飾器返回值時，該值將覆蓋該成員的屬性描述符。

我們正在利用這一點為裝飾類方法添加一個吸氣劑。這樣，我們就可以更改方法本身的實現(xiàn)。

但是為什么不直接使用 Object.defineProperty 而不是為方法返回一個新的屬性裝飾器呢？這是必要的，因為，我們需要訪問 this 的值，對于非靜態(tài)類方法，它綁定到類實例。

如果，我們直接使用 Object.defineProperty ，將無法檢索 this 的值，并且如果該方法以任何方式使用 this ，則當從裝飾器實現(xiàn)中運行包裝的方法時，裝飾器會破壞我們的代碼。

在這樣情況下，getter 本身的 this 值綁定到非靜態(tài)方法的類實例，并綁定到靜態(tài)方法的類構造函數(shù)。

然后，在你的 getter 中創(chuàng)建一個本地包裝函數(shù)，稱為 wrapperFn，此函數(shù)使用 console.warn 將消息記錄到控制臺，傳遞從裝飾器工廠收到的 deprecationReason，然后使用 propertyDescriptor.value 調用原始方法。

apply(this, args)，以這種方式調用原始方法，并將其 this 值正確綁定到類實例，以防它是非靜態(tài)方法。

然后，我們將使用 defineProperty 覆蓋類中方法的值。這就像一種記憶機制，因為對同一方法的多次調用將不再調用 getter，而是直接調用 wrapperFn。

我們現(xiàn)在正在使用 Object.defineProperty 將類中的成員設置為將wrapperFn 作為其值。

讓我們使用已棄用的裝飾器：

const deprecated = (deprecationReason: string) => {
return (target: any, memberName: string, propertyDescriptor: PropertyDescriptor) => {
return {
get() {
const wrapperFn = (...args: any[]) => {
console.warn(`Method ${memberName} is deprecated with reason: ${deprecationReason}`);
          propertyDescriptor.value.apply(this, args)
        }
Object.defineProperty(this, memberName, {
            value: wrapperFn,
            configurable: true,
            writable: true
        });
return wrapperFn;
      }
    }
  }
}
class TestClass {
static staticMember = true;
  instanceMember: string = "hello"
@deprecated("Use another static method")
static deprecatedMethodStatic() {
console.log('inside deprecated static method - staticMember =', this.staticMember);
  }
@deprecated("Use another instance method")
  deprecatedMethod () {
console.log('inside deprecated instance method - instanceMember =', this.instanceMember);
  }
}
TestClass.deprecatedMethodStatic();
const instance = new TestClass();
instance.deprecatedMethod();

在這里，我們創(chuàng)建了一個具有兩個屬性的 TestClass：一個是靜態(tài)的，一個是非靜態(tài)的。我們還創(chuàng)建了兩種方法：一種是靜態(tài)的，一種是非靜態(tài)的。

然后，我們將已棄用的裝飾器應用于這兩種方法。運行代碼時，控制臺中會出現(xiàn)以下內容：

Output(warning) Method deprecatedMethodStatic is deprecated with reason: Use another static method
inside deprecated static method - staticMember = true
(warning)) Method deprecatedMethod is deprecated with reason: Use another instance method
inside deprecated instance method - instanceMember = hello

這表明這兩種方法都使用了包裝函數(shù)正確包裝，該函數(shù)將一條消息記錄到控制臺并說明棄用原因。

你現(xiàn)在已經使用 TypeScript 創(chuàng)建了你的第一個方法裝飾器。

接下來，我們將學習如何創(chuàng)建 TypeScript 支持的最后一個裝飾器類型，即參數(shù)裝飾器。

創(chuàng)建參數(shù)裝飾器

參數(shù)裝飾器可以用在類方法的參數(shù)中。

在這里，我們將學習如何創(chuàng)建一個與參數(shù)一起使用的裝飾器函數(shù)，

接收以下參數(shù)：

對于靜態(tài)屬性，類的構造函數(shù)。對于所有其他屬性，類的原型。
成員的姓名。

方法參數(shù)列表中參數(shù)的索引。

無法更改與參數(shù)本身相關的任何內容，因此，此類裝飾器僅對觀察參數(shù)使用本身有用（除非您使用更高級的東西，例如反射元數(shù)據(jù)）。

這是一個裝飾器的示例，它打印被裝飾的參數(shù)的索引以及方法名稱：

function print(target: Object, propertyKey: string, parameterIndex: number) {
console.log(`Decorating param ${parameterIndex} from ${propertyKey}`);
}

然后，你可以像這樣使用你的參數(shù)裝飾器：

class TestClass {
  testMethod(param0: any, @print param1: any) {}
}

運行上述代碼應在控制臺中顯示以下內容：

Decorating param 1 from testMethod

我們現(xiàn)在已經創(chuàng)建并執(zhí)行了一個參數(shù)裝飾器，并打印出返回裝飾參數(shù)索引的結果。

總結

在本教程中，我們已經實現(xiàn)了 TypeScript 支持的所有裝飾器，將它們與類一起使用，并了解了它們之間的區(qū)別。

現(xiàn)在可以開始編寫自己的裝飾器來減少代碼庫中的樣板代碼，或者更加自信地使用帶有庫（例如 Mobx）的裝飾器。

以上就是我跟你分享的全部內容，如果你覺得有用，請記得分享給你身邊的朋友，也許能夠幫助到他。

最后，感謝您的閱讀，祝編程愉快！

網(wǎng)頁名稱：如何在TypeScript中使用裝飾器
鏈接地址：http://fisionsoft.com.cn/article/djpopce.html