Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/soc221b/ngx-exhaustive-check
Angular utility for ensuring exhaustive checks on TypeScript discriminated unions, enhancing type safety and reliability.
https://github.com/soc221b/ngx-exhaustive-check
angular ng typescript
Last synced: 2 days ago
JSON representation
Angular utility for ensuring exhaustive checks on TypeScript discriminated unions, enhancing type safety and reliability.
- Host: GitHub
- URL: https://github.com/soc221b/ngx-exhaustive-check
- Owner: soc221b
- License: mit
- Created: 2024-06-20T03:34:12.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-09-16T15:35:32.000Z (5 days ago)
- Last Synced: 2024-09-16T18:48:00.921Z (5 days ago)
- Topics: angular, ng, typescript
- Language: TypeScript
- Homepage:
- Size: 550 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-exhaustive-check - Angular utility for ensuring exhaustive checks on TypeScript discriminated unions, enhancing type safety and reliability. (Table of contents / Third Party Components)
README
# NgxExhaustiveCheck
Angular utility for ensuring exhaustive checks on TypeScript discriminated unions, enhancing type safety and reliability.
## Installation
```sh
$ npm install ngx-exhaustive-check
```
## Usage
### Before
Without an exhaustive check, the code may compile successfully, but this can lead to runtime errors:
```diff
import { Component } from '@angular/core';
enum Answer {
Yes,
No,
+ Maybe,
}
@Component({
selector: 'app-root',
standalone: true,
template: `
@switch (answer) {
@case (Answer.Yes) {}
@case (Answer.No) {}
@default {}
}
`,
})
export class AppComponent {
answer: Answer = Answer.Yes;
Answer = Answer;
}
```
### After
With an exhaustive check, the compilation will fail, making your code more reliable:
```diff
import { Component } from '@angular/core';
+ import { ExhaustiveCheckPipe } from 'ngx-exhaustive-check';
enum Answer {
Yes,
No,
+ Maybe,
}
@Component({
selector: 'app-root',
standalone: true,
+ imports: [ExhaustiveCheckPipe],
template: `
@switch (answer) {
@case (Answer.Yes) {}
@case (Answer.No) {}
@default {
+ {{ answer | exhaustiveCheck }}
}
}
`,
})
export class AppComponent {
answer: Answer = Answer.Yes;
Answer = Answer;
}
```
## Advanced usage
Sometimes, if you just want to ignore some cases, you can do this:
```diff
enum Answer {
Yes,
No,
+ NoOp1,
+ NoOp2,
}
```
```diff
@switch (answer) {
@case (Answer.Yes) {}
@case (Answer.No) {}
+ @case (Answer.NoOp1) {}
+ @case (Answer.NoOp2) {}
@default {
{{ answer | exhaustiveCheck }}
}
}
```
With ngx-exhaustive-check, you can achieve this by passing the `satisfies` parameter as well:
```diff
@switch (answer) {
@case (Answer.Yes) {}
@case (Answer.No) {}
@default {
- {{ answer | exhaustiveCheck }}
+ {{ answer | exhaustiveCheck: [Answer.NoOp1, Answer.NoOp2] }}
}
}
```
This is useful when you want to apply the same action to these cases.