From 04fc9e77c58cedb03a495e957c142bb891654922 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 21 Jul 2020 09:28:32 +0100
Subject: [PATCH] docs: Remove TS !s, add docs note about them.

---
 docs/_guide/anti-patterns.md |  8 ++++----
 docs/_guide/decorators.md    | 22 ++++++++++++++++++++++
 docs/_guide/targets.md       |  8 ++++----
 docs/index.html              |  4 ++--
 4 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/docs/_guide/anti-patterns.md b/docs/_guide/anti-patterns.md
index bf4bf02d..70b219af 100644
--- a/docs/_guide/anti-patterns.md
+++ b/docs/_guide/anti-patterns.md
@@ -258,7 +258,7 @@ class UserListElement extends HTMLElement {
 
 ```typescript
 class UserList {
-  @targets admins!: HTMLElement[]
+  @targets admins: HTMLElement[]
 
   showAdmins() {
     // Just need to get admins here...
@@ -282,7 +282,7 @@ For example let's say we have a list of filter checkboxes and checking the "all"
 ```typescript
 @controller
 class UserFilter {
-  @targets filters!: HTMLInputElement[]
+  @targets filters: HTMLInputElement[]
 
   get allFilter() {
     return this.filters.find(el => el.matches('[data-filter="all"]'))
@@ -325,8 +325,8 @@ While this works well, it could be more easily solved with targets:
 ```typescript
 @controller
 class UserFilter {
-  @targets filters!: HTMLInputElement[]
-  @target allFilter!: HTMLInputElement
+  @targets filters: HTMLInputElement[]
+  @target allFilter: HTMLInputElement
 
   filter(event: Event) {
     if (event.target === this.allFilter) {
diff --git a/docs/_guide/decorators.md b/docs/_guide/decorators.md
index a1f4a697..b5b6efba 100644
--- a/docs/_guide/decorators.md
+++ b/docs/_guide/decorators.md
@@ -37,6 +37,28 @@ class HelloWorldElement extends HTMLElement {
 
 Class Field decorators get given the class and the field name so they can add custom functionality to the field. Because they operate on the fields, they must be put on top of or to the left of the field.
 
+#### Disabling `strictPropertyInitialization`
+
+TypeScript comes with various "strict" mode settings, one of which is `strictPropertyInitialization` which TypeScript catch potential class properties which might not be assigned during construction of a class. This option conflicts with Catalyst's `@target`/`@targets` decorators, which safely do the assignment but TypeScript's simple heuristics cannot detect this. It's recommended to disable this option (other strict mode rules can still apply) in your `tsconfig.json` like so:
+
+```json
+{
+  "compilerOptions": {
+    "strict": true,
+    "strictPropertyInitialization": false
+  }
+}
+```
+
+If you really want to keep the `strictPropertyInitialization` option set to `true`, another option would be to use TypeScript's [non-null assertion operator (`!`)](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator), adding this to each of your `@target`/`@targets` properties, like so:
+
+```typescript
+class HelloWorldElement extends HTMLElement {
+  @target something!: HTMLElement
+  @targets items!: HTMLElement[]
+}
+```
+
 ### Method Decorators
 
 Catalyst doesn't currently ship with any method decorators, but you might see them in code. They work just like Field Decorators (in fact they're the same thing). Put them on top or on the left of the method, like so:
diff --git a/docs/_guide/targets.md b/docs/_guide/targets.md
index 32c9536f..7654da94 100644
--- a/docs/_guide/targets.md
+++ b/docs/_guide/targets.md
@@ -30,7 +30,7 @@ import { controller, target } from "@github/catalyst"
 
 @controller
 class HelloWorldElement extends HTMLElement {
-  @target outputTarget!: HTMLElement
+  @target outputTarget: HTMLElement
 
   greet() {
     this.outputTarget.textContent = `Hello, world!`
@@ -92,8 +92,8 @@ import { controller, target, targets } from "@github/catalyst"
 
 @controller
 class UserSettingsElement extends HTMLElement {
-  @target read!: HTMLInputElement
-  @target write!: HTMLInputElement
+  @target read: HTMLInputElement
+  @target write: HTMLInputElement
 
   valid() {
     // One checkbox must be checked!
@@ -103,7 +103,7 @@ class UserSettingsElement extends HTMLElement {
 
 @controller
 class UserListElement extends HTMLElement {
-  @targets user!: HTMLElement
+  @targets user: HTMLElement
 
   valid() {
     // Every user must be valid!
diff --git a/docs/index.html b/docs/index.html
index e0a4960b..96db7334 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -46,8 +46,8 @@ <h1 class="h000-mktg mt-6 mr-6">Catalyse your Web Components</h1>
 
 @controller
 class HelloWorldElement extends HTMLElement {
-  @target name!: HTMLElement
-  @target output!: HTMLElement
+  @target name: HTMLElement
+  @target output: HTMLElement
 
   greet() {
     this.output.textContent = `Hello, ${this.name.value}!`