如何创建简单的 Typescript 元数据注释

2023-11-22

我有一些字段需要在发送到服务器端之前进行格式化。

所以,我想使用自定义序列化器序列化我的打字稿类的一些字段,这样的事情是理想的:

export class Person {
    @serializeWith(MyDateSerializer)
    private date: Date;
}

post(url, value) {
    this.http.post(url, JSON.stringfy(value, (key, val) => {
       if (//value has serializeWith annotation) {
           return //serialize with custom serializer
       }
    }));
}

任何接近此的内容都是可以接受的,欢迎任何帮助。 谢谢


我的下面的解决方案是建立在以下之上的:

  1. TypeScript 装饰器
  2. 元数据规范(早期/实验)

先决条件:

  1. 在 TypeScript 中启用装饰器和装饰器元数据支持tsconfig.json或者在命令行上:

tsconfig.json

{
    "compilerOptions": {
        "target": "es5", // you have to target es5+
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
        // ....
    }
    // ...
}
  1. Install reflect-metadata package

    npm install --save-devreflect-metadata

serializerWith装修工(工厂)

装饰器工厂是一种接受一个或多个参数并返回 TypeScript 在生成的 JavaScript 代码中使用的装饰器函数的东西。

我选择直接将序列化函数传递到我的装饰器工厂中并使用reflect-metadata实现元数据规范,将序列化器函数与属性关联起来。我稍后将检索它并在运行时使用它。

function serializeWith(serializer: (input: any) => string) : (target: any, propertyKey: string) => void {
    return function(target: any, propertyKey: string) {
        // serialization here is the metadata key (something like a category)
        Reflect.defineMetadata("serialization", serializer, target, propertyKey);
    }
}

Use

给定这个序列化器:

function MyDateSerializer(value : any) : string {
    console.log("MyDateSerializer called");
    return "dummy value";
}

然后我们可以像这样应用装饰器工厂:

import "reflect-metadata"; // has to be imported before any decorator which uses it is applied

class Greeter {
    @serializeWith(MyDateSerializer)
    public greeting : string;

    constructor(message: string) {
        this.greeting = message;
    }
}

我们可以像这样获取和使用序列化器:

var greetingInstance = new Greeter("hi");

var serializerFunc : (input: any) => string = Reflect.getMetadata("serialization", greetingInstance, "greeting");

serializerFunc(greetingInstance.greeting);

Sample

main.ts

import "reflect-metadata";

function serializeWith(serializer: (input: any) => string) : (target: any, propertyKey: string) => void {
    return function(target: any, propertyKey: string) {
        console.log("serializeWith called: adding metadata");
        Reflect.defineMetadata("serialization", serializer, target, propertyKey);
    }
}


function MyDateSerializer(value : any) : string {
    console.log("MyDateSerializer called");
    return "bla";
}

class Greeter {
    @serializeWith(MyDateSerializer)
    public greeting : string;

    constructor(message: string) {
        console.log("Greeter constructor");
        this.greeting = message;
    }
}

var greetingInstance = new Greeter("hi");

var serializerFunc : (input: any) => string = Reflect.getMetadata("serialization", greetingInstance, "greeting");

var serializedValue = serializerFunc(greetingInstance.greeting);
console.log(serializedValue);

Outputs

c:\code\tmp\lll>node build\main.js
serializeWith called: adding metadata
Greeter constructor
MyDateSerializer called
bla
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何创建简单的 Typescript 元数据注释 的相关文章

  • 在 shell 中处理 json 时,例如使用curl,如何正确地将多个 jq 语句链接在一起?

    我是 jq 新手 所以如果这不是 jq 问题或 json 问题 请为我指出正确的方向 我不确定正确的术语 因此我很难正确地阐明问题 我正在使用curl 来提取一些json 我想过滤掉具有特定值的键 以下是一些示例 json id 593f4
  • 使用 ngx-translate 时更改 URL

    当有人使用 ngx translate 单击所选语言时 我尝试更改 URL 我想我应该通过订阅语言更改事件然后修改当前的 url 以反映所选的语言来做到这一点 因为我是新手 所以我不确定是否需要服务来做到这一点 或者可能是另一种解决方法 我
  • React Native / Laravel - 向 API 发送请求

    我正在实现一个移动应用程序 它使用 Laravel 作为 API 与数据库进行通信 我想将用户名和密码从我的 React Native 应用程序发送到 Laravel 我正在使用以下代码来执行此操作 fetch mysite com api
  • 如何断点和调试角度模板?

    例如 在 React 中 您可以在视图 模板中放置一个断点并检查发生了什么 编辑 假设我想看看这里发生了什么 h2 hero name uppercase Details h2 div span id span hero id div di
  • 来自 ajax 的 Bootstrap 表 json

    我有 ajax 和 bootstrap 表的问题 我有一个 ajax JSON 我用这个方法调用 document ready function ajax url php process php method fetchdata dataT
  • npm install 的问题(Angular)

    今天我尝试创建一个新项目 所以我使用这个命令 ng new NAME style less 并在我的cmder中弹出错误和警告 所以我卸载了 Roaming npm 和 npm cache 中的节点和文件 然后我安装了node并再次下载cm
  • 从 ApiController 中的 json 序列化中排除属性

    我试图在 Web ApiControllers 中排除属性被序列化为 JSON 我已经验证了以下 2 个场景的工作原理 我已在我希望排除的属性中包含以下属性 System Web Script Serialization ScriptIgn
  • Jasmine 测试中的模板解析错误,但实际应用程序中没有错误

    我开发了 Jasmine 规范来测试 Angular 2 组件MiddleRowComponent 当我运行 jasmine 测试时 出现以下错误 zone js 388 Unhandled Promise rejection Templa
  • 如何在 TypeScript 中导入 JavaScript 模块

    我有一些 JavaScript 代码正在尝试转换为 Typescript 据推测 TypeScript 是 JavaScript 的超集 但以下内容有编译器错误 假设我没有将 ko 库导入到 typescript 中 我将如何转换以下代码
  • JS文件中的System.register是什么意思?

    在 Angular 2 中使用指令时 JS 文件中的 System register 是什么意思 我认为这个问题并不特定于 Angular2 中的指令 它是关于 ES6 TypeScript 和其他使用 SystemJS 的现代编译器的一般
  • Primeng DataTable Dropdown 不适用于通过列的选项

    我正在基于 PrimeNG 的 DataTable 为我的应用程序制作一个可重用的表组件 我的组件有以下 html 代码
  • 如何以编程方式枚举枚举类型?

    假设我有一个 TypeScriptenum MyEnum 如下 enum MyEnum First Second Third TypeScript 0 9 5 中生成数组的最佳方法是什么enum价值观 例子 var choices MyEn
  • 使用 Javascript/Node.js 在代码内执行 mongoimport

    node js javascript 中是否有任何库可供个人使用mongoimport在代码中 据我了解 mongoimport 有点像 exe 您必须先执行它 然后才能使用其文本输入环境 是否可以在我的代码中执行 mongoimport
  • 在 Mono 中反序列化 JSON 数据

    使用 Monodroid 时 是否有一种简单的方法可以将简单的 JSON 字符串反序列化为 NET 对象 System Json 只提供序列化 不提供反序列化 我尝试过的各种第三方库都会导致 Mono Monodroid 出现问题 谢谢 f
  • 如何在 C# 中将 Json 转换为对象

    我想将 Json 转换为 C 中的对象 这里的 Json 是 值 e920ce0f e3f5 4c6f 8e3d d2fbc51990e4 如何使用 Object 问题看似愚蠢 但其实并不那么愚蠢 我没有简单的 Json 我有 IEnume
  • JAVA中遍历JSON数据

    我是 JSON 新手 我使用 HTTPUrlConnections 并在 JAVA 程序中获得一些响应 响应数据将类似于 data id 1 userId 1 name ABC modified 2014 12 04 created 201
  • 如何检查 typescript 的 repl (ts-node) 中的类型?

    所以我输入了以下内容 type Duck colors string featheres number type DuckProps keyof Duck 例如 我如何检查 验证DuckProps具有价值 colors feathers 我
  • 此版本的 CLI 仅与 Angular 版本 5.0.0 或更高版本兼容错误

    我已经有 Angular 项目在 4 版本中运行 在安装新项目时 不幸的是我安装了 6 版本的 Angular cli 在以 4 版本运行的旧项目中运行 ngserve 命令时 这会引发错误 您的全局 Angular CLI 版本大于本地版
  • Typescript 中的 Angular 服务具有依赖注入和缩小功能

    我现在正在努力让我的头脑围绕 Angularjs 我目前正在寻找服务 我也使用打字稿来编写代码 现在 从网络上的示例中 我看到人们在打字稿中使用如下所示的服务 class Service constructor private http n
  • VS Code 扩展 - 获取完整路径

    我正在为 VS Code 编写一个插件 我需要知道调用扩展的文件的路径 无论是从编辑器上下文菜单或资源管理器上下文菜单调用还是用户只需键入扩展命令 function activate context get full path of the

随机推荐

  • 在目标 c 中将数字转换为单词

    我需要写下这样的数字 1 gt 耶克 123 gt 我的朋友 1 123 gt 耶克 赫扎尔 耶克萨德 比斯特 奥塞 3 002 001 gt Se milion o do hezar o yek 我是目标 c 的初学者 我用 c 编写它
  • java for 循环不工作

    我希望这不是一个愚蠢的问题 但我已经查找了我能找到的每个示例 但似乎我的代码仍然正确 但它仍然无法正常工作 我输入一个数字 然后它会转到下一个数字一行代码而不是循环 我用它来用用户输入的数字填充数组 我很感激任何帮助 谢谢 for i 0
  • 如何使用 talend 和 sql server 更快地加载数据

    我使用 Talend 将数据加载到 sql server 数据库中 看来我的工作最薄弱的地方不是数据处理 而是数据库中的有效负载 其速度不超过 17 行 秒 有趣的是 我可以同时启动 5 个作业 它们都将以 17 行 秒的速度加载 什么可以
  • Double.ToString() 何时返回科学计数形式的值?

    我认为它与前导零或尾随零的数量有关 但我在 msdn 中找不到任何可以给我具体答案的内容 在什么时候Double ToString CultureInfo InvariantCulture 开始以科学记数法返回值 从文档中Double To
  • 使用 IOS 8.3 的 Safari 上的 Angular ng-click 问题

    这是一个奇怪的问题 很难产生和探索 在使用 Angular 构建 Web 应用程序时 我的老板发现应用程序上的所有按钮都使用ng click指令不起作用 现在 这个问题只发生在iphone 6 with IOS 8 3 and using
  • 使用nodejs gcloud api移动/重命名Google Cloud Storage中的文件夹

    我正在尝试使用 gcloud api 重命名或移动 google 云存储中的文件夹 类似的问题解释了如何删除文件夹 使用nodejs gcloud api删除Google Cloud Storage中的文件夹 但是如何重命名文件夹呢 或转向
  • 使用C#从USB读取数据?

    我不想读取串行端口或其他可能的简单快捷方式 我想知道如何使用 C 读取笔记本电脑中的 USB 端口 无论您是否可以推荐一个网站或解释一下流程的流程 我将非常感谢您的帮助 如果你想做 USB 开发 Jan Axelson 的 USB Comp
  • Combobox Cascading 需要更具体的cascadeFrom 选项

    我想使用 Kendo UI ComboBox 的 CascadeFrom 功能 但令我沮丧的是 该选项似乎只接受 ID 现在我无法使用该 ID 因为组合框是动态添加的 并且可能多次添加 从而导致多个控件具有相同的 ID 有谁知道如何将特定的
  • hprof 中“无引用”的对象

    我正在调查一个hprofVisualVM 中的文件 服务器运行 JDK 1 4 2 30 并具有 1 GB 堆 NewSize 为 200 Mb hprof 显示 56000 个实例占用了 71 的堆int 在 VisualVM 中查看时
  • 现在允许使用 Instagram API 上传视频吗?

    据 Instagram 报道文档 Instagram 仅允许 API 上传图像 JPG PNG 一款名为 Cinamatic 的新 iPhone 应用程序允许用户通过 Cinamatic 登录 Instagram 后将视频上传到 Insta
  • Android Studio w/gradle:包 r 不存在

    最终编辑 这是一个很长的问题 需要进行多次编辑 而且我不一定在每一步都做正确的事情 对于任何偶然发现这个问题并且在 Android Studio 中将项目转换为 gradle 时遇到困难的人 我建议检查一下这个存储库中提到的问题 16718
  • 如何让 Powermock 与 Dexmaker 配合使用

    我正在尝试合并动力模拟使用以下 build gradle 配置作为我的 Android 测试的依赖项 dependencies compile com android support appcompat v7 21 0 androidTes
  • `exec':字符串包含空字节(ArgumentError)

    cmd snv co rep username svn user password pxs puts cmd this code wotks and prints all vars values normally exec cmd xpto
  • 无法为 Android 教程构建 GStreamer

    我在尝试构建 GStreamer Android 教程时遇到了许多问题 我的环境是 Mac OS X 7 Android SDK 版本 17 安卓NDK 8d 我能够在 Eclipse 中和命令行中构建和运行 NDK 示例 我已经下载了ht
  • YAML 预处理器/宏处理器

    有没有一种简单的方法可以将预处理器 宏处理器与 YAML 文件一起使用 即我正在考虑类似于 C 预处理器的东西 我们有很多描述各种数据结构的平面文本文件 它们目前采用我们自己的内部格式 并使用内部解析器读取 我想切换到 YAML 文件以利用
  • SQLCLR 和 DateTime2

    使用 SQL Server 2008 Visual Studio 2005 net 2 0 SP2 支持新的 SQL Server 2008 数据类型 我正在尝试编写一个 SQLCLR 函数 该函数将 DateTime2 作为输入并返回另一
  • 如何正确处理UnsafeMutablePointer

    我有点困惑 我什么时候必须调用 free 以及何时 destroy dealloc 我正在编写一个学习核心音频的简短代码片段 我想如果我打电话UnsafeMutablePointer
  • iPhone-Twitter API 获取用户关注者/正在关注

    我希望能够使用适用于 ios 5 的 Twitter API 将所有用户关注者和关注用户名放入NSDictionary 但我遇到了障碍 我不知道如何使用 Twitter API 来执行此操作 但我的主要问题是首先获取用户的用户名 当我什至不
  • 为什么 PHP 的自动加载功能在 CLI 模式下不起作用?

    这更多的是为了我自己的个人启发 但是 这是一直困扰我的事情 为什么 PHP 在 CLI 模式下不能执行 自动加载 我多年来一直在阅读此免责声明 但我从未读过任何涉及原因的内容 http php net manual en language
  • 如何创建简单的 Typescript 元数据注释

    我有一些字段需要在发送到服务器端之前进行格式化 所以 我想使用自定义序列化器序列化我的打字稿类的一些字段 这样的事情是理想的 export class Person serializeWith MyDateSerializer privat