Merge pull request #55 from github/docs-remove-ts-s-add-docs-note-about-them

docs: Remove TS !s, add docs note about them.

Author: keithamus

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) {

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:

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!

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}!`