Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: use strict query parameters #320

Merged
merged 1 commit into from
Sep 2, 2024

Conversation

LayZeeDK
Copy link
Member

@LayZeeDK LayZeeDK commented Sep 2, 2024

Features

  • Use strict query parameters

BREAKING CHANGES

RouterStore#queryParams$ and MinimalActivatedRouteSnapshot#queryParams use StrictRouteParams instead of Params. Members are read-only and of type string | undefined instead of any.

TypeScript will fail to compile application code that has assumed a query parameter type other than string | undefined.

BEFORE:

// heroes.component.ts
// (...)
import { RouterStore } from "@ngworker/router-component-store";

@Component({
  // (...)
})
export class DashboardComponent {
  #routerStore = inject(RouterStore);

  limit$: Observable<number> = this.#routerStore.queryParams$.pipe(
    map((params) => params["limit"])
  );
}

AFTER:

// heroes.component.ts
// (...)
import { RouterStore } from "@ngworker/router-component-store";

@Component({
  // (...)
})
export class DashboardComponent {
  #routerStore = inject(RouterStore);

  limit$: Observable<number> = this.#routerStore.queryParams$.pipe(
    map((params) => Number(params["limit"] ?? 10))
  );
}

@LayZeeDK LayZeeDK force-pushed the feat/use-strict-query-parameters branch from 9a316f8 to 48fcb57 Compare September 2, 2024 20:34
**BREAKING CHANGES**

`RouterStore#queryParams$` and `MinimalActivatedRouteSnapshot#queryParams` use `StrictRouteParams` instead of `Params`. Members are read-only and of type `string | undefined` instead of `any`.

TypeScript will fail to compile application code that has assumed a query parameter type other than `string | undefined`.

BEFORE:

```typescript
// heroes.component.ts
// (...)
import { RouterStore } from "@ngworker/router-component-store";

@component({
  // (...)
})
export class DashboardComponent {
  #routerStore = inject(RouterStore);

  limit$: Observable<number> = this.#routerStore.queryParams$.pipe(
    map((params) => params["limit"])
  );
}
```

AFTER:

```typescript
// heroes.component.ts
// (...)
import { RouterStore } from "@ngworker/router-component-store";

@component({
  // (...)
})
export class DashboardComponent {
  #routerStore = inject(RouterStore);

  limit$: Observable<number> = this.#routerStore.queryParams$.pipe(
    map((params) => Number(params["limit"] ?? 10))
  );
}
```
@LayZeeDK LayZeeDK force-pushed the feat/use-strict-query-parameters branch from 48fcb57 to 77a5e66 Compare September 2, 2024 20:36
@LayZeeDK LayZeeDK merged commit 86a6bbf into main Sep 2, 2024
7 checks passed
@LayZeeDK LayZeeDK deleted the feat/use-strict-query-parameters branch September 2, 2024 20:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant