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

Decorators in TypeScript 5.0, everything you ne...

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)

Sylvain PONTOREAU

March 29, 2023
Tweet

More Decks by Sylvain PONTOREAU

Other Decks in Programming

Transcript

  1. 🪆 What's a decorator? @Decorator A pattern that allows to

    add dynamically a behavior... On an element of a class… With an annotation expression:
  2. 🔎 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)
  3. 🔎 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)
  4. 🔎 ECMAScript Decorator ⚠ Not compatible with experimental decorators type

    Decorator<TTarget, TContext, TReturn> = ( target: TTarget, context: TContext ) => TReturn | void In typing, an ECMAScript decorator is :
  5. 🔎 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;
  6. 🔎 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>;