🪆🪆🪆🪆🪆🪆🪆 Decorators in TypeScript 5.0 Everything you need to know!

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

❓ Why I am talking about this topic ?

🪆 What's a decorator? @Decorator A pattern that allows to add dynamically a behavior... On an element of a class… With an annotation expression:

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

🔎 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)

󰳕󰳕󰳕󰳕󰳕󰳕󰳕 🪆 Example

📦 Which library uses them? Some examples…

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

⌛ Few years later

🏷 Planned in TypeScript 4.9… Finally available in 5.0 !

🔎 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)

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

🔎 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;

🔎 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;

󰳕󰳕󰳕󰳕󰳕󰳕󰳕 🪆 Example

❓❓❓❓❓❓❓ 🪆 Questions?

🙏🙏🙏🙏🙏🙏🙏 🪆 Thanks!