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!
   

   View Slide

2. 🖖 Hello!
   @spontoreau
   Sylvain Pontoreau
   🎪 Co-organizer
   📕 Book writer
   Microsoft
   󰳕 Work with
   

   View Slide

3. ❓ Why I am talking about this topic ?
   

   View Slide

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:
   

   View Slide

5. 🏺 How it started ?
   Added as experimental in version 1.5 (2016)
   Used in Angular 2.0
   

   View Slide

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)
   

   View Slide

7. 󰳕󰳕󰳕󰳕󰳕󰳕󰳕
   🪆 Example
   

   View Slide

8. 📦 Which library uses them?
   Some examples…
   

   View Slide

9. 📜 ECMAScript proposal
   https://github.com/tc39/proposal-decorators
   

   View Slide

10. ⌛ Few years later
    

    View Slide

11. 🏷 Planned in TypeScript 4.9…
    Finally available in 5.0 !
    

    View Slide

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)
    

    View Slide

13. 🔎 ECMAScript Decorator
    ⚠ Not compatible with experimental decorators
    type Decorator = (
    target: TTarget,
    context: TContext
    ) => TReturn | void
    In typing, an ECMAScript decorator is :
    

    View Slide

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;
    

    View Slide

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 = ClassAccessorDecoratorTarget;
    type Context = ClassAccessorDecoratorContext;
    type Return = ClassAccessorDecoratorResult;
    

    View Slide

16. 󰳕󰳕󰳕󰳕󰳕󰳕󰳕
    🪆 Example
    

    View Slide

17. ❓❓❓❓❓❓❓
    🪆 Questions?
    

    View Slide

18. 🙏🙏🙏🙏🙏🙏🙏
    🪆 Thanks!
    

    View Slide