Update TypeScript guide (#572)

Author: ghiculescu

docs/reference/using_typescript.md

@@ -1,75 +1,75 @@
 # Using Typescript
 
-Stimulus itself is written [TypeScript](https://www.typescriptlang.org/)
-and provides types directly over its package.
-The following documentation should make it clear how to define types for
-stimulus properties.
+Stimulus itself is written in [TypeScript](https://www.typescriptlang.org/) and provides types directly over its package.
+The following documentation shows how to define types for Stimulus properties.
 
 ## Define Controller Element Type
 
-By default, the `element` of the controller is from type `Element`.  
-If the element expected type is as example `HTMLFormElement` it can
-be defined this way:
+By default, the `element` of the controller is of type `Element`. You can override the type of the controller element by specifiying it as a [Generic Type](https://www.typescriptlang.org/docs/handbook/2/generics.html). For example, if the element type is expected to be a `HTMLFormElement`:
+
+<meta data-controller="callout" data-callout-text-value="Controller<HTMLFormElement>">
 
 ```ts
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from "@hotwired/stimulus"
 
 export default class MyController extends Controller<HTMLFormElement> {
-    submit() {
-        new FormData(this.element)
-    }
+  submit() {
+    new FormData(this.element)
+  }
 }
 ```
 
-## Define Controller Value Type
+## Define Value Properties
 
-To define the type of configured values is possible
-over the declare feature of TypeScript:
+You can define the properties of configured values using the TypeScript `declare` keyword. You just need to define the properties if you are making use of them within the controller.
 
 ```ts
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from "@hotwired/stimulus"
 
 export default class MyController extends Controller {
-    static values = {
-        code: String,
-    };
+  static values = {
+    code: String
+  }
 
-    declare readonly codeValue: string;
+  declare codeValue: string
+  declare readonly hasCodeValue: boolean
 }
 ```
 
-> The `declare` avoids override of the exist stimulus property and just define the type for TypeScript.
+> The `declare` keyword avoids overriding the existing Stimulus property, and just defines the type for TypeScript.
+
+## Define Target Properties
 
-## Define Controller Target Type
+You can define the properties of configured targets using the TypeScript `declare` keyword. You just need to define the properties if you are making use of them within the controller.
 
-To define the type of configured targets is possible
-over the declare feature of TypeScript:
+ The return types of the `[name]Target` and `[name]Targets` properties can be any inheriting from the `Element` type. Choose the best type which fits your needs. Pick either `Element` or `HTMLElement` if you want to define it as a generic HTML element.
 
 ```ts
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from "@hotwired/stimulus"
 
 export default class MyController extends Controller {
-    static targets = [
-        'input'
-    ];
+  static targets = [ "input" ]
 
-    declare readonly inputTarget: HTMLInputElement;
+  declare readonly hasInputTarget: boolean
+  declare readonly inputTarget: HTMLInputElement
+  declare readonly inputTargets: HTMLInputElement[]
 }
 ```
 
-> The `declare` avoids override of the exist stimulus property and just define the type for TypeScript.
+> The `declare` keyword avoids overriding the existing Stimulus property, and just defines the type for TypeScript.
+
+## Custom properties and methods
 
-## Custom properties amd methods
+Other custom properties can be defined the TypeScript way on the controller class:
 
-Other custom properties is possible to define the TypeScript way
-on the controller class:
+<meta data-controller="callout" data-callout-text-value="container: HTMLElement">
 
 ```ts
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from "@hotwired/stimulus"
 
 export default class MyController extends Controller {
-    container: HTMLElement;
+  container: HTMLElement
 }
 ```
 
-Read more about it in the [TypeScript Documentation](https://www.typescriptlang.org/docs/handbook/intro.html).
+Read more in the [TypeScript Documentation](https://www.typescriptlang.org/docs/handbook/intro.html).