{"id":92,"date":"2020-11-15T16:32:43","date_gmt":"2020-11-15T15:32:43","guid":{"rendered":"https:\/\/info.edython.eu\/?p=92"},"modified":"2020-11-15T17:14:25","modified_gmt":"2020-11-15T16:14:25","slug":"decorate-a-class-with-new-attributes","status":"publish","type":"post","link":"https:\/\/info.edython.eu\/index.php\/2020\/11\/15\/decorate-a-class-with-new-attributes\/","title":{"rendered":"Decorate a class with new attributes"},"content":{"rendered":"\n

Typescript 4.<\/p>\n\n\n\n

Using a decorator to add new methods to a class is not done seamlessly. The main problem is that decorated classes are not properly used within the type system. We thus need a factory method to create instances.<\/p>\n\n\n\n

We start with an interface to declare the optional new attributes foo<\/code><\/p>\n\n\n\n

interface IFoo {\n  foo: string\n}<\/code><\/pre>\n\n\n\n
The decorator adds the foo<\/code> property<\/p>\n\n\n\n
function decorate<\n  T extends {\n    new (...args: any[]): {}\n  }\n>(\n  constructor: T\n) {\n  class U extends constructor {\n    foo: string = 'foo'\n  }\n  return U\n}<\/code><\/pre>\n\n\n\n
Then we decorate a class and define a new type to extend the class and define a factory instance maker.<\/p>\n\n\n\n
@decorate\nclass Foo {\n  bar: string = 'bar'\n  static new() {\n    return new Foo() as TFoo\n  }\n}\ntype TFoo = Foo & IFoo<\/code><\/pre>\n\n\n\n
Finally we are able to use the new decorated class. The type system won’t complain provided we use the TFoo<\/code> typecast, either directly or through the static factory Foo.new<\/code><\/p>\n\n\n\n
var foo = Foo.new()\nconsole.log(foo.foo, foo.bar)\nfoo = new Foo() as TFoo\nconsole.log(foo.foo, foo.bar)<\/code><\/pre>\n\n\n\n
Here is the Typescript\u00a0playground<\/a>.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Typescript 4. Using a decorator to add new methods to a class is not done seamlessly. The main problem is that decorated classes are not properly used within the type system. We thus need a factory method to create instances. We start with an interface to declare the optional new attributes foo The decorator adds … Continuer la lecture de « Decorate a class with new attributes »<\/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\/92"}],"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=92"}],"version-history":[{"count":4,"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/posts\/92\/revisions"}],"predecessor-version":[{"id":110,"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/posts\/92\/revisions\/110"}],"wp:attachment":[{"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/media?parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/categories?post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/tags?post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}