面試題-TS(八)：什么是裝飾器（decorators）？如何在 TypeScript 中使用它們？
在TypeScript中，裝飾器（Decorators）是一種用于增強代碼功能的特殊類型聲明。裝飾器提供了一種在類、方法、屬性等代碼元素上注釋或修改的方式，使得我們可以通過裝飾器來擴展、修改或監(jiān)視代碼的行為。通過使用裝飾器，我們可以在不修改原始代碼的情況下，給代碼添加新的功能，提高代碼的可維護性和靈活性。
一、什么是裝飾器？
裝飾器是一種特殊類型的聲明，它以@符號為前綴，后跟一個表達式，通常是一個函數(shù)。裝飾器可以附著在類、方法、屬性等代碼元素上，并在運行時對這些元素進行注釋或修改。
在TypeScript中，裝飾器的使用主要通過以下兩種方式：
- 類裝飾器：裝飾類的聲明。
- 方法裝飾器、屬性裝飾器、參數(shù)裝飾器：裝飾類中的方法、屬性和參數(shù)。
二、如何定義裝飾器？
裝飾器本質(zhì)上是一個函數(shù)，它接收三個參數(shù)：
- 對于類裝飾器，它的參數(shù)是類的構(gòu)造函數(shù)。
- 對于方法裝飾器，它的參數(shù)是類的原型對象、方法名和方法的屬性描述符。
- 對于屬性裝飾器，它的參數(shù)是類的原型對象和屬性名。
- 對于參數(shù)裝飾器，它的參數(shù)是類的原型對象、方法名和參數(shù)的索引。
裝飾器函數(shù)可以根據(jù)這些參數(shù)來獲取或修改類、方法、屬性或參數(shù)的信息，并實現(xiàn)相應的功能。
以下是一個簡單的裝飾器示例，用于在類上添加一個日志：
function logClass(target: Function) {
console.log("Class logged: ", target);
}
@logClass
class MyClass {
// ...
}
在上面的示例中，我們定義了一個裝飾器函數(shù)logClass，它接收類的構(gòu)造函數(shù)target作為參數(shù)，并在控制臺輸出類的構(gòu)造函數(shù)。然后我們使用裝飾器@logClass來裝飾MyClass類。
三、如何在 TypeScript 中使用裝飾器？
要在TypeScript中使用裝飾器，首先需要在tsconfig.json中啟用experimentalDecorators選項：
{
"compilerOptions": {
"experimentalDecorators": true
}
}
然后，我們就可以在類、方法、屬性和參數(shù)上使用裝飾器了。
類裝飾器
類裝飾器是應用于類聲明的裝飾器。它會在類聲明時調(diào)用，并接收類的構(gòu)造函數(shù)作為參數(shù)。類裝飾器通常用于修改或擴展類的行為。
以下是一個簡單的類裝飾器示例，用于添加一個靜態(tài)屬性：
function addStaticProperty(target: Function) {
target.staticProperty = "This is a static property.";
}
@addStaticProperty
class MyClass {
// ...
}
console.log(MyClass.staticProperty); // 輸出：This is a static property.
在上面的示例中，我們定義了一個類裝飾器addStaticProperty，它在類聲明時添加了一個靜態(tài)屬性staticProperty。然后我們使用裝飾器@addStaticProperty來裝飾MyClass類，并在控制臺輸出靜態(tài)屬性的值。
方法裝飾器
方法裝飾器是應用于類方法的裝飾器。它會在方法聲明時調(diào)用，并接收類的原型對象、方法名和方法的屬性描述符作為參數(shù)。方法裝飾器通常用于修改或監(jiān)視方法的行為。
以下是一個簡單的方法裝飾器示例，用于添加一個日志：
function logMethod(target: any, methodName: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log("Method logged: ", methodName);
return originalMethod.apply(this, args);
};
}
class MyClass {
@logMethod
greet(name: string) {
return `Hello, ${name}!`;
}
}
const myClass = new MyClass();
myClass.greet("John"); // 輸出：Method logged: greet
// 輸出：Hello, John!
在上面的示例中，我們定義了一個方法裝飾器logMethod，它在方法聲明時添加了一個日志功能。然后我們使用裝飾器@logMethod來裝飾MyClass類的greet方法。
屬性裝飾器
屬性裝飾器是應用于類屬性的裝飾器。它會在屬性聲明時調(diào)用，并接收類的原型對象和屬性名作為參數(shù)。屬性裝飾器通常用于修改或監(jiān)視屬性的行為。
以下是一個簡單的屬性裝飾器示例，用于添加一個日志：
function logProperty(target: any, propertyName: string) {
let value = target[propertyName];
const getter = function () {
console.log("Property logged: ", propertyName);
return value;
};
const setter = function (newVal: any) {
console.log("Property set: ", propertyName);
value = newVal;
};
Object.defineProperty(target, propertyName, {
get: getter,
set: setter,
});
}
class MyClass {
@logProperty
message: string = "Hello";
}
const myClass = new MyClass();
console.log(myClass.message); // 輸出：Property logged: message
// 輸出：Hello
myClass.message = "World"; // 輸出：Property set: message
console.log(myClass.message); // 輸出：Property logged: message
// 輸出：World
在上面的示例中，我們定義了一個屬性裝飾器logProperty，它在屬性聲明時添加了一個日志功能。然后我們使用裝飾器@logProperty來裝飾MyClass類的message屬性。
參數(shù)裝飾器
參數(shù)裝飾器是應用于類方法參數(shù)的裝飾器。它會在方法參數(shù)聲明時調(diào)用，并接收類的原型對象、方法名和參數(shù)的索引作為參數(shù)。參數(shù)裝飾器通常用于修改或監(jiān)視方法參數(shù)的行為。
以下是一個簡單的參數(shù)裝飾器示例，用于添加一個日志：
function logParameter(target: any, methodName: string, parameterIndex: number) {
console.log("Parameter logged: ", methodName, parameterIndex);
}
class MyClass {
greet(@logParameter name: string) {
return `Hello, ${name}!`;
}
}
const myClass = new MyClass();
myClass.greet("John"); // 輸出：Parameter logged: greet 0
// 輸出：Hello, John!
在上面的示例中，我們定義了一個參數(shù)裝飾器logParameter，它在方法參數(shù)聲明時添加了一個日志功能。然后我們使用裝飾器@logParameter來裝飾MyClass類的greet方法的name參數(shù)。
四、裝飾器組合
在TypeScript中，我們可以將多個裝飾器組合在一起使用。裝飾器組合的順序是從上到下執(zhí)行的，即從外到內(nèi)。
以下是一個裝飾器組合的示例：
function logClass(target: Function) {
console.log("Class logged: ", target);
}
function addStaticProperty(target: Function) {
target.staticProperty = "This is a static property.";
}
@logClass
@addStaticProperty
class MyClass {
// ...
}
console.log(MyClass.staticProperty); // 輸出：This is a static property.
在上面的示例中，我們先使用裝飾器@addStaticProperty來裝飾MyClass類，然后再使用裝飾器@logClass來裝飾它。由于裝飾器組合的順序是從外到內(nèi)執(zhí)行的，所以先執(zhí)行的是@addStaticProperty裝飾器，再執(zhí)行的是@logClass裝飾器。
五、自定義裝飾器
除了使用已有的裝飾器，我們還可以自定義裝飾器來實現(xiàn)特定的功能。
以下是一個簡單的自定義裝飾器示例，用于計算方法執(zhí)行的時間：
function logExecutionTime(target: any, methodName: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
console.time(methodName);
const result = originalMethod.apply(this, args);
console.timeEnd(methodName);
return result;
};
}
class MyClass {
@logExecutionTime
longRunningTask() {
// 模擬耗時任務
for (let i = 0; i < 1000000000; i++) {}
}
}
const myClass = new MyClass();
myClass.longRunningTask(); // 輸出：longRunningTask: 2804.869ms
在上面的示例中，我們定義了一個自定義裝飾器logExecutionTime，它在方法執(zhí)行前后添加了計時功能。然后我們使用裝飾器@logExecutionTime來裝飾MyClass類的longRunningTask方法。
六、裝飾器工廠
裝飾器工廠是一個返回裝飾器的函數(shù)。它可以接收參數(shù)，并返回一個裝飾器函數(shù)。
以下是一個簡單的裝飾器工廠示例，用于添加一個指定的前綴：
function addPrefix(prefix: string) {
return function (target: any, propertyName: string) {
const value = target[propertyName];
Object.defineProperty(target, propertyName, {
get: function () {
return prefix + value;
},
set: function (newVal: any) {
value = newVal;
},
});
};
}
class MyClass {
@addPrefix("Hello, ")
message: string = "World";
}
const myClass = new MyClass();
console.log(myClass.message); // 輸出：Hello, World
在上面的示例中，我們定義了一個裝飾器工廠addPrefix，它返回一個裝飾器函數(shù)，用于在屬性的值前面添加指定的前綴。然后我們使用裝飾器@addPrefix("Hello, ")來裝飾MyClass類的message屬性。
七、裝飾器的應用場景
裝飾器在代碼中有許多應用場景。以下是一些常見的用例：
-
日志記錄：在方法或類上添加日志功能，用于記錄方法的執(zhí)行過程和結(jié)果。
-
性能監(jiān)控：在方法或類上添加性能監(jiān)控功能，用于計算方法的執(zhí)行時間。
-
權(quán)限驗證：在方法或類上添加權(quán)限驗證功能，用于檢查用戶是否有權(quán)執(zhí)行某個操作。
-
數(shù)據(jù)驗證：在方法或類上添加數(shù)據(jù)驗證功能，用于檢查輸入數(shù)據(jù)是否合法。
-
緩存處理：在方法或類上添加緩存處理功能，用于緩存方法的結(jié)果。文章來源：http://www.zghlxwxcb.cn/news/detail-608536.html
總結(jié)
在TypeScript中，裝飾器是一種用于增強代碼功能的特殊類型聲明。裝飾器提供了一種在類、方法、屬性等代碼元素上注釋或修改的方式，使得我們可以通過裝飾器來擴展、修改或監(jiān)視代碼的行為。通過使用裝飾器，我們可以在不修改原始代碼的情況下，給代碼添加新的功能，提高代碼的可維護性和靈活性。裝飾器有類裝飾器、方法裝飾器、屬性裝飾器和參數(shù)裝飾器等幾種類型，每種類型有不同的使用場景和應用方式。讓我們充分利用裝飾器的優(yōu)勢，提高我們的代碼功能和可讀性，構(gòu)建出更健壯和可維護的應用程序。文章來源地址http://www.zghlxwxcb.cn/news/detail-608536.html
到了這里，關(guān)于面試題-TS(八)：什么是裝飾器（decorators）？如何在 TypeScript 中使用它們？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
