Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Decorators in TypeScript 5.0, everything you need to know!

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)

[email protected]

March 29, 2023
Tweet

Other Decks in Programming

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