{"id":120,"date":"2020-11-16T12:47:33","date_gmt":"2020-11-16T11:47:33","guid":{"rendered":"https:\/\/info.edython.eu\/?p=120"},"modified":"2020-11-16T13:49:04","modified_gmt":"2020-11-16T12:49:04","slug":"class-decorators-vs-mixins","status":"publish","type":"post","link":"https:\/\/info.edython.eu\/index.php\/2020\/11\/16\/class-decorators-vs-mixins\/","title":{"rendered":"Class decorators vs mixins"},"content":{"rendered":"\n

Class decorators are an experimental feature of typescript 4.0 and mixins were supported since typescript 2.2 at least. Unfortunately class decorators do have drawbacks with respect to the type recognition because added attributes are not recognized as is. Here is a comparison of class decorators and mixins after an excellent article<\/a> from Marius Shulz.<\/p>\n\n\n\n

We see on two examples how using decorators is more verbose than using mixins.<\/p>\n\n\n\n

Timestamps<\/h2>\n\n\n\n

Timestamping instances at creation time (TS playground<\/a>).<\/p>\n\n\n\n

function Timestamped<\n  TBase extends { new(...args: any[]): {} }\n>(Base: TBase) {\n  return class extends Base {\n    timestamp = Date.now()\n  }\n}\n\/\/ Create a new class by mixing `Timestamped` into an anonymous class\nconst TimestampedUser = Timestamped(class {\n  constructor(public name: string) {}\n})\n\/\/ Instantiate the new `TimestampedUser` class\nconst user = new TimestampedUser(\"John Doe\")\nconsole.log(user.name)\nconsole.log(user.timestamp)\n<\/code><\/pre>\n\n\n\n
Here is the same functionality with  a decorator (TS playground<\/a>)<\/p>\n\n\n\n
interface ITimestamped {\n  timestamp: Date\n}\nfunction Timestamped<\n  TBase extends { new(...args: any[]): {} }\n>(Base: TBase) {\n  return class extends Base implements ITimestamped {\n    timestamp = Date.now()\n  }\n}\n\/\/ Create a new class by decorating class `TimestampedUser`\n@Timestamped\nclass TimestampedUser{\n  constructor(public name: string) {}\n}\n\/\/ Instantiate the new `TimestampedUser` class\nconst user = new TimestampedUser(\"John Doe\") as TimestampedUser & ITimestamped\nconsole.log(user.name)\nconsole.log(user.timestamp)<\/code><\/pre>\n\n\n\n
With a Constructor<\/h2>\n\n\n\n
Mixins version<\/h3>\n\n\n\n
 (TS playground<\/a>)<\/p>\n\n\n\n
function Tagged<\n  TBase extends { new(...args: any[]): {} }\n>(Base: TBase) {\n  return class extends Base {\n    tag?: string\n    constructor(...args: any[]) {\n      super(...args)\n      try {this.tag = args[1]}\n      finally {}\n    }\n  }\n}\n\/\/ Create a new class by mixing `Tagged` into an anonymous class\nconst TaggedUser = Tagged(class {\n  name: string\n  constructor(...args: any[]) {\n    try {this.name = args[0]}\n    finally {}\n  }\n})\nconst user = new TaggedUser(\"Jane Doe\", \"janedoe\")\nconsole.log(user.name)\nconsole.log(user.tag)\n<\/code><\/pre>\n\n\n\n
Nota bene<\/h3>\n\n\n\n
In the previous code, we have two constructors. TypeScript implicitly forces them to have somehow the same signature. In that example, we also added a new argument to the constructor of the class obtained by mixins.<\/p>\n\n\n\n
Class decorator version<\/h3>\n\n\n\n
TS playground<\/a><\/p>\n\n\n\n
interface ITagged {\n  tag?: string\n}\nfunction Tagged<\n  TBase extends { new(...args: any[]): {} }\n>(Base: TBase) {\n  return class extends Base {\n    tag?: string\n    constructor(...args: any[]) {\n      super(...args)\n      try {this.tag = args[1]}\n      finally {}\n    }\n  }\n}\n\/\/ Create a new class by mixing `Tagged` into an anonymous class\n@Tagged\nclass TaggedUser {\n  name: string\n  constructor(...args: any[]) {\n    try {this.name = args[0]}\n    finally {}\n  }\n}\nconst user = new TaggedUser(\"Jane Doe\", \"janedoe\") as TaggedUser & ITagged\nconsole.log(user.name)\nconsole.log(user.tag)\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Class decorators are an experimental feature of typescript 4.0 and mixins were supported since typescript 2.2 at least. Unfortunately class decorators do have drawbacks with respect to the type recognition because added attributes are not recognized as is. Here is a comparison of class decorators and mixins after an excellent article from Marius Shulz. We … Continuer la lecture de « Class decorators vs mixins »<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/posts\/120"}],"collection":[{"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/comments?post=120"}],"version-history":[{"count":8,"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/posts\/120\/revisions"}],"predecessor-version":[{"id":136,"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/posts\/120\/revisions\/136"}],"wp:attachment":[{"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/media?parent=120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/categories?post=120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/tags?post=120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}