Episode 23/04: TypeScript 5 Beta, Angular Roadmap 2023

TypeScript released the beta for version 5, with stable support for decorators. They are slightly different from the experimental ones we use in Angular. Furthermore, Minko Gechev gave an update about Angular's roadmap. The focus in 2023 is on reactivity and server-side rendering.

TypeScript 5 Beta

TypeScript does not follow semantic versioning. So the version doesn't indicate breaking changes, or additional features by definition.

Some of the new features are that a TypeScript configuration can extend from multiple ones, the compilation is more performant, and TypeScript has improved support for ECMAScript Modules. The main feature, though, is support for decorators.

We've been using decorators in Angular all the time. So what's new about them? They've been experimental.

There are some differences between the experimental and the upcoming stable mode. However, TypeScript 5 supports both. In which ways that will affect Angular is something that the future will show.

But it is clear that parameter decorators, as we have them in the constructor, will not be available yet. Their specification is in an earlier stage compared to the rest. To be safe, just use the inject function because it doesn't use decorators.

For example, here is a code snippet that used to work with experimentalDecorators set to true

export declare interface Optional {}
export declare const Optional: OptionalDecorator;
export declare interface OptionalDecorator {
    (): any;
    new (): Optional;
}

class SomeService {}

function Component<T>(properties: {selector: string, template: string}) {
  return function(target: T) {
    return target;
  }
}

@Component({
    selector: 'ng-news',
    template: `This is ng-news,...`
})
class NgNewsComponent {
    constructor(@Optional() someService: SomeService) {

    }
}

That's a pseudo version of a typical Angular component which uses the parameter decorator @Optional().

With TypeScript 5 and stable decorators, it would fail. To fix the @Component decorator, one has to add the context to the returned function. The parameter decorator is not supported.

function Component<T>(properties: {selector: string, template: string}) {
  return function(target: T, context: ClassDecoratorContext) {
    return target;
  }
}

Playground Example

Announcing TypeScript 5.0 Beta - TypeScript

devblogs.microsoft.com

Angular's Roadmap in 2023

Minko Gechev, the Angular product lead, gave an update about Angular's roadmap at the Angular Graz Meetup.

The focus lies on improved reactivity and server-side rendering.

In terms of reactivity, we will get a more efficient change detection that doesn't rely on zone.js anymore.
Server-Side rendering gets non-destructive hydration. That means Angular doesn't rebuild the DOM.

Regarding partial hydration, that will be a topic for next year. Partial hydration reduces the amount of JavaScript which runs in the browser.

Minor Version Upgrades

NgRx 15.2

We also had a lot of minor version upgrades. NgRx, a state management library up to 15.2. It allows functional effects, so there is no need for effect classes anymore.

An example:

Class-based Effects

export class SecurityEffects {
  private actions$ = inject(Actions);
  private httpClient = inject(HttpClient);

  signIn$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(securityActions.signIn),
      concatMap((credentials) =>
        this.httpClient.post<User>('/authorize', credentials)
      ),
      map((user) => securityActions.signInSuccess({ user }))
    );
  });
}

Functional Effects (supported since NgRx 15.2)

const signIn$ = createEffect(
  (actions$ = inject(Actions), httpClient = inject(HttpClient)) => {
    return actions$.pipe(
      ofType(securityActions.signIn),
      concatMap((credentials) =>
        httpClient.post<User>('/authorize', credentials)
      ),
      map((user) => securityActions.signInSuccess({ user }))
    );
  },
  { functional: true }
);

Further Minor Releases

• Nx 15.6: Release Notes
• Cypress 12.4: Release Notes
• Playwright 1.30: Release Notes
• Jest 29.4: Release Notes