TypeScript reflect-metadata 結合方法裝飾器實現的一個自定義語法檢查的例子

i042416發表於2021-07-01

[reflect-metadata](https://saul-mirone.github.io/zh-hans/a-complete-guide-to-typescript-decorator/)

例子：

```typescript
import 'reflect-metadata';

function validate(
  target: Object,
  key: string,
  descriptor: PropertyDescriptor
) {
  const originalFn = descriptor.value;

// 獲取引數的編譯期型別
  const designParamTypes = Reflect
    .getMetadata('design:paramtypes', target, key);

descriptor.value = function (...args: any[]) {
    args.forEach((arg, index) => {

const paramType = designParamTypes[index];

const result = arg.constructor === paramType
        || arg instanceof paramType;

if (!result) {
        throw new Error(
          `Failed for validating parameter: ${arg} of the index: ${index}`
        );
      }
    });

return originalFn.call(this, ...args);
  }
}

class C {
  @validate
  sayRepeat(word: string, x: number) {
    return Array(x).fill(word).join('');
  }
}

const c = new C();
c.sayRepeat('hello', 2); // pass
c.sayRepeat('', 'lol' as any); // throw an error
```

方法裝飾器裡包含的描述器形狀如下：

![](https://img-blog.csdnimg.cn/img_convert/aa821730612d3740bedf66ebcd529606.png)

透過反射 API，提取出來的方法引數分別為 String 和 Number：

![](https://img-blog.csdnimg.cn/img_convert/97a1544337d9612b4a5e74e1af814578.png)

Reflect.getMetadata 的輸入和輸出的文件如下：

![](https://img-blog.csdnimg.cn/img_convert/0280f5475accc944e5ca6b4a54cb3e9a.png)

可見，我們的自定義 validate 函式，一定程度上模擬了 TypeScript 編譯器的工作。

![](https://img-blog.csdnimg.cn/img_convert/7c71c3a1cd6683adfb59d97198761d42.png)

就算有開發人員在呼叫 sayRepeat 方法時，用 as any 的方式繞過了編譯器的靜態語法檢查，在執行時，我們的 @validate 裝飾器實現，也會將這種違規的行為檢測出來。

![](https://img-blog.csdnimg.cn/img_convert/f33c2a7c4d67d5436c90127b264f815b.png)

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2779253/，如需轉載，請註明出處，否則將追究法律責任。

SAPGUI裡實現自定義的語法檢查
2018-03-16
GUI
如何實現SAP GUI的自定義語法檢查(Syntax check)
2020-08-23
GUI
使用 TypeScript 自定義裝飾器給類的方法增添監聽器 Listener
2021-07-01
TypeScript
[一、基本語法]4@Builder裝飾器：自定義構建函式
2024-06-28
UI函式
Django 常用的自定義裝飾器
2021-02-23
Django
使用 TypeScript 自定義裝飾器給類的屬性增添監聽器 Listener
2021-07-01
TypeScript
OpenHarmony裝飾指定自定義元件：@BuilderParam裝飾器
2023-09-27
元件UI
使用 TypeScript 裝飾器裝飾你的程式碼
2019-06-28
TypeScript
TypeScript 類裝飾器的一個例子和使用單步除錯搞清楚其執行原理
2021-07-01
TypeScript除錯
Python 語法之裝飾器
2019-12-19
Python
OpenHarmony自定義構建函式：@Builder裝飾器
2023-09-26
函式UI
Javascript中裝飾器的實現原理
2018-03-23
JavaScript
Python中裝飾器語法詳解
2018-08-02
Python
使用PHP實現詞法分析與自定義語言
2022-01-11
PHP詞法分析
JavaScript實現一個簡單的Markdown語法解析器
2023-03-26
JavaScript
vscode使用ES6裝飾器器語法
2024-04-15
VSCode
TypeScript 中裝飾器的理解？應用場景？
2021-09-15
TypeScript
裝飾器、語法糖、修復技術
2024-05-20
PostgreSQL一複合查詢SQL優化例子-(多個exists,範圍檢索,IN檢索,模糊檢索組合)
2018-09-15
SQL優化
實現一個自己的語法解析器與執行引擎
2022-04-12
Vue結合原生js實現自定義元件自動生成
2021-09-09
VueJS元件
聊聊Typescript中的設計模式——裝飾器篇(decorators)
2018-12-17
TypeScript設計模式
自定義梯形view與XRecyclerView的結合
2018-06-25
View
使用JWT、攔截器與ThreadLocal實現在任意位置獲取Token中的資訊，並結合自定義註解實現對方法的鑑權
2023-11-14
JWTthread
Java設計模式-17、直譯器模式-自定義語言的實現
2020-11-22
Java設計模式
EventSource的自定義實現
2021-05-23
【Flask】路由裝飾器、路徑傳參、自定義路由轉換器
2020-10-29
Flask路由
如何自定義python語法.
2020-11-22
Python
學習 ES7 語法 decorator 裝飾器
2019-03-30
如何動手實現一個自定義的通訊協議？
2019-05-05
協議
如何用 Decorator 裝飾你的 Typescript
2019-12-26
TypeScript
python使用裝飾器實現的事件中心（監聽器）
2024-06-10
Python事件
淺談TypeScript型別、介面、裝飾器
2020-01-03
TypeScript型別
Windows 10中檢查已安裝編解碼器的幾個方法
2021-04-29
Windows
20190118-自定義實現replace方法
2019-01-18
自定義一個事件聚合器
2024-07-31
事件
一個例子帶你瞭解兩種自定義註解
2019-03-04
SAP Spartacus SSR 中的 shimming 實現的一個例子
2022-10-15

TypeScript reflect-metadata 結合方法裝飾器實現的一個自定義語法檢查的例子

相關文章