{"id":111,"date":"2020-11-15T20:44:09","date_gmt":"2020-11-15T19:44:09","guid":{"rendered":"https:\/\/info.edython.eu\/?p=111"},"modified":"2020-11-16T09:48:01","modified_gmt":"2020-11-16T08:48:01","slug":"using-generics-to-decorate-a-class","status":"publish","type":"post","link":"https:\/\/info.edython.eu\/index.php\/2020\/11\/15\/using-generics-to-decorate-a-class\/","title":{"rendered":"Using generics to decorate a class"},"content":{"rendered":"\n

We previously explained how to add new attributes to a class using a decorator<\/a> and properly use the decorated class accordingly to the type system. Here we use a property which type is a generic and a method which argument is a generic.<\/p>\n\n\n\n

Add a property<\/h2>\n\n\n\n

Here we add a property named data<\/code> which is an instance of some Data<\/code> class.<\/p>\n\n\n\n

class Data {\n    name: string = ''\n}\ninterface IFoo<D extends Data> {\n  data?: D\n}\nfunction decorate<\n  T extends { new (...args: any[]): {} },\n  D extends Data\n>(constructor: T) {\n  return class extends constructor implements IFoo<D> {\n    data?: D\n  }\n}\n@decorate\nclass Foo {\n  static new<D extends Data>() {\n    return new Foo() as TFoo<D>\n  }\n}\ntype TFoo<D extends Data> = Foo & IFoo<D><\/code><\/pre>\n\n\n\n
Here is how one can use it<\/p>\n\n\n\n
var foo = Foo.new()\nconsole.log(foo.data)\nfoo.data = {\n  name: 'blabla'\n}\nconsole.log(foo.data.name)<\/code><\/pre>\n\n\n\n
We can also decorate using a strict subclass of data<\/p>\n\n\n\n
class XData extends Data {\n    x = true\n}\n@decorate\nclass Bar {\n  static new<D extends XData>() {\n    return new Bar() as TBar<D>\n  }\n}\ntype TBar<D extends XData> = Bar & IFoo<D><\/code><\/pre>\n\n\n\n
Here is how one can use it<\/p>\n\n\n\n
var bar = Bar.new()\nbar.data = {\n  name: 'blabla',\n  x: true\n}\nconsole.log(bar.data.name)<\/code><\/pre>\n\n\n\n
If we want Foo<\/code> to also accept Data<\/code> subclasses, we must add any string signature to Data<\/code>:<\/p>\n\n\n\n
class Data {\n    [$: string]: any\n    name: string = ''\n}<\/code><\/pre>\n\n\n\n
Here is how one can use it<\/p>\n\n\n\n
foo.data = {\n  name: 'blabla',\n  x: true\n}\nconsole.log(foo.data.name)<\/code><\/pre>\n\n\n\n
Add a method<\/h2>\n\n\n\n
Here we add a method named test<\/code> which sole argument is an instance of some Data<\/code>.<\/p>\n\n\n\n
class Data {\n    [$: string]: any\n    name: string = 'foo'\n}\ninterface IFoo<D extends Data> {\n  test(data: D): void\n}\nfunction decorate<\n  T extends { new (...args: any[]): {} },\n  D extends Data\n>(constructor: T) {\n  class U extends constructor implements IFoo<D> {\n    test(data: D) {\n      return data.name\n    }\n  }\n  return U\n}\n@decorate\nclass Foo {\n  static new<D extends Data>() {\n    return new Foo() as TFoo<D>\n  }\n}\ntype TFoo<D extends Data> = Foo & IFoo<D><\/code><\/pre>\n\n\n\n
Here is how we can use it<\/p>\n\n\n\n
var foo = Foo.new()\nconsole.log(foo.test(new Data()))<\/code><\/pre>\n\n\n\n
Subclassing the Data<\/code> class<\/p>\n\n\n\n
class XData extends Data {\n    x = 421\n}\n@decorate\nclass Bar {\n  static new<D extends XData>() {\n    return new Bar() as TBar<D>\n  }\n  constructor(name: string) {\n    super()\n    this.name = name\n  }\n}\ntype TBar<D extends XData> = Bar & IFoo<D><\/code><\/pre>\n\n\n\n
and some usage<\/p>\n\n\n\n
var bar = Bar.new()\nconsole.log(bar.test(new XData('bar')))\n\nconsole.log(foo.test(new XData('baz')))<\/code><\/pre>\n\n\n\n
Playgrounds<\/h2>\n\n\n\n
Typescript playground<\/a> to add a property.
Typescript playground<\/a> to add a method.<\/p>\n","protected":false},"excerpt":{"rendered":"
We previously explained how to add new attributes to a class using a decorator and properly use the decorated class accordingly to the type system. Here we use a property which type is a generic and a method which argument is a generic. Add a property Here we add a property named data which is … Continuer la lecture de « Using generics to decorate a class »<\/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\/111"}],"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=111"}],"version-history":[{"count":6,"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/posts\/111\/revisions"}],"predecessor-version":[{"id":123,"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/posts\/111\/revisions\/123"}],"wp:attachment":[{"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/media?parent=111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/categories?post=111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/info.edython.eu\/index.php\/wp-json\/wp\/v2\/tags?post=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}