{"action":"created","issue":{"url":"https://api.github.com/repos/Microsoft/TypeScript/issues/8876","repository_url":"https://api.github.com/repos/Microsoft/TypeScript","labels_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/8876/labels{/name}","comments_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/8876/comments","events_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/8876/events","html_url":"https://github.com/Microsoft/TypeScript/issues/8876","id":157328018,"number":8876,"title":"Combine few classes in one with decorators","user":{"login":"SET001","id":30506,"avatar_url":"https://avatars.githubusercontent.com/u/30506?v=3","gravatar_id":"","url":"https://api.github.com/users/SET001","html_url":"https://github.com/SET001","followers_url":"https://api.github.com/users/SET001/followers","following_url":"https://api.github.com/users/SET001/following{/other_user}","gists_url":"https://api.github.com/users/SET001/gists{/gist_id}","starred_url":"https://api.github.com/users/SET001/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SET001/subscriptions","organizations_url":"https://api.github.com/users/SET001/orgs","repos_url":"https://api.github.com/users/SET001/repos","events_url":"https://api.github.com/users/SET001/events{/privacy}","received_events_url":"https://api.github.com/users/SET001/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-05-28T08:30:02Z","updated_at":"2016-05-28T09:12:51Z","closed_at":null,"body":"Recently I was playing with TypeScript decorators and ended up with interesting pattern. It is possible to extend some basic class with any number of other classes. The idea is to extend decorated class prototype with prototypes of classes from decorator. This is somehow different from traditional class inheritance. It is more like adding plugins:\r\n\r\nSo here is the example decorator which extends some class with plugins:\r\n\r\n    export function Plugins(plugins: any[]): any{\r\n      return function(target: any){\r\n        var layer = function(){};\r\n        layer.prototype = target.prototype;\r\n        for (var plugin of plugins){\r\n          _.extend(layer.prototype, plugin.prototype);\r\n        }\r\n        return target;\r\n      }\r\n    }\r\n\r\nNow let's say we have class that handles connection. Something like this.\r\n\r\n    export class SocketIOClientConnection extends ConnectionLayer{\r\n    \tconstructor(public socket?: SocketIO.Socket){}\r\n    \r\n    \tsend(message: string){\r\n    \t\tthis.socket.emit(message);\r\n    \t}\r\n    \r\n    \tbroadcast(message: string){\r\n    \t\tthis.socket.emit(message);\r\n    \t}\r\n    \tdisconnect(){}\r\n    }\r\n\r\nand imagine that all socket events are somehow binded to this class methods which begin with `on`. Then we can decorate this connection class with some plugins which would add handlers of some sort. We can have auth, chat, streamer and as many plugins we ever want.\r\n\r\n```\r\nexport class AuthConnection extends ConnectionLayer{\r\n\tonLogIn(login?: string, password?: string){\r\n\t\tthis.socket.send('loggedOn');\t\r\n\t}\r\n\tonLogOut(){\r\n\t\tthis.socket.send('loggedOut');\r\n\t}\r\n\tonRegister(){}\r\n}\r\n```\r\n\r\nwe can decorate connection method it this way\r\n```\r\n@Plugins([AuthConnection])\r\nexport class SocketIOClientConnection extends ConnectionLayer{\r\n```\r\n\r\nand now it will be able to handle login requests... The goals of this approach is that auth implementation know nothing about how exactly connection handled. We can have socketIO or webRTC or whatever class implementing some interface and decorated with this auth plugins.\r\n\r\nNow few questions:\r\n\r\nWhat do you think about this approach?\r\nIs it ok to use decorators in this way?\r\nMaybe this pattern already exist and have some name? any readings on this?\r\nWhat pitfalls this approach have? (for example, plugins can not have methods with same name and so on)"},"comment":{"url":"https://api.github.com/repos/Microsoft/TypeScript/issues/comments/222298782","html_url":"https://github.com/Microsoft/TypeScript/issues/8876#issuecomment-222298782","issue_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/8876","id":222298782,"user":{"login":"kitsonk","id":1282577,"avatar_url":"https://avatars.githubusercontent.com/u/1282577?v=3","gravatar_id":"","url":"https://api.github.com/users/kitsonk","html_url":"https://github.com/kitsonk","followers_url":"https://api.github.com/users/kitsonk/followers","following_url":"https://api.github.com/users/kitsonk/following{/other_user}","gists_url":"https://api.github.com/users/kitsonk/gists{/gist_id}","starred_url":"https://api.github.com/users/kitsonk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kitsonk/subscriptions","organizations_url":"https://api.github.com/users/kitsonk/orgs","repos_url":"https://api.github.com/users/kitsonk/repos","events_url":"https://api.github.com/users/kitsonk/events{/privacy}","received_events_url":"https://api.github.com/users/kitsonk/received_events","type":"User","site_admin":false},"created_at":"2016-05-28T09:12:51Z","updated_at":"2016-05-28T09:12:51Z","body":"This isn't always the best forum for general TypeScript discussion.  StackOverflow, gitter or #typescript on IRC are usually better.\r\n\r\nAny mutations to make to the prototype are not reflected in the classes types.  There are a few discussions about programmatically modifying the types (see #4490), but nothing yet delivered, although it will likely be delivered via ambient decorators in TS 2.1 (see #2900).\r\n\r\nAngular 2 makes heavy use of decorators in creating its components, though, as mentioned, since changes to the prototype are not reflected in the type information about the class, it is generally limited to assigning/mutating values of the prototype.\r\n\r\nDecorators are not a \"TypeScript\" thing.  They are essentially an implementation of the Stage 1 proposal of [ECMAScript Decorators](https://github.com/wycats/javascript-decorators/blob/master/README.md).\r\n"}}
{"actor":{"display_login":"kitsonk"}}