From e766834b32921696e1386e4c9ed8d1c653e622f9 Mon Sep 17 00:00:00 2001 From: Matt Gibson Date: Mon, 16 Dec 2024 08:03:12 -0800 Subject: [PATCH] Add guideline for required angular component input --- .../adr/0014-typescript-strict.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/docs/architecture/adr/0014-typescript-strict.md b/docs/architecture/adr/0014-typescript-strict.md index 6f05322cc..fa03e92b5 100644 --- a/docs/architecture/adr/0014-typescript-strict.md +++ b/docs/architecture/adr/0014-typescript-strict.md @@ -144,5 +144,24 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Null const foo = null ?? "default string"; ``` +#### Use `!` on required `@Input` parameters + +Typescript's property initialization has no knowledge of Angular's guarantees. That means that + +```ts +@Input({ required: true }) options: WebAuthnOptions; +``` + +will error as `options` is not initialized in the constructor. The suggested fix is to use the +non-null assert operator, `!`. + +```ts +@Input({ required: true }) options!: WebAuthnOptions; +``` + +Once [required input signals][requiredInputs] are out of dev preview for us (Angular 19), we can +transition to using them and initialize these kinds of parameters in the class body or constructor. + [null]: https://www.typescriptlang.org/tsconfig#strictNullChecks [plugin]: https://github.com/allegro/typescript-strict-plugin +[requiredInputs]: https://angular.dev/guide/components/inputs#required-inputs