Decorators in TypeScript 5.0, everything you need to know!

🇫🇷 Considéré comme expérimentaux depuis TypeScript 1.5, les décorateurs sont passés en stage 3 au TC39 en 2022. Avec la sortie de la version 5.0 du langage, une nouvelle API correspondant à cette spécification est disponible. Je vous propose de revoir ensemble où on en est sur le sujet ! (exemples disponibles ici: https://github.com/spontoreau/paris-typescript-31)

🇬🇧 Considered experimental since TypeScript 1.5, decorators moved to stage 3 at TC39 in 2022. With the release of version 5.0 of the language, a new API corresponding to this specification is available. I propose to review together where we are on the subject! (examples available here: https://github.com/spontoreau/paris-typescript-31)

Transcript

1. 🪆🪆🪆🪆🪆🪆🪆 Decorators in TypeScript 5.0 Everything you need to know!
2. 🖖 Hello! @spontoreau Sylvain Pontoreau 🎪 Co-organizer 📕 Book writer Microsoft 󰳕 Work with
3. ❓ Why I am talking about this topic ?
4. 🪆 What's a decorator? @Decorator A pattern that allows to add dynamically a behavior... On an element of a class… With an annotation expression:
5. 🏺 How it started ? Added as experimental in version 1.5 (2016) Used in Angular 2.0
6. 🔎 Experimental Decorator Applies to: - Classes - Methods - Fields - Accessors - Parameters Requirements (tsconfig): - --emitDecoratorMetadata - --experimentalDecorators Covered by TypeScript: - Types (example: MethodDecorator) - Decorator Factory - Metadata (with reflect-metadata library)
7. 󰳕󰳕󰳕󰳕󰳕󰳕󰳕 🪆 Example
8. 📦 Which library uses them? Some examples…
9. 📜 ECMAScript proposal https://github.com/tc39/proposal-decorators
10. ⌛ Few years later
11. 🏷 Planned in TypeScript 4.9… Finally available in 5.0 !
12. 🔎 ECMAScript Decorator Applies to: - ✅ Classes - ✅ Methods - ✅ Fields - ✅ Accessors (get, set, auto) - ❌ Parameters Requirements (tsconfig): - --emitDecoratorMetadata - --experimentalDecorators Covered by TypeScript: - ✅ Types (context only) - ✅ Decorator Factory - ❌ Metadata Context data: - kind (all) - name (all) - addInitializer (all - static (all except classes) - private (all except classes) - access (all except classes)
13. 🔎 ECMAScript Decorator ⚠ Not compatible with experimental decorators type Decorator<TTarget, TContext, TReturn> = ( target: TTarget, context: TContext ) => TReturn | void In typing, an ECMAScript decorator is :
14. 🔎 ECMAScript Decorator Classes type Target = new (...args: any[]) => any; type Context = ClassDecoratorContext; type Return = Target; Methods type Target = ( this: any, ...args: any[] ) => any | void; type Context = ClassMethodDecoratorContext; type Return = Target; Fields type Target = undefined; type Context = ClassFieldDecoratorContext; type Return = (this: any, value: any) => any;
15. 🔎 ECMAScript Decorator Getter type Target = (this: any) => any; type Context = ClassGetterDecoratorContext; type Return = Target; Setter type Target = (this: any, value: any) => void; type Context = ClassSetterDecoratorContext; type Return = Target Auto accessor type Target<TClass = any, TValue = any> = ClassAccessorDecoratorTarget<TClass, TValue>; type Context = ClassAccessorDecoratorContext; type Return<TClass = any, TValue = any> = ClassAccessorDecoratorResult<TClass, TValue>;
16. 󰳕󰳕󰳕󰳕󰳕󰳕󰳕 🪆 Example
17. ❓❓❓❓❓❓❓ 🪆 Questions?
18. 🙏🙏🙏🙏🙏🙏🙏 🪆 Thanks!