{"id":23250756,"url":"https://github.com/changhuixu/typescript-decorator","last_synced_at":"2026-04-13T02:04:45.374Z","repository":{"id":39576612,"uuid":"134880589","full_name":"changhuixu/typescript-decorator","owner":"changhuixu","description":"An introduction to decorator in Typescript; A resemblance to Angular component decorator.","archived":false,"fork":false,"pushed_at":"2023-01-07T02:21:44.000Z","size":1694,"stargazers_count":1,"open_issues_count":21,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-12T08:18:26.648Z","etag":null,"topics":["component","decorator","decorators","typescript","webpack"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/changhuixu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-25T16:29:01.000Z","updated_at":"2020-03-24T23:56:29.000Z","dependencies_parsed_at":"2023-02-06T10:31:27.712Z","dependency_job_id":null,"html_url":"https://github.com/changhuixu/typescript-decorator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/changhuixu%2Ftypescript-decorator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/changhuixu%2Ftypescript-decorator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/changhuixu%2Ftypescript-decorator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/changhuixu%2Ftypescript-decorator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/changhuixu","download_url":"https://codeload.github.com/changhuixu/typescript-decorator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423522,"owners_count":20936626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","decorator","decorators","typescript","webpack"],"created_at":"2024-12-19T09:14:55.947Z","updated_at":"2026-04-13T02:04:45.320Z","avatar_url":"https://github.com/changhuixu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TypeScript Decorators\n\nAn introduction to decorator in Typescript; A resemblance to Angular component decorator.\n\n## Prologue\n\nIt's known that Angular internally uses \"Decorators\" intensively. Moreover, [NgRX](https://www.npmjs.com/package/@ngrx/store) and [NGXS](https://ngxs.gitbook.io/ngxs/), a more elegant library, both provide a set of handy and reusable decorators to help application composition.\nThe concept of “[Decorators](http://www.typescriptlang.org/docs/handbook/decorators.html)” is not restricted in the world of TypeScript or Angular. “Decorators” is applicable to all JS frameworks, such as in VueJS ([vue-class-component](https://www.npmjs.com/package/vue-class-component), [vue-property-decorator](https://www.npmjs.com/package/vue-property-decorator), …) and React/Redux ([mobx-react](https://www.npmjs.com/package/mobx-react), [react-redux](https://www.npmjs.com/package/react-redux), [redux-form](https://www.npmjs.com/package/redux-form), [react-dnd](https://www.npmjs.com/package/react-dnd) …).\n\n“[Decorators](https://github.com/tc39/proposal-decorators)” is currently in ECMAScript Proposals Stage-2. And TC39 will discuss the possibility of promoting “Decorators” to Stage-3 in [July 2018](https://github.com/tc39/agendas/blob/master/2018/07.md). The specs for “Decorators” might remain the same or might change. Anyhow, JavaScript community has already built up many “Decorator” libraries with significant amounts of downloads, such as [core-decorators](https://www.npmjs.com/package/core-decorators), [lodash-decorators](https://www.npmjs.com/package/lodash-decorators), and [babel-plugin-syntax-decorators](https://www.npmjs.com/package/babel-plugin-syntax-decorators).\n\nBack to our FBIS environment, I haven’t found any needs of writing a customized “Decorator” so far. However, having some basic knowledge of “Decorators” would help us reading/understanding libraries/frameworks using “Decorators”.\n\n## Decorator Examples\n\n- readonly\n- log\n- time\n- notnull\n- deprecated\n- serializable\n- serialize\n- memoize\n- component\n- event\n- component-with-interpolation\n\n## Decorators Concepts\n\nA Decorator is a special kind of declaration that can be attached to a __*class declaration*__, __*method*__, __*accessor*__, __*property*__, or __*parameter*__.\n\n### Evaluation Order\n\n1. Parameter Decorators, followed by Method, Accessor, or Property Decorators are applied for each instance member.\n2. Parameter Decorators, followed by Method, Accessor, or Property Decorators are applied for each static member.\n3. Parameter Decorators are applied for the constructor.\n4. Class Decorators are applied for the class.\n\n### Decorator Composition\n\n```typescript\n@f @g x\n// or\n@f\n@g\nx\n```\n\nIn this model, when composing functions f and g, the resulting composite (f ∘ g)(x) is equivalent to f(g(x)).\n\n### Class Decorators\n\n```typescript\nfunction ClassDecorator(\n  target: any // The class the decorator is declared on\n) {}\n\n@ClassDecorator\nclass ClassDecoratorExample {}\n```\n\n### Method Decorators\n\n```typescript\nfunction MethodDecorator(\n  target: any,  //Either the constructor function of the class for a static \n                //member, or the prototype of the class for an instance member.\n  propertyKey: string,  // The name of the member.\n  descriptor: PropertyDescriptor    //The Property Descriptor for the member.\n) {}\n\nclass ClassExample {\n    @MethodDecorator\n    method(){}\n}\n```\n\n### Accessor Decorators\n\nFunction signature is the same as Method Decorators\n\n### Property Decorators\n\n```typescript\nfunction PropertyDecorator(\n  target: any,  //Either the constructor function of the class for a static\n                //member, or the prototype of the class for an instance member.\n  propertyKey: string  // The name of the member.\n) {}\n\nclass ClassExample {\n    @PropertyDecorator\n    prop: string;\n}\n```\n\n### Parameter Decorators\n\n```typescript\nfunction ParameterDecorator(\n  target: any,  //Either the constructor function of the class for a static\n                //member, or the prototype of the class for an instance member.\n  propertyKey: string  // The name of the member.\n  index: number //The ordinal index of the parameter in the function’s parameter list.\n) {}\n\nclass ClassExample {\n    method(@Parameterecorator param1: string){}\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanghuixu%2Ftypescript-decorator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanghuixu%2Ftypescript-decorator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanghuixu%2Ftypescript-decorator/lists"}