{"id":828,"date":"2023-06-11T14:24:00","date_gmt":"2023-06-11T22:24:00","guid":{"rendered":"https:\/\/wayne-wu.com\/?p=828"},"modified":"2025-09-11T23:57:40","modified_gmt":"2025-09-12T07:57:40","slug":"%e5%88%a9%e7%94%a8%e8%a3%85%e9%a5%b0%e5%99%a8%e8%bf%9b%e8%a1%8c-oop-%e5%bc%80%e5%8f%91%e7%9a%84%e5%ae%9e%e8%b7%b5","status":"publish","type":"post","link":"https:\/\/wayne-wu.com\/archives\/828","title":{"rendered":"\u5229\u7528\u88c5\u9970\u5668\u8fdb\u884c OOP \u5f00\u53d1\u7684\u5b9e\u8df5"},"content":{"rendered":"\n
\n

\u672c\u6587\u5c06\u4ecb\u7ecd\u5982\u4f55\u5229\u7528\u88c5\u9970\u5668\u8fdb\u884c OOP \u5f00\u53d1\uff0c\u4ee5\u53ca\u5982\u4f55\u5229\u7528\u88c5\u9970\u5668\u89e3\u51b3\u524d\u7aef\u5f00\u53d1\u4e2d\u7684\u4e00\u4e9b\u95ee\u9898\uff0c\u4f46\u622a\u81f3\u76ee\u524d\u4e3a\u6b62(2023-06-11T17:15:00+08:00)\uff0c\u88c5\u9970\u5668\u5728 EcmaScript \u4e2d\u8fd8\u5904\u4e8e Stage 3 \u9636\u6bb5\uff0c\u56e0\u6b64\u672c\u6587\u5b9e\u73b0\u5b8c\u5168\u57fa\u4e8e typescript \u8bed\u6cd5\u6807\u51c6\u3002<\/p>\n<\/blockquote>\n\n\n\n

\u5728\u5e38\u89c1\u7684\u524d\u540e\u7aef\u5206\u79bb\u9879\u76ee\u4e2d\uff0c\u4f3c\u4e4e\u5927\u5bb6\u90fd\u9075\u5b88\u8fd9\u79cd\u89c4\u5219\uff1a\u5bf9\u4e8e\u63a5\u53e3\u4e00\u822c\u4f1a\u5355\u72ec\u5b9a\u4e49\u4e00\u4e2a\u6587\u4ef6\u5939\uff0c\u7136\u540e\u5728\u5176\u4e2d\u5b9a\u4e49\u5404\u4e2a\u63a5\u53e3\u7684\u8bf7\u6c42\u51fd\u6570\uff0c\u4e0e\u4e4b\u76f8\u5e94\u7684\u7c7b\u578b\u5b9a\u4e49\uff08\u5e38\u5e38\u662finterface\uff09\u4e5f\u4f1a\u653e\u5728\u4e00\u8d77\uff0c\u800c\u8bf7\u6c42\u53c2\u6570\u7684\u7ec4\u88c5\u5904\u7406\u5e38\u5e38\u653e\u5728\u7ec4\u4ef6\u5f53\u4e2d\u8fdb\u884c\uff0c\u8fd9\u6837\u5c06\u63a5\u53e3\u4e0e\u4e1a\u52a1\u903b\u8f91\u8fdb\u884c\u5145\u5206\u89e3\u8026\uff0c\u65b9\u4fbf\u7ba1\u7406\u3002\u4f46\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d\uff0c\u8fd9\u79cd\u89c4\u5219\u4e0b\u7684\u5f00\u53d1\u4f53\u9a8c\u6709\u65f6\u5e76\u4e0d\u662f\u90a3\u4e48\u53cb\u597d\u3002<\/p>\n\n\n\n

\u95ee\u9898\u662f\u4ec0\u4e48<\/h2>\n\n\n\n

interface \u4e0d\u8db3\u4ee5\u5b9a\u4e49\u4e00\u4e2a\u6570\u636e\u6a21\u578b<\/strong>\uff1a\u524d\u7aef\u9700\u8981\u7684\u6570\u636e\uff08Model\uff09\u53ef\u80fd\u662f\u7ecf\u8fc7\u4e00\u7cfb\u5217\u5904\u7406\u540e\u7684\u54cd\u5e94\u6570\u636e\uff0c\u800c\u4e0d\u662f\u539f\u59cb\u7684\u63a5\u53e3\u8fd4\u56de\uff08\u5927\u90e8\u5206\u53ef\u4ee5\u89c6\u4e3a Entity\uff09\uff0c\u5355\u7eaf\u901a\u8fc7 interface \u8fdb\u884c\u7c7b\u578b\u7ea6\u675f\u5e38\u5e38\u4f1a\u663e\u5f97\u529b\u4e0d\u4ece\u5fc3\uff0cModel \u4e0e Entity \u4e4b\u95f4\u7684\u8f6c\u6362\u4f1a\u589e\u52a0\u4ee3\u7801\u91cf\u7684\u540c\u65f6\uff0c\u4e5f\u4f1a\u4f7f\u4ee3\u7801\u53d8\u7684\u66f4\u80ae\u810f\u3002\u6bd4\u5982\u4e0b\u9762\u8fd9\u4e2a\u4f8b\u5b50\uff1a<\/p>\n\n\n\n

\/\/ user model and entity<\/em>\n\n\/\/ primitive entity from request<\/em>\n{\n  uid: 1,\n  first_name: 'jack',\n  last_name: 'ma',\n  modified_time: '2023-06-11T14:22:50+08:00',\n  age: 18,\n}\n\n\/\/ forwards to model<\/em>\n{\n  id: 1,\n  firstName: 'jack',\n  lastName: 'ma',\n  name: 'jack ma',\n  age: 18,\n  modifiedTime: new Date('2023-06-11T14:22:50+08:00'),\n  isAdult: true,\n}\n<\/code><\/pre>\n\n\n\n
\u524d\u7aef\u9700\u8981\u7684\u6570\u636e Model \u5b58\u5728 3 \u4e2a\u7531\u63a5\u53e3\u539f\u59cb\u8fd4\u56de Entity \u5904\u7406\u5f97\u6765\u7684\u5c5e\u6027\uff1a\u7531 first_name<\/code> \u548c last_name<\/code> \u7ec4\u6210\u7684 name<\/code>\uff0c\u4ee5\u53ca\u7531 age<\/code> \u8ba1\u7b97\u5f97\u51fa\u7684 isAdult<\/code>\uff0c\u4ee5\u53ca\u65f6\u95f4\u5b57\u7b26\u4e32\u8f6c\u5316\u800c\u6765\u7684 Date \u5bf9\u8c61\u3002\u8fd9 3 \u4e2a\u5c5e\u6027\u5728\u63a5\u53e3\u8fd4\u56de\u7684\u6570\u636e\u4e2d\u5e76\u4e0d\u5b58\u5728\uff0c\u5b83\u4eec\u663e\u7136\u5c5e\u4e8e\u4e24\u79cd\u4e0d\u540c\u7684\u6570\u636e\u7c7b\u578b\uff0c\u6b64\u65f6\uff0c\u5982\u4f55\u53bb\u5b9a\u4e49\u548c\u7ba1\u7406 Type Declaration \u663e\u7136\u4e5f\u4f1a\u53d8\u6210\u4e00\u4e2a\u68d8\u624b\u7684\u95ee\u9898\u3002<\/p>\n\n\n\n
\u7f3a\u5c11\u5bf9 \u5e8f\u5217\u5316\/\u53cd\u5e8f\u5217\u5316 \u64cd\u4f5c\u7684\u5b8c\u5907\u652f\u6301<\/strong>\uff0c\u5e8f\u5217\u5316\u548c\u53cd\u5e8f\u5217\u5316\u662f\u540e\u7aef\u5e38\u89c1\u7684\u64cd\u4f5c\uff0c\u5e76\u4e14\u6709\u7740\u6210\u719f\u5b8c\u5907\u7684\u65b9\u6848\uff0c\u8fd9\u4e9b\u65b9\u6848\u5f88\u591a\u90fd\u63d0\u4f9b\u4e86\u5f3a\u5927\u7684\u6570\u636e\u64cd\u4f5c\u652f\u6301\uff0c\u6bd4\u5982\u5bf9\u8c61\u5b57\u6bb5\u540d\u7684\u6620\u5c04\u3001\u6570\u636e\u7c7b\u578b\u7684\u8f6c\u6362\u7b49\uff0c\u4f46\u5728\u524d\u7aef\u5374\u5f88\u5c11\u88ab\u63d0\u53ca\uff0cJSON.parse()<\/code> \u548c JSON.stringify()<\/code> \u57fa\u672c\u5c31\u662f\u524d\u7aef\u7684\u5e8f\u5217\u5316\u548c\u53cd\u5e8f\u5217\u5316\u7684\u5168\u90e8\u4e86\uff0c\u5b83\u4eec\u9664\u4e86 JS Object \u8f6c JSON String \u6216 JSON String \u8f6c JS Object \u5916\u5c31\u518d\u4e0d\u5177\u5907\u5176\u4ed6\u80fd\u529b\u4e86\uff0c\u6570\u636e\u64cd\u4f5c\u53ca\u8f6c\u6362\u5b8c\u5168\u9700\u8981\u6211\u4eec\u624b\u52a8\u8fdb\u884c\uff0c\u8fd9\u79cd\u5de5\u4f5c\u663e\u5f97\u975e\u5e38\u7684\u539f\u59cb\u548c\u4f4e\u6548\u3002<\/p>\n\n\n\n
\u6570\u636e\u6a21\u578b\u4e0e\u89c6\u56fe\u8fc7\u5ea6\u89e3\u8026\u8ba9\u903b\u8f91\u4ee3\u7801\u8fc7\u4e8e\u5206\u6563<\/strong>\uff0c\u4ece\u8bbe\u8ba1\u6a21\u5f0f\u4e0a\u6765\u8bf4\uff0cAPI\/Entity \u4e0e \u89c6\u56fe\u903b\u8f91\/Model \u7684\u89e3\u8026\u786e\u5b9e\u8ba9\u4ee3\u7801\u7ec4\u7ec7\u53d8\u5f97\u66f4\u52a0\u6e05\u6670\u4e5f\u66f4\u597d\u7ef4\u62a4\uff0c\u4f46\u540c\u65f6\u5e26\u6765\u7684\u95ee\u9898\u662f\uff1a\u529f\u80fd\u903b\u8f91\u7684\u4ee3\u7801\u88ab\u5206\u6563\u6210\u591a\u4e2a\u6a21\u5757\uff0c\u5728\u5f00\u53d1\u65f6\u5e26\u6765\u4e0d\u4fbf\u7684\u540c\u65f6\uff0c\u4e5f\u4f1a\u4f7f\u5f97\u4ee3\u7801\u7684\u53ef\u8bfb\u6027\u53d8\u5dee\uff0c\u56e0\u4e3a\u6211\u4eec\u9700\u8981\u5728\u591a\u4e2a\u6a21\u5757\u4e2d\u6765\u56de\u5207\u6362\uff0c\u624d\u80fd\u7406\u89e3\u4e00\u4e2a\u529f\u80fd\u7684\u5b9e\u73b0\u903b\u8f91\u3002<\/p>\n\n\n\n
\u4e00\u79cd\u601d\u8def<\/h2>\n\n\n\n
\n
\u5728\u6b64\u4e4b\u524d\u6211\u4eec\u7ea6\u5b9a\uff1aJS Plain Object \u8f6c\u6362\u4e3a class \u5b9e\u4f8b\u7684\u64cd\u4f5c\u79f0\u4e3a\u53cd\u5e8f\u5217\u5316\uff0cclass \u5b9e\u4f8b\u8f6c\u6362\u4e3a JS Plain Object \u7684\u64cd\u4f5c\u79f0\u4e3a\u5e8f\u5217\u5316\uff0c\u4e00\u5207\u524d\u7aef\u6240\u9700\u7684\u6570\u636e\u6a21\u578b\u90fd\u79f0\u4e3a Model\uff08\u5305\u62ec Entity\uff09\u3002<\/p>\n<\/blockquote>\n\n\n\n
\n
\u4e0b\u6587\u4e0d\u4f1a\u8fdb\u884c\u8fc7\u591a\u5177\u4f53\u4ee3\u7801\u5b9e\u73b0\uff0c\u800c\u662f\u901a\u8fc7\u4f2a\u4ee3\u7801\u6765\u63cf\u8ff0\u5b9e\u73b0\u601d\u8def\uff0c\u56e0\u4e3a\u5b9e\u73b0\u7ec6\u8282\u5e76\u4e0d\u662f\u672c\u6587\u7684\u91cd\u70b9\u3002<\/strong><\/p>\n<\/blockquote>\n\n\n\n
\u8003\u8651\u4f7f\u7528 class \u4ee3\u66ff interface \u6765\u7ea6\u675f Model \u6570\u636e\u7c7b\u578b\uff0c\u5728 class \u4e0a\u6269\u5c55\u66f4\u591a\u5c5e\u4e8e Model \u76f8\u5173\u7684\u64cd\u4f5c\u3002\u5bf9\u4e8e\u4e0a\u9762\u7684\u4f8b\u5b50\uff0c\u53ef\u4ee5\u8fd9\u6837\uff1a<\/p>\n\n\n\n
class User {\n  id: number\n  firstName: string\n  lastName: string\n  age: number\n  modifiedTime: Date\n\n  constructor(data: any) {\n    this.id = data.uid\n    this.firstName = data.first_name\n    this.lastName = data.last_name\n    this.age = data.age\n    this.modifiedTime = new Date(data.modified_time)\n  }\n\n  get name() {\n    return `${this.firstName} ${this.lastName}`\n  }\n  get isAdult() {\n    return this.age >= 18\n  }\n\n  serialize() {\n    return {\n      id: this.id,\n      first_name: this.firstName,\n      last_name: this.lastName,\n      age: this.age,\n      modified_time: this.modifiedTime.toISOString(),\n    }\n  }\n}\n\nconst model = new User({\/* ... *\/<\/em>}) \/\/ deserialize<\/em>\nconst serialized = model.serialize() \/\/ serialize<\/em>\n<\/code><\/pre>\n\n\n\n
\u800c\u95ee\u9898\u7684\u5173\u952e\u5728\u4e8e\uff1a\u6211\u4eec\u4e0d\u53ef\u80fd\u624b\u52a8\u7f16\u5199\u6240\u6709 Model \u5e8f\u5217\u5316\u548c\u53cd\u5e8f\u5217\u5316\u7684\u5904\u7406\u903b\u8f91\uff0c\u8fd9\u6837\u7684\u5de5\u4f5c\u91cf\u592a\u5927\u4e86\uff0c\u5e76\u4e14\u4e5f\u4e0d\u5229\u4e8e\u7ef4\u62a4\u3002\u6211\u4eec\u9700\u8981\u4e00\u79cd\u81ea\u52a8\u5316\u7684\u65b9\u5f0f\u6765\u5b9e\u73b0\u8fd9\u79cd\u8f6c\u6362\u3002\u800c\u5e8f\u5217\u5316\u4e0e\u53cd\u5e8f\u5217\u5316\u7684\u64cd\u4f5c\u524d\u63d0\u662f\uff1a\u6211\u4eec\u9700\u8981\u9884\u5148\u77e5\u9053 Model \u8eab\u4e0a\u5b58\u5728\u54ea\u4e9b\u5c5e\u6027\u5e76\u4e14\u4e0e Plain Object \u952e\u503c\u4e4b\u95f4\u7684\u6620\u5c04\u5173\u7cfb\uff0c\u5728\u9759\u6001\u8bed\u8a00\u4e2d\uff0c\u8fd9\u79cd\u9884\u77e5\u5de5\u4f5c\u5f80\u5f80\u5728\u7f16\u8bd1\u671f\u5c31\u53ef\u4ee5\u8f7b\u677e\u5b9e\u73b0\uff0c\u4f46\u5bf9\u4e8e JS \u52a8\u6001\u8bed\u8a00\u6765\u8bf4\u4f3c\u4e4e\u4e0d\u662f\u4e00\u4ef6\u5bb9\u6613\u7684\u4e8b\u3002<\/p>\n\n\n\n
\u88c5\u9970\u5668\u4e3a\u6211\u4eec\u63d0\u4f9b\u4e00\u79cd\u53ef\u80fd\u3002\u88c5\u9970\u5668\u662f\u4e00\u79cd\u51fd\u6570\uff0c\u53ef\u4ee5\u5bf9\u88ab\u88c5\u9970\u7684\u7c7b\u3001\u6210\u5458\u6216\u65b9\u6cd5\u53c2\u6570\u8fdb\u884c\u52a8\u6001\u6269\u5c55\uff0c\u5e76\u4e14\u88c5\u9970\u5668\u4f1a\u968f\u7740 class \u7684\u5b9a\u4e49\u800c\u88ab\u6267\u884c\u3002\u56e0\u6b64\u501f\u52a9\u88c5\u9970\u5668\u6211\u4eec\u53ef\u4ee5\u4e3a class \u5c5e\u6027\u6dfb\u52a0\u989d\u5916\u7684\u5143\u4fe1\u606f\uff0c\u8fd9\u4e9b\u5143\u4fe1\u606f\u4fdd\u5b58\u4e86\u8be5\u5c5e\u6027\u5728\u5e8f\u5217\u5316\u548c\u53cd\u5e8f\u5217\u5316\u65f6\u7684\u914d\u7f6e\u4fe1\u606f\uff0c\u5982\u5c5e\u6027\u540d\u3001\u8f6c\u6362\u51fd\u6570\u7b49\u3002\u5728\u6211\u4eec\u7684\u81ea\u52a8 \u5e8f\u5217\u5316\/\u53cd\u5e8f\u5217\u5316 \u4e2d\u5c31\u53ef\u4ee5\u8f7b\u677e\u83b7\u53d6\u8fd9\u4e9b\u5143\u4fe1\u606f\u4ee5\u786e\u5b9a\u8f6c\u6362\u7b56\u7565\u3002\u4e8e\u662f\u6211\u4eec\u5927\u81f4\u4e0a\u53ef\u4ee5\u8fd9\u4e48\u5b9e\u73b0\uff1a<\/p>\n\n\n\n
interface FieldConfig {\n  name: string\n  onSerialize?: Function\n  onDeserialize?: Function\n}\n\nconst fields = new Map<string, FieldConfig>()\n\nfunction Field(config: FieldConfig) {\n  return function(target: any, propertyKey: string) {\n    fields.set(propertyKey, config)\n  }\n}\n\n\/**\n * decorate each property with Field decorator, and pass a config object to it,\n * the config object contains the property name in plain object, and serialize\/deserialize function if needed\n * so that we can get all members of User class and its corresponding config\n *\/<\/em>\nclass User {\n  \/\/ name: property name in plain object<\/em>\n  @Field({ name: 'uid' })\n  id: string\n  @Field({ name: 'first_name' })\n  firstName: string\n  @Field({ name: 'last_name' })\n  lastName: string\n  @Field({ name: 'age' })\n  age: number\n  \/\/ onDeserialize: how to convert plain object value to class instance value<\/em>\n  \/\/ onSerialize: how to convert class instance value to plain object value<\/em>\n  @Field({ name: 'modified_time', onDeserialize: value => new Date(value), onSerialize: value => value.toISOString() })\n  modifiedTime: Date\n  get name() {\n    return `${this.firstName} ${this.lastName}`\n  }\n  get isAdult() {\n    return this.age >= 18\n  }\n}\n\nfunction serialize(raw: Record<string, any>) {\n  const model = new User()\n  for (const [key, config] of fields.entries()) {\n    const value = raw[config.name]\n    model[key] = config.onDeserialize ? config.onDeserialize(value) : value\n  }\n  return model\n}\n\nfunction deserialize(model: User) {\n  const raw = {}\n  for (const [key, config] of fields.entries()) {\n    const value = model[key]\n    raw[config.name] = config.onSerialize ? config.onSerialize(value) : value\n  }\n  return raw\n}\n\n\/\/ so we can use it like this:<\/em>\nconst raw = {\n  uid: 1,\n  first_name: 'jack',\n  last_name: 'ma',\n  age: 18,\n  modified_time: '2023-06-11T14:00:00.000Z',\n}\nconst deserialized = serialize(raw)\nconst serialized = deserialize(model)\n<\/code><\/pre>\n\n\n\n
\u4ee5\u4e0a\u4ee3\u7801\u5b9a\u4e49\u4e86\u4e00\u4e2a\u7c7b\u6210\u5458\u88c5\u9970\u5668 Field<\/code>\uff0c\u5b83\u63a5\u53d7\u4e00\u4e2a\u914d\u7f6e\u5bf9\u8c61\u5e76\u5c06\u5176\u4ee5\u7c7b\u6210\u5458\u540d\u79f0\u4f5c\u4e3a\u952e\u503c\u4fdd\u5b58\u5728\u4e00\u4e2a\u5b57\u5178\u4e2d\uff0c\u914d\u7f6e\u5bf9\u8c61\u5305\u542b\u4e86\u8be5\u5c5e\u6027\u5bf9\u5e94\u539f\u59cb\u5e8f\u5217\u7684\u5c5e\u6027\u540d\u3001\u5e8f\u5217\u5316\/\u53cd\u5e8f\u5217\u5316 \u7684\u8f6c\u6362\u51fd\u6570\u7b49\u3002\u5728 serialize<\/code> \u548c deserialize<\/code> \u51fd\u6570\u4e2d\uff0c\u6211\u4eec\u901a\u8fc7 fields<\/code> Map \u83b7\u53d6\u4e86\u6240\u6709\u6210\u5458\u7684\u914d\u7f6e\u4fe1\u606f\uff0c\u7136\u540e\u6839\u636e\u914d\u7f6e\u4fe1\u606f\u8fdb\u884c\u8f6c\u6362\u3002\u8fd9\u6837\u6211\u4eec\u5c31\u5b9e\u73b0\u4e86\u4e00\u4e2a\u7b80\u5355\u7684\u5e8f\u5217\u5316\/\u53cd\u5e8f\u5217\u5316\u5de5\u5177\u3002<\/p>\n\n\n\n
\u4f46\u8981\u8fbe\u5230\u751f\u4ea7\u73af\u5883\u53ef\u7528\u7684\u7a0b\u5ea6\u8fd8\u9700\u8981\u8003\u8651\u66f4\u591a\u7684\u7ec6\u8282\uff0c\u6bd4\u5982\uff1a\u5982\u4f55\u5904\u7406\u5d4c\u5957\u5bf9\u8c61\u3001\u5982\u4f55\u5904\u7406\u6570\u7ec4\u3001\u5982\u4f55\u5904\u7406\u590d\u6742\u7684\u6570\u636e\u7c7b\u578b\u7b49\u3002\u672c\u8d28\u4e0a\u8fd9\u4e9b\u95ee\u9898\u90fd\u53ef\u4ee5\u901a\u8fc7\u88c5\u9970\u5668\u6765\u89e3\u51b3\uff0c\u4f46\u663e\u7136\u4ece\u96f6\u5f00\u59cb\u5b9e\u73b0\u4e00\u4e2a \u5e8f\u5217\u5316\/\u53cd\u5e8f\u5217\u5316 \u5de5\u5177\u5e93\u662f\u4e00\u4ef6\u590d\u6742\u7684\u4e8b\u60c5\u3002<\/p>\n\n\n\n
class-transformer<\/a> \u662f\u4e00\u4e2a\u975e\u5e38\u5f3a\u5927\u7684 class \u548c Plain Object \u4e4b\u95f4\u7684\u8f6c\u6362\u5de5\u5177\uff0c\u5728\u8fd9\u79cd\u8f6c\u6362\u4e4b\u5916\uff0c\u5b83\u63d0\u4f9b\u4e86\u5f3a\u5927\u7684\u64cd\u4f5c\u652f\u6301\uff0c\u6bd4\u5982\u5bf9\u8c61\u5b57\u6bb5\u540d\u7684\u6620\u5c04\u3001\u5e8f\u5217\u5316\u6216\u53cd\u5e8f\u5217\u5316\u65f6\u662f\u5426\u5ffd\u7565\u3001\u6570\u636e\u7c7b\u578b\u7684\u8f6c\u6362\u7b49\u3002\u6309\u7167\u5b98\u65b9\u6587\u6863\u7684\u4ecb\u7ecd\uff0c\u57fa\u672c\u4f7f\u7528\u662f\u8fd9\u6837\u7684\uff1a<\/p>\n\n\n\n
class User {\n  @Expose({ name: 'uid' })\n  id: number\n  @Expose({ name: 'first_name' })\n  firstName: string\n  @Expose({ name: 'last_name' })\n  lastName: string\n  @Expose({ name: 'age' })\n  age: number\n  @Expose({ name: 'modified_time' })\n  @Transform(value => new Date(value))\n  @Exclude()\n  modifiedTime: Date\n  get name() {\n    return `${this.firstName} ${this.lastName}`\n  }\n  get isAdult() {\n    return this.age >= 18\n  }\n}\n\nconst raw = {\n  uid: 1,\n  first_name: 'jack',\n  last_name: 'ma',\n  modified_time: '2023-06-11T14:22:50+08:00',\n  age: 18,\n}\nconst deserialized = plainToInstance(User, raw)\nconst serialized = instanceToPlain(deserialized)\n<\/code><\/pre>\n\n\n\n
Expose \u5bf9\u7c7b\u6210\u5458\u5c5e\u6027\u8fdb\u884c\u66b4\u9732\uff0c\u6307\u5b9a\u8be5\u5c5e\u6027\u5bf9\u5e94 Plain Object \u4e0a\u54ea\u4e2a\u952e\uff0cTransform \u6307\u5b9a\u5e8f\u5217\u5316\/\u53cd\u5e8f\u5217\u5316\u65f6\u7684\u8f6c\u6362\u51fd\u6570\uff0cExclude \u6307\u5b9a\u8be5\u5c5e\u6027\u5728\u5e8f\u5217\u5316\/\u53cd\u5e8f\u5217\u5316\u65f6\u662f\u5426\u5ffd\u7565\u3002\u6700\u540e\u901a\u8fc7 plainToInstance<\/code> \u548c instanceToPlain<\/code> \u4e24\u4e2a\u65b9\u6cd5\u5373\u53ef\u5b8c\u6210\u5e8f\u5217\u5316\/\u53cd\u5e8f\u5217\u5316\u7684\u64cd\u4f5c\u3002<\/p>\n\n\n\n
\u4f46\u5982\u679c\u53ea\u662f\u4ecb\u7ecd\u4e00\u4e0b\u88c5\u9970\u5668\u548c class-transformer\uff0c\u90a3\u5c31\u8fdc\u6ca1\u6709\u8fbe\u5230\u671f\u671b\u4e2d\u7684\u6548\u679c\u3002class-transformer \u7684\u4f7f\u7528\u4ecd\u7136\u6709\u70b9\u590d\u6742\uff0c\u6211\u4eec\u9700\u8981\u5c06\u5b83\u8fdb\u884c\u5c01\u88c5\uff0c\u5df2\u8fbe\u6210\u8fd9\u6837\u7684\u6548\u679c\uff1a<\/p>\n\n\n\n
    \n
  1. \u5c06\u5404\u79cd\u914d\u7f6e\u7edf\u4e00\u6210\u4e00\u4e2a Field \u88c5\u9970\u5668\uff1b<\/li>\n\n\n\n
  2. \u4e0d\u9700\u8981\u7ed9\u6bcf\u4e00\u4e2a\u7c7b\u6210\u5458\u90fd\u6dfb\u52a0 Field \u88c5\u9970\u5668\uff0c\u4e5f\u80fd\u8ba9\u5b83\u6309\u7167\u9ed8\u8ba4\u89c4\u5219\u8fdb\u884c\u8f6c\u6362\uff1b<\/li>\n\n\n\n
  3. \u9ad8\u5ea6\u805a\u5408 Model \u57fa\u672c\u903b\u8f91\uff0c\u4e0d\u9700\u8981\u5728\u4e1a\u52a1\u4ee3\u7801\u4e2d\u5173\u5fc3\u5e8f\u5217\u5316\/\u53cd\u5e8f\u5217\u5316\u7684\u7ec6\u8282\u3002<\/li>\n<\/ol>\n\n\n\n
    \u5bf9\u4e8e\u7b2c 2 \u70b9\uff0c\u5176\u4e2d\u4e00\u70b9\u5c24\u4e3a\u91cd\u8981\uff1a\u524d\u540e\u7aef\u6570\u636e\u7ed3\u6784\u7684\u547d\u540d\u89c4\u8303\u53ef\u80fd\u4e0d\u4e00\u81f4\uff0c\u5927\u591a\u6570\u540e\u7aef\u8bed\u8a00\u504f\u597d snake_case\uff0c\u4f46 JS\/EcmaScript \u6807\u51c6\u4e00\u822c\u4f7f\u7528 camelCase\uff0c\u4e3a\u4e86\u907f\u514d\u989d\u5916\u7684\u624b\u52a8\u88c5\u9970 Field \u548c \u952e\u540d\u914d\u7f6e\uff0c\u6211\u4eec\u53ef\u4ee5\u5728 \u53cd\u5e8f\u5217\u5316\u524d \u548c \u5e8f\u5217\u5316\u540e \u624b\u52a8\u5b9e\u73b0\u6570\u636e\u5b57\u6bb5\u547d\u540d\u98ce\u683c\u7684\u81ea\u52a8\u8f6c\u6362\u3002<\/p>\n\n\n\n
    \u4ece\u4ee5\u4e0a 3 \u4e2a\u76ee\u6807\u51fa\u53d1\uff0c\u8fdb\u884c\u4ee5\u4e0b API \u8bbe\u8ba1\uff1a<\/p>\n\n\n\n
      \n
    1. \u5b9a\u4e49\u4e00\u4e2a Field \u88c5\u9970\u5668\uff0c\u652f\u6301\u914d\u7f6e\uff1a\u5b57\u6bb5\u540d\u3001\u8f6c\u6362\u51fd\u6570\u3001\u662f\u5426\u5ffd\u7565\uff1b<\/li>\n\n\n\n
    2. \u5b9a\u4e49\u4e00\u4e2a BaseModel \u57fa\u7840\u7c7b\uff0c\u5c01\u88c5\u4e24\u4e2a\u9759\u6001\u65b9\u6cd5\uff1a\u5e8f\u5217\u5316\u00a0toPlain<\/code>\u00a0\u548c \u53cd\u5e8f\u5217\u5316\u00a0from<\/code>\uff0c\u4efb\u4f55 Model \u90fd\u4ece BaseModel \u8fdb\u884c\u6d3e\u751f\uff0c\u4e0d\u9700\u8981\u5728\u4e1a\u52a1\u4ee3\u7801\u4e2d\u5173\u5fc3\u5e8f\u5217\u5316\/\u53cd\u5e8f\u5217\u5316\u7684\u7ec6\u8282\uff0c\u4f7f\u5f97\u6bcf\u4e2a Model \u5728\u4f7f\u7528\u4e0a\u53ef\u4ee5\u76f4\u63a5\u8c03\u7528\uff0c\u5982:\u00a0User.from(raw)<\/code>\u00a0\u548c\u00a0user.toPlain()<\/code>\uff1b<\/li>\n<\/ol>\n\n\n\n
      \u7ffb\u8bd1\u6210\u4ee3\u7801\u662f\u8fd9\u6837\u7684\uff1a<\/p>\n\n\n\n
      interface FieldConfig {\n  \/**\n   * how to convert value between plain object and class instance,\n   * if not provided, use primitive value\n   *\/<\/em>\n  transform?: { onSerialize: Function; onDeserialize: Function }\n  \/**\n   * what field name to use in plain object,\n   * if not provided, follow the strategy:\n   * \n   * 1. class member name: camelCase\n   * 2. plain object field name: snake_case\n   * \n   * In other words, if you don't provide field name,\n   * it will be converted to snake_case on serialize, and camelCase on deserialize\n   *\/<\/em>\n  fieldName?: string\n  \/**\n   * whether to ignore this field when serialize or deserialize\n   *\/<\/em>\n  ignore?: { onSerialize: boolean; onDeserialize: boolean }\n}\n\n\/\/ we use Field decorator to decorate class member<\/em>\nfunction Field(config: FieldConfig = {}) {\n  \/* ... *\/<\/em>\n}\n\n\/\/ we use BaseModel to implement basic logic<\/em>\nclass BaseModel {\n  toPlain<T extends BaseModel>(): Object { \/* ... *\/<\/em> }\n  static from<T extends typeof BaseModel>(raw: any):  InstanceType<T> { \/* ... *\/<\/em> }\n}\n<\/code><\/pre>\n\n\n\n
      \u4e8e\u662f\uff0c\u5728\u4f7f\u7528\u4e0a\u5c31\u53ef\u4ee5\u8fd9\u6837\uff1a<\/p>\n\n\n\n
      \/\/ declare a User Model that extends from BaseModel<\/em>\nclass User extends BaseModel {\n  @Field({ fieldName: 'uid' })\n  id: string\n  firstName: string\n  lastName: string\n  age: number\n  @Field({ transform: { onSerialize: v => v.toISOString(), onDeserialize: v => new Date(v) } })\n  modifiedTime: Date\n\n  @Field({ ignore: { onSerialize: true, onDeserialize: false } })\n  password: string\n\n  get name() {\n    return `${this.firstName} ${this.lastName}`\n  }\n  get isAdult() {\n    return this.age >= 18\n  }\n}\n\nconst user = User.from(\/* ... *\/<\/em>)\nconst plain = user.toPlain()\n<\/code><\/pre>\n\n\n\n
      \u5f53\u6211\u4eec\u5c06\u6240\u6709 Model \u90fd\u5b9a\u4e49\u6210\u8fd9\u6837\u7684\u5f62\u5f0f\u540e\uff0c\u5c31\u53ef\u4ee5\u901a\u8fc7\u5728\u8bf7\u6c42\u5de5\u5177\u7684\u62e6\u622a\u5668\u4e2d\uff0c\u5bf9\u8bf7\u6c42\u6570\u636e\u548c\u54cd\u5e94\u6570\u636e\u8fdb\u884c\u7edf\u4e00\u7684 \u5e8f\u5217\u5316\/\u53cd\u5e8f\u5217\u5316 \u5904\u7406\u3002<\/p>\n\n\n\n
      \u8fdc\u4e0d\u6b62\u4e8e\u6b64<\/h2>\n\n\n\n
      \u4f7f\u7528 class \u4ee3\u66ff interface \u53bb\u7ea6\u675f\u6570\u636e\u7c7b\u578b\u4e0d\u662f\u672c\u7bc7\u6587\u7ae0\u7684\u6700\u7ec8\u76ee\u6807\uff0c\u501f\u52a9\u88c5\u9970\u5668\u6240\u5e26\u6765\u7684\u5f3a\u5927\u5143\u7f16\u7a0b\u80fd\u529b\uff0c\u6211\u4eec\u53ef\u4ee5\u7ed9 class\u5316 \u7684 Model \u6dfb\u52a0\u66f4\u591a\u529f\u80fd\u903b\u8f91\uff0c\u901a\u8fc7\u826f\u597d\u7684\u5c01\u88c5\u6765\u51cf\u5c11\u91cd\u590d\u4ee3\u7801\u7684\u7f16\u5199\u3002<\/p>\n\n\n\n
      CRUD<\/h3>\n\n\n\n
      \u663e\u7136\uff0cModel \u5927\u591a\u6570\u4e0e\u63a5\u53e3\u6709\u5173\uff0c\u5bf9\u5176\u8fdb\u884c CRUD \u662f\u4e00\u4e2a\u518d\u6b63\u5e38\u4e0d\u8fc7\u7684\u573a\u666f\uff0c\u56e0\u6b64\uff0c\u5728\u6b64\u4e4b\u524d\u6211\u4eec\u5148\u5b9a\u4e49\u4e00\u4e2a CRUD \u62bd\u8c61\u7c7b\uff0c\u7528\u4ee5\u7ea6\u675f Model \u5b58\u5728 CRUD \u80fd\u529b\uff1a<\/p>\n\n\n\n
      abstract class CRUD<Get = any, Create = Get, Update = Get, Delete = any> {\n  get(): Promise<Get> {}\n  create(): Promise<Create> {}\n  update(): Promise<Update> {}\n  delete(): Promise<Delete> {}\n}\n<\/code><\/pre>\n\n\n\n
      \u5f53\u4e00\u4e2a Model \u5b9e\u73b0\u4e86\u4ee5\u4e0a\u62bd\u8c61\u7c7b\uff0c\u5c31\u8ba4\u4e3a\u8fd9\u4e2a Model \u662f\u53ef\u4ee5\u8fdb\u884c CRUD \u64cd\u4f5c\u7684\uff0c\u5047\u8bbe User Model \u5b9e\u73b0\u4e86 CRUD\uff0c\u90a3\u4e48\u6211\u4eec\u53ef\u4ee5\u8fd9\u6837\u4f7f\u7528\uff1a<\/p>\n\n\n\n
      class User extends BaseModel implements CRUD<User> {\n  get() { \/* ... *\/<\/em> }\n  create() { \/* ... *\/<\/em> }\n  update() { \/* ... *\/<\/em> }\n  delete() { \/* ... *\/<\/em> }\n}\n\n\/\/ get a user<\/em>\nawait new User().get()\n\/\/ create a user<\/em>\nconst user = await new User().create()\n\/\/ update a user<\/em>\nuser.update()\n\/\/ delete a user<\/em>\nuser.delete()\n<\/code><\/pre>\n\n\n\n
      \n
      Yeahhhh\uff0c\u8fd9\u6837\u5f88 OOP\u3002<\/p>\n<\/blockquote>\n\n\n\n
      \u5982\u679c\u53ea\u662f\u8fd9\u6837\u5b9a\u4e49\u4e00\u4e2a\u62bd\u8c61\u7c7b\uff0cCRUD \u7684\u903b\u8f91\u5374\u4ecd\u9700\u8981\u6211\u4eec\u624b\u52a8\u5728 Model \u4e0a\u5b9e\u73b0\uff0c\u4f3c\u4e4e\u9664\u4e86\u7ed9\u6211\u4eec\u5e26\u6765\u4e00\u70b9 OOP\u5f0f \u7684\u4ee3\u7801\u5f00\u53d1\u4f53\u9a8c\u5916\uff0c\u5e76\u6ca1\u6709\u5e26\u6765\u4efb\u4f55\u5b9e\u8d28\u4e0a\u7684\u5e2e\u52a9\uff0c\u663e\u7136\u5f62\u5f0f\u5927\u4e8e\u610f\u4e49\u4e86\u3002<\/p>\n\n\n\n
      \u4e0d\u8fc7\uff0c\u901a\u5e38\u5728\u63a5\u53e3\u8bbe\u8ba1\u4e0a\uff0c\u5bf9\u4e8e\u4e00\u4e2a Model\uff08Entity\uff09\u7684 CRUD \u90fd\u9075\u5b88\u4e00\u5b9a\u7684\u89c4\u8303\uff0c\u5982\uff1aGET \/users<\/code> \u83b7\u53d6\u7528\u6237\u5217\u8868\uff0cPOST \/users<\/code> \u521b\u5efa\u7528\u6237\uff0cPUT \/users\/:id<\/code> \u66f4\u65b0\u7528\u6237\uff0cDELETE \/users\/:id<\/code> \u5220\u9664\u7528\u6237\u3002\u5728\u8fd9\u79cd\u56fa\u5b9a\u5f62\u5f0f\u4e0b\uff0c\u5f88\u5bb9\u6613\u5c31\u53ef\u4ee5\u901a\u8fc7\u7edf\u4e00\u7684\u65b9\u5f0f\u7ed9 Model \u81ea\u52a8\u6dfb\u52a0 CRUD \u80fd\u529b\u3002\u4e3a\u4e86\u5c06\u88c5\u9970\u5668\u8d2f\u5f7b\u5230\u5e95\uff0c\u8003\u8651\u5c06\u5176\u5b9e\u73b0\u4e3a\u4e00\u4e2a\u7c7b\u88c5\u9970\u5668\uff1a<\/p>\n\n\n\n
      \ntype EndPoint<T> = string | ((action: 'get' | 'create' | 'update' | 'delete', model: T) => string)\n\nexport function CRUDDeriver<T>(endpoint: EndPoint<T>) {\n  return function<T extends ClassConstructor<CRUD>>(target: T) {\n    target.prototype.get = function() { \/* ... *\/<\/em> }\n    target.prototype.create = function() { \/* ... *\/<\/em> }\n    target.prototype.update = function() { \/* ... *\/<\/em> }\n    target.prototype.delete = function() { \/* ... *\/<\/em> }\n  }\n}\n\n@CRUDDeriver('\/users')\nclass User extends BaseModel { \/* ... *\/<\/em> }\n\n\/\/ for type checking, declare a interface that named as User Model and extends CRUD<\/em>\ninterface User extends CRUD<User> {}\n<\/code><\/pre>\n\n\n\n
      \u5b9a\u4e49\u4e00\u4e2a CRUDDeriver\uff0c\u5b83\u63a5\u53d7\u4e00\u4e2a\u53c2\u6570 endpoint\uff0c\u7528\u6765\u786e\u5b9a HTTP \u8bf7\u6c42\u5e94\u8be5\u53d1\u9001\u5230\u540e\u7aef\u7684\u54ea\u4e2a\u63a5\u53e3\uff0cendpoint \u53ef\u4ee5\u662f\u4e00\u4e2a\u5b57\u7b26\u4e32\uff0c\u4e5f\u53ef\u4ee5\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u5f53\u5b83\u662f\u4e00\u4e2a\u51fd\u6570\u65f6\uff0c\u5b83\u63a5\u53d7\u4e24\u4e2a\u53c2\u6570\uff1aaction \u548c model\uff0caction \u8868\u793a\u5f53\u524d\u8bf7\u6c42\u7684\u52a8\u4f5c\uff0cmodel \u8868\u793a\u5f53\u524d\u8bf7\u6c42\u7684 Model\uff0c\u901a\u8fc7\u8fd9\u4e24\u4e2a\u53c2\u6570\uff0c\u6211\u4eec\u53ef\u4ee5\u6839\u636e\u4e0d\u540c\u7684\u52a8\u4f5c\u548c Model\uff0c\u8fd4\u56de\u4e0d\u540c\u7684 endpoint\u3002\u6700\u540e\u5c06\u5176\u88c5\u9970\u5728 Model \u4e0a\uff0c\u5c31\u53ef\u4ee5\u4e3a Model \u6dfb\u52a0 CRUD \u80fd\u529b\u4e86\u3002<\/p>\n\n\n\n
      \u5f53\u5bf9 Model \u8fdb\u884c CRUD \u65f6\uff0c\u53ef\u80fd\u4f1a\u4f20\u9012\u989d\u5916\u7684\u53c2\u6570\uff0c\u56e0\u6b64\u518d\u5b9a\u4e49\u4e24\u4e2a\u4e2a\u62bd\u8c61\u7c7b\u3002<\/p>\n\n\n\n
      abstract class Query<T> {\n  query: T\n}\n\nabstract class Entity<T extends string | number = number> {\n  id: T\n}\n<\/code><\/pre>\n\n\n\n
      Query \u7ea6\u675f\u8be5 Model \u5728 CRUD \u64cd\u4f5c\u65f6\uff0c\u53ef\u4ee5\u4f20\u9012\u989d\u5916\u7684\u67e5\u8be2\u53c2\u6570\uff0cEntity \u7ea6\u675f\u8be5 Model \u5bf9\u5e94\u540e\u7aef\u6570\u636e\u7684\u4e00\u4e2a\u5b9e\u4f53\uff0c\u5b83\u5177\u6709\u552f\u4e00\u7684 id\u3002\u540c\u65f6\u5728 CRUDDeriver<\/code> \u4e2d\uff0c\u901a\u8fc7\u5224\u65ad Model \u4e0a\u7684 query<\/code> \u548c id<\/code> \u5c5e\u6027\u662f\u5426\u5b58\u5728\uff0c\u6765\u4e3a Model \u5b9e\u73b0\u5177\u4f53\u7684\u8bf7\u6c42\u903b\u8f91\u3002<\/p>\n\n\n\n
      \n
      \u62bd\u8c61\u7c7b\u5e76\u4e0d\u4f1a\u771f\u7684\u7ed9 Model \u6dfb\u52a0\u8fd9\u4e9b\u5c5e\u6027\uff0c\u6211\u4eec\u4ecd\u9700\u8981\u624b\u52a8\u5728 Model \u4e0a\u5b9a\u4e49\uff0c\u6362\u53e5\u8bdd\u8bf4\uff0c\u6211\u4eec\u4e0d\u7ed9 Model class \u6dfb\u52a0 implements<\/code> \u4e5f\u662f\u53ef\u884c\u7684\uff0c\u4f46\u90a3\u6837\u4f1a\u9020\u6210\u8fd9\u4e9b\u5c5e\u6027\u610f\u4e49\u4e0d\u660e\u786e\uff0c\u6240\u4ee5\uff0c\u5fc5\u987b\u624b\u52a8\u6807\u8bb0\u4e00\u4e0b implements<\/code>\u3002<\/p>\n<\/blockquote>\n\n\n\n
      \u6570\u636e\u6821\u9a8c<\/h3>\n\n\n\n
      \u5728\u6d89\u53ca Model CRUD \u64cd\u4f5c\u65f6\uff0c\u5f80\u5f80\u5c11\u4e0d\u4e86\u6570\u636e\u6821\u9a8c\u5de5\u4f5c\uff0c\u76ee\u524d\u5e38\u89c1\u7684\u68c0\u9a8c\u4e00\u822c\u5728\u7ec4\u4ef6\u5c42\u9762\uff0c\u5305\u62ec\u5bf9\u4e00\u4e9b\u7ec4\u4ef6\u5e93\u7684\u6821\u9a8c\u89c4\u5219\u4f20\u53c2\u3001\u81ea\u5df1\u624b\u52a8\u7f16\u5199\u7684\u6821\u9a8c\u6b65\u9aa4\u7b49\u3002\u4ece\u672c\u7bc7\u6587\u7ae0\u7684\u76ee\u6807\u51fa\u53d1\uff0c\u6211\u4eec\u5e0c\u671b\u80fd\u591f\u5c06\u6570\u636e\u6821\u9a8c\u903b\u8f91\u5c01\u88c5\u5728 Model \u5c42\u9762\uff0c\u9ad8\u5ea6\u805a\u5408\u4e0e Model \u76f8\u5173\u7684\u903b\u8f91\u3002\u540c\u6837\u4e5f\u53ef\u4ee5\u5c06\u5176\u5b9e\u73b0\u4e3a\u88c5\u9970\u5668\uff1a<\/p>\n\n\n\n
      \/\/ decorator for validate<\/em>\ntype ValidateFn = (v: any, model: BaseModel) => boolean\nfunction Validator(...validate: ValidateFn) { \/* ... *\/<\/em> }\n\nfunction Required(v: string) {\n  return () => v?.trim()\n}\n\nfunction MinLength(min: number) {\n  return (v: string) => v?.trim().length >= min\n}\n\nfunction MaxLength(max: number) {\n  return (v: string) => v?.trim().length <= max\n}\n\nclass BaseModel {\n  \/* ... *\/<\/em>\n  validate<T extends BaseModel>(this: T, field?: keyof T): Promise<boolean> { \/* ... *\/<\/em> }\n  \/* ... *\/<\/em>\n}\n\nclass User extends BaseModel {\n  @Validator(Required(), MinLength(6), MaxLength(16))\n  name: string\n}\n\nconst user = new User()\nuser.name = 'Jack'\nuser.validate() \/\/ Promise<true><\/em>\n<\/code><\/pre>\n\n\n\n
      \u4ee5\u4e0a\u4ee3\u7801\u5b9a\u4e49\u4e86\u4e00\u4e2a\u88c5\u9970\u5668 Validator\uff0c\u63a5\u53d7\u591a\u4e2a\u6821\u9a8c\u51fd\u6570\uff0cModel \u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7\u8c03\u7528 validate \u65b9\u6cd5\u6765\u8fdb\u884c\u6570\u636e\u6821\u9a8c\u3002\u5f53 Model \u5b9e\u73b0\u6821\u9a8c\u529f\u80fd\u65f6\uff0c\u901a\u8fc7\u7f16\u5199\u9488\u5bf9\u7ec4\u4ef6\u5e93\u8868\u5355\u7684 Adaptor\uff0c\u5c31\u53ef\u4ee5\u5c06 Model \u7684\u6821\u9a8c\u903b\u8f91\u4e0e\u7ec4\u4ef6\u5e93\u7684\u6821\u9a8c\u89c4\u5219\u8fdb\u884c\u5bf9\u63a5\uff0c\u4ece\u800c\u5b9e\u73b0 Model \u7684\u6821\u9a8c\u903b\u8f91\u5728\u7ec4\u4ef6\u5e93\u8868\u5355\u4e0a\u7684\u5e94\u7528\u3002<\/p>\n\n\n\n
      \u5c06\u4ed6\u4eec\u7ed3\u5408\u8d77\u6765<\/h2>\n\n\n\n
      \u5355\u770b\u4ee5\u4e0a\u6bcf\u4e00\u4e2a\u529f\u80fd\u5b9e\u73b0\u90fd\u4e0d\u7b97\u5f97\u7279\u522b\u6709\u7528\uff0c\u4e0d\u8fc7\u5f53\u5c06\u4ed6\u4eec\u7ed3\u5408\u8d77\u6765\uff0c\u6216\u8bb8\u66f4\u80fd\u4f53\u73b0\u5b83\u7684\u4f18\u52bf\u6240\u5728\u3002<\/p>\n\n\n\n
      \u8868\u5355\u63d0\u4ea4<\/strong> \u548c \u8868\u683c\u6e32\u67d3<\/strong> \u662f\u4e24\u4e2a\u6700\u4e3a\u5e38\u89c1\u7684\u3001\u6570\u636e\u4e0e\u89c6\u56fe\u5b58\u5728\u8f83\u5f3a\u903b\u8f91\u5173\u8054\u7684\u573a\u666f\uff0c\u4e24\u4e2a\u573a\u666f\u4e2d\u7684\u4ee3\u7801\u5f80\u5f80\u662f\u903b\u8f91\u76f8\u4f3c\u7684\uff0c\u5374\u53c8\u96be\u4ee5\u8fdb\u884c\u62bd\u8c61\u8fdb\u800c\u5b9e\u73b0\u9ad8\u5ea6\u7684\u4ee3\u7801\u590d\u7528\uff0c\u6700\u540e\u5bfc\u81f4\u6211\u4eec\u9700\u8981\u7f16\u5199\u5f88\u591a\u91cd\u590d\u7684\u4ee3\u7801\uff0c\u91cd\u590d\u610f\u5473\u7740 ugly-prone \u548c unmaintainable-prone\u3002<\/p>\n\n\n\n
      \u4ece\u4ee5\u4e0a\u601d\u8def\u51fa\u53d1\u5c1d\u8bd5\u53bb\u7f16\u5199\u4e24\u4e2a\u573a\u666f\u4e0b\u7684\u4ee3\u7801\u903b\u8f91\u3002<\/p>\n\n\n\n
      \u5b9a\u4e49\u51e0\u4e2a Model\uff08FormItem \u548c TableColumn \u4e3a\u65b0\u589e\u88c5\u9970\u5668\uff0c\u5206\u522b\u7528\u6765\u5b58\u50a8\u5b57\u6bb5\u7684\u8868\u5355\u9879 \u548c \u8868\u683c\u5217 \u7684\u914d\u7f6e\u4fe1\u606f\uff09\uff1a<\/p>\n\n\n\n
      \/\/ User.ts<\/em>\n@Model()\n@CRUDDeriver('\/users')\nexport class User extends BaseModel implements Entity {\n  id: number\n  @FormItem({ label: 'First Name', type: 'text' })\n  @TableColumn()\n  @Validator(Required(), MinLength(2), MaxLength(10))\n  firstName: string\n  @FormItem({ label: 'First Name', type: 'text' })\n  @TableColumn()\n  @Validator(Required(), MinLength(2), MaxLength(10))\n  lastName: string\n  @Field({\n    transform: {\n      onSerialize: (value: Dayjs) => v.format('YYYY-MM-DD'),\n      onDeserialize: (v: string) =>  dayjs(v)\n    }\n  })\n  @FormItem({ label: 'First Name', type: 'Date' })\n  @TableColumn()\n  @Validator(Required())\n  birthday: Dayjs\n  @FormItem({ label: 'First Name', type: 'password' })\n  \/\/ ignore password when deserialize, because will never get password from backend<\/em>\n  @Field({ ignore: { onDeserialize: true } })\n  password: string = ''\n  @TableColumn()\n  get age() {\n    return dayjs().diff(this.birthday, 'year')\n  }\n  @TableColumn()\n  get fullName() {\n    return `${this.firstName} ${this.lastName}`\n  }\n\n  static fromId(id: number) {\n    const user = new User()\n    user.id = id\n    return user.get()\n  }\n}\n\nexport interface User extends CRUD<User> {}\n\nclass UserListQuery extends BaseModel {\n  page: number = 1\n  per: number = 10\n  sortBy?: string\n  sort: 'asc' | 'desc' = 'asc'\n  filter?: string\n  filterBy?: string\n}\n\n@Model()\n@CRUDDeriver('\/users')\nexport class UserList extends BaseModel implements Query {\n  query: UserListQuery = new UserListQuery()\n  items: User[] = []\n  total: number = 0\n}\n\nexport interface UserList extends CRUD<User> {}\n<\/code><\/pre>\n\n\n\n
      User \u5bf9\u5e94\u5355\u4e2a\u7528\u6237\uff0cUserList \u5bf9\u5e94\u591a\u4e2a\u7528\u6237\uff0c\u5e76\u4e0e\u540e\u7aef\u7528\u6237\u5217\u8868\u63a5\u53e3\u76f8\u5173\u8054\uff0c\u5728\u8868\u5355\u573a\u666f\u4e0b\u53ef\u4ee5\u8fd9\u4e48\u4f7f\u7528\uff1a<\/p>\n\n\n\n
      <script setup lang=\"ts\">\n\/\/ using-case of form\nconst user = ref(new User())\n\/\/ or\n\/\/ const user = ref(User.fromId(1))\n\/\/ user.get().then(u => user.value = u)\n\nconst submit = () => {\n  user.value.validate().then((valid) => {\n    if (valid) {\n      return user.value.create()\n      \/\/ or\n      \/\/ return user.value.update()\n    }\n  })\n}\n<\/script>\n\n<template>\n  <model-form :model=\"user\" @submit=\"submit\" \/>\n<\/template>\n<\/code><\/pre>\n\n\n\n
      <model-form \/><\/code> \u7ec4\u4ef6\u63a5\u53d7\u4e00\u4e2a\u7ee7\u627f BaseModel \u7684 Model \u5b9e\u4f8b\uff0c\u8fd9\u91cc\u662f User\uff0c\u7ec4\u4ef6\u5185\u90e8\u901a\u8fc7\u83b7\u53d6 Model \u4e0a\u7684 FormItem \u88c5\u9970\u5668\u4fe1\u606f\uff0c\u6765\u6e32\u67d3\u8868\u5355\u3002\u540c\u65f6\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7\u83b7\u53d6 Validator \u88c5\u9970\u5668\u4fe1\u606f\u6765\u63a7\u5236\u9a8c\u8bc1\u903b\u8f91\uff0c\u5f53\u63d0\u4ea4\u52a8\u4f5c\u53d1\u751f\u65f6\uff0c\u624b\u52a8\u8c03\u7528 Model create \u6216 update \u65b9\u6cd5\u6765\u5b9e\u73b0\u63d0\u4ea4\u8bf7\u6c42\u3002<\/p>\n\n\n\n
      \u5728\u8868\u683c\u573a\u666f\u4e0b\u53ef\u4ee5\u8fd9\u4e48\u4f7f\u7528\uff1a<\/p>\n\n\n\n
      <script setup lang=\"ts\">\n\/\/ using-case of table\nconst userList = ref(new UserList())\n\nconst change = () => {\n  userList.value.get().then(_userList => userList.value.merge(_userList, ['items']))\n}\n<\/script>\n\n<template>\n  <model-table v-model:query=\"userList.query\" :items=\"userList.items\" @change=\"userList.get()\" \/>\n<\/template>\n<\/code><\/pre>\n\n\n\n
      <model-form \/><\/code> \u7ec4\u4ef6\u63a5\u53d7\u4e24\u4e2a\u53c2\u6570 query \u548c items \uff0c\u5176\u4e2d query \u53ef\u4ee5\u8fdb\u884c\u53cc\u5411\u7ed1\u5b9a\uff0c\u4f7f userList.query \u53ef\u4ee5\u5b9e\u65f6\u4e0e\u8868\u683c\u7ec4\u4ef6\u7684\u67e5\u8be2\u6761\u4ef6\u4fdd\u6301\u540c\u6b65\uff0c\u5f53 query \u53d1\u751f\u53d8\u5316\u65f6\uff0c\u4f1a\u89e6\u53d1 change \u4e8b\u4ef6\uff0c\u4ece\u800c\u8c03\u7528 userList.get() \u65b9\u6cd5\u6765\u83b7\u53d6\u6700\u65b0\u7684\u6570\u636e\u3002<\/p>\n\n\n\n
      \n
      <model-form \/><\/code> \u548c <model-table \/><\/code> \u7684\u903b\u8f91\u5b9e\u73b0\u5e76\u4e0d\u590d\u6742\uff0c\u672c\u8d28\u5c31\u662f\u83b7\u53d6 Model \u4e0a\u7684 metadata \u6765\u63a7\u5236\u4e0d\u540c\u7684\u884c\u4e3a\uff0c\u8fd9\u91cc\u5c31\u4e0d\u4f5c\u5177\u4f53\u5b9e\u73b0\u4e86\u3002<\/p>\n<\/blockquote>\n\n\n\n
      \u4ee5\u4e0a Model \u4e0e\u5176\u5bf9\u5e94\u7ec4\u4ef6\u7ed3\u5408\u4f7f\u7528\u7684\u4ee3\u7801\u903b\u8f91\uff0c\u4f53\u73b0\u51fa\u51e0\u4e2a\u7279\u70b9\uff1a<\/p>\n\n\n\n
        \n
      1. \u7ec4\u4ef6\u4ee3\u7801\u53d8\u5f97\u66f4\u5e72\u51c0\uff1b<\/li>\n\n\n\n
      2. \u4e0e\u6570\u636e\u6709\u5173\u7684\u903b\u8f91\u4ee3\u7801\u90fd\u88ab\u62bd\u8c61\u5230\u4e86 Model \u4e2d\uff0c\u63d0\u9ad8\u4e86\u63a5\u53e3\u4e0e\u6570\u636e\u7684\u4ee3\u7801\u805a\u5408\u5ea6\uff1b<\/li>\n\n\n\n
      3. \u624b\u52a8\u7684\u6570\u636e\u5904\u7406\u4ee3\u7801\uff08\u547d\u4ee4\u5f0f\u7684\uff09\u53d8\u6210\u53ef\u914d\u7f6e\uff08\u58f0\u660e\u5f0f\uff09\u7684\uff1b<\/li>\n\n\n\n
      4. \u91cd\u590d\u4ee3\u7801\u5927\u5927\u51cf\u5c11\uff0c\u53ea\u9700\u8981\u7ef4\u62a4\u5177\u6709\u5dee\u5f02\u6027\u7684\u4ee3\u7801\u3002<\/li>\n<\/ol>\n\n\n\n
        \u5728\u5f53\u9879\u76ee\u4f53\u91cf\u9010\u6e10\u53d8\u5927\u65f6\uff0c\u4ee5\u4e0a\u4f18\u52bf\u548c\u7279\u70b9\u4f1a\u66f4\u52a0\u660e\u663e\u3002\u5230\u73b0\u5728\uff0c\u6700\u5f00\u59cb\u7684\u95ee\u9898\u5e94\u8be5\u5df2\u7ecf\u6709\u7b54\u6848\u4e86\u3002<\/p>\n\n\n\n
        \u4e0d\u8fc7\uff0c\u8fd9\u4ecd\u7136\u6709\u4e00\u4e9b\u9700\u8981\u6ce8\u610f\u7684\u5730\u65b9\u3002class \u548c decorator \u7684\u7ed3\u5408\u4f7f\u7528\uff0c\u672c\u8d28\u53ea\u89e3\u51b3\u4e24\u4e2a\u95ee\u9898\uff1a<\/p>\n\n\n\n
          \n
        1. \u6570\u636e\u5e8f\u5217\u5316\u548c\u53cd\u5e8f\u5217\u5316\u7684\u5904\u7406\uff1b<\/li>\n\n\n\n
        2. \u5408\u7406\u7ec4\u7ec7 View\u3001Model\u3001Entity \u4e4b\u95f4\u7684\u4ee3\u7801\u903b\u8f91\u3002<\/li>\n<\/ol>\n\n\n\n
          \u9488\u5bf9\u7b2c\u4e00\u70b9\uff0c\u5e76\u4e0d\u662f\u6240\u6709\u63a5\u53e3\u90fd\u9700\u8981 \u5e8f\u5217\u5316\/\u53cd\u5e8f\u5217\u5316 \u64cd\u4f5c\uff0c\u5047\u8bbe\u6709\u4e00\u4e2a\u63a5\u53e3\u7528\u6765\u4e0a\u4f20\u6587\u4ef6\uff0c\u54cd\u5e94\u4e3a\u6587\u4ef6URL<\/strong>\uff0c\u6b64\u65f6\u5c31\u4e0d\u5fc5\u5bf9\u6b64\u5b9a\u4e49\u4e00\u4e2a Model\uff0c\u5355\u72ec\u8c03\u7528\u63a5\u53e3\u6216\u8bb8\u66f4\u5408\u7406\u3002<\/p>\n\n\n\n
          \u800c\u7b2c\u4e8c\u70b9\uff0c\u5b83\u7684\u5b9e\u73b0\u672c\u8d28\u662f\u4ee5 Model \u4e3a\u4e2d\u5fc3\uff0c\u5c06 View \u548c Entity \u4e0e Model \u5173\u8054\u8d77\u6765\uff0c\u501f\u52a9\u5f3a\u5927\u7684\u88c5\u9970\u5668\u548c\u5143\u7f16\u7a0b\uff0c\u51cf\u5c11\u91cd\u590d\u903b\u8f91\u7684\u540c\u65f6\uff0c\u5c06\u547d\u4ee4\u5f0f\u4ee3\u7801\u8f6c\u6362\u4e3a\u58f0\u660e\u5f0f\u4ee3\u7801\uff0c\u63d0\u9ad8\u4ee3\u7801\u7684\u53ef\u8bfb\u6027\u548c\u53ef\u7ef4\u62a4\u6027\u3002\u4f46\u5e76\u4e0d\u662f\u6240\u6709\u4e0e View \u76f8\u5173\u7684 (View) Model \u90fd\u5b58\u5728\u4e0e Entity \u6216\u540e\u7aef\u63a5\u53e3\u7684\u5173\u8054\uff0c\u6709\u4e9b Model \u53ea\u662f\u4e3a\u4e86 View \u800c\u5b58\u5728\uff0c\u5b83\u4eec\u66f4\u5e94\u8be5\u88ab\u7f16\u5199\u5728\u7ec4\u4ef6\u4ee3\u7801\u5f53\u4e2d\u3002<\/p>\n\n\n\n
          \u603b\u4e4b\u5c31\u662f\u4e00\u70b9\uff0c\u4fdd\u6301\u514b\u5236\uff0c\u5408\u7406\u5229\u7528 class model\uff0c\u4e0d\u8981\u8fc7\u5ea6\u4f7f\u7528\u3002<\/p>\n\n\n\n
          \u7ed3\u8bed<\/h2>\n\n\n\n
          \u5f53\u6211\u521a\u63a5\u89e6 JS \u65f6\uff0c\u5b83\u4e0d\u5b8c\u7f8e\uff0c\u5f53\u7136\u73b0\u5728\u4e5f\u4e0d\u3002\u5bf9\u4e8e\u4f7f\u7528\u5b83\u6765\u8fdb\u884c\u5927\u578b\u73b0\u4ee3\u9879\u76ee\u5f00\u53d1\uff0c\u6211\u4e00\u76f4\u6301\u6000\u7591\u6001\u5ea6\uff0c\u4e0d\u8fc7\u6700\u8fd1\u51e0\u5e74\uff0cTypeScript \u7684\u51fa\u73b0\u3001ES6+ \uff082015~2023\uff09\u89c4\u8303\u6301\u7eed\u6f14\u8fdb\u3001\u88c5\u9970\u5668\u63d0\u6848\u7684\u63a8\u8fdb\u3001\u8fd8\u6709\u521a\u521a\u8fdb\u5165 Stage1 \u7684\u6a21\u5f0f\u5339\u914d\u63d0\u6848\uff0c\u8fd9\u4e9b\u591a\u5c11\u7f13\u89e3\u4e86\u6211\u8fd9\u65b9\u9762\u7684\u987e\u8651\u3002\u4e0d\u8fc7\u63d0\u6848\u6bd5\u7adf\u53ea\u662f\u63d0\u6848\uff0c\u8ddd\u79bb\u5b83\u4eec\u843d\u5730\u8fd8\u9700\u8981\u5f88\u957f\u4e00\u6bb5\u65f6\u95f4\uff0c\u800c\u4e14\u4e5f\u4e0d\u662f\u6240\u6709\u63d0\u6848\u90fd\u4f1a\u88ab\u91c7\u7eb3\uff0c\u7ee7\u7eed\u89c2\u671b\u5427\u3002<\/p>\n\n\n\n
          \u6211\u5df2\u5c06\u672c\u6587\u7684\u5177\u4f53\u5b9e\u73b0\u4ee3\u7801\u4e0a\u4f20\u5230\u4e86 GitHub\uff1ahttps:\/\/github.com\/WayneWu98\/power-coding<\/a>\uff08\u6b22\u8fce Star \u548c PR\uff09\u3002<\/p>\n\n\n\n
          \u53c2\u8003<\/h2>\n\n\n\n