docs: add typescript conventions and guidelines section

docs/5-development/07-ts.md

@@ -376,7 +376,7 @@ Example:
 ```ts
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 ```
-Using the keyword `"event"` as paramater for our handlers leads to a collision between the parameter and the `@event` decorator. <br>
+Using the keyword `"event"` as a paramater for our handlers leads to a collision between the parameter and the `@event` decorator. <br>
 ```ts
 // Before ( which would lead to a name collision now )
 
@@ -386,7 +386,7 @@ _onfocusin(event: FocusEvent) {
 	this._currentIndex = this.items.indexOf(target);
 }
 ```
-In order to avoid this and keep consistency, we made a decision to name the parameters in our handlers with `"e"` instead.
+In order to avoid this and keep consistency, we made a decision to name the parameters in our handlers `"e"` instead.
 
 ```ts
 // After
@@ -486,7 +486,7 @@ let openedRegistry: Array<RegisteredPopupT> = [];
 ```
 <br>
 
-**5. Use enums, over object literals.**
+**5. Use enums over object literals.**
 
 Instead of using object literals, we have opted for `enums` to enhance **type safety and maintainability**. The use of enums provides compile-time type safety, reducing the potential for errors and making the code easier to manage. It is also important to note that all types in our "types" folder are already represented as `enums`.
 
@@ -516,7 +516,7 @@ enum CSSColors {
 ```
 <br>
 
-**6. Use `"keyof typeof"` syntax when accessing dynamically objects with known keys.**
+**6. Use the `"keyof typeof"` syntax when accessing dynamically objects with known keys.**
 
 When accessing dynamically objects with **known** keys, always use the `"keyof typeof"` syntax for improved accuracy.
 
@@ -544,8 +544,8 @@ const getRGBColor = (color: string): ColorRGB => {
 
 ```
 #
-In the cases where the keys are unknown or uncertain we use the `Record<K, T>` notation instead of `{[key]}` notation.<br>
-In short `Record<K, T>` is a TypeScript notation for describing an object with keys of `type K` and values of `type T`.
+In the cases where the keys are unknown or uncertain we use the `Record<K, T>` notation instead of the `{[key]}` notation.<br>
+In short, `Record<K, T>` is a TypeScript notation for describing an object with keys of `type K` and values of `type T`.
 
 Example:
 
@@ -567,7 +567,7 @@ type Metadata = {
 
 **7. Do not use "any", unless absolutely necessary.**
 
-The `"any"` type, while powerful, can be **dangerous** feature as it instructs the TypeScript compiler to ignore type checking for a specific variable or expression. This can result in errors and make the code more complex to understand and maintain. Our `ESLint` usually takes care of this by enforcing best practices and avoiding its usage.
+The `"any"` type, while powerful, can be a **dangerous** feature as it instructs the TypeScript compiler to ignore type checking for a specific variable or expression. This can result in errors and make the code more complex to understand and maintain. Our `ESLint` usually takes care of this by enforcing best practices and avoiding its usage.
 
 <br>
 
@@ -579,7 +579,7 @@ The `"any"` type, while powerful, can be **dangerous** feature as it instructs t
 The `import` keyword is used to import values from a module, while `import type` is used to import only the type information of a module without its values. This type information can be used in type annotations and declarations.
 <br>
 
-For clarity, it is recommended to keep ***type*** and ***non-type*** imports on separate lines and explicitly mark types with the `type` keyword, like in the following example:
+For clarity, it is recommended to keep ***type*** and ***non-type*** imports on separate lines and explicitly mark types with the `type` keyword, as in the following example:
 
 ```ts
 // This line
@@ -604,9 +604,9 @@ import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 
 <br>
 
-**2. When should we use `"!"` operator in component's file ?**
+**2. When should we use the `"!"` operator in component's file ?**
 
-The `!` operator in TypeScript is used to indicate that a value is not `null` or `undefined` in situations where the type checker cannot conclude it.
+The `!` operator in TypeScript is used to indicate that a value is not `null` or `undefined` in situations where the type checker cannot determine it.
 
 It is commonly used when working with the `this.getDomRef()` and `this.shadowRoot` properties in our web components. The return types of these properties, `HTMLElement | null` and `ShadowRoot | null`, respectively, are marked with `null` because there may be instances when these values are not yet available.
 
@@ -635,13 +635,13 @@ class Example extends UI5Element {
 ```
 <br>
 
-**3. Generics in TypeScript.**
+**3. Usage of Generics.**
 
-Generics in TypeScript helps us with the creation of classes, functions, and other entities that can work with multiple types, instead of just a single one. This allows users to use their own types when consuming these entities.
+Generics in TypeScript help us with the creation of classes, functions, and other entities that can work with multiple types, instead of just a single one. This allows users to use their own types when consuming these entities.
 
-In the migration to TypeScript, generic functions have been added to the UI5Element, and a common approach for using built-in generics has been established.
+In the migration to TypeScript, generic functions have been added to the `UI5Element`, and a common approach for using built-in generics has been established.
 
-Our first generic function is the `fireEvent` function, which uses generics to describe the event details and to check that all necessary details have been provided. The types used to describe the details provide helpful information to consumers of the event as we know from the previous content.
+Our first generic function is the `fireEvent` function, which uses generics to describe the event details and to check that all necessary details have been provided. The types used to describe the details provide helpful information to consumers of the event as explained above.
 
 For example: 
 
@@ -650,7 +650,7 @@ fireEvent<EventDetail>("click")
 ```
 <br>
 
-The use of custom events as the type for the first argument of an event handler can result in TypeScript complaining about unknown properties in the details. By using generics and introducing a type for event details, we can help TypeScript in knowing which parameters are included in the details, and thus avoid these complaints.
+The use of custom events as the type for the first argument of an event handler can result in TypeScript complaining about unknown properties in the details. By using generics and introducing a type for event details, we can tell Typescript in knowing which parameters are included in the details, and thus avoid these complaints.
 
 ```ts
 handleClick(e: CustomEvent<EventDetail>)
@@ -676,7 +676,7 @@ The third use case for generics is with the `getFeature` function. This function
 ```
 <br>
 
-**4. Managing Component Styles with `CSSMap` and `ComponentStylesData` in Inheritance Chain**
+**4. Managing Component Styles with `CSSMap` and `ComponentStylesData` in the Inheritance Chain**
 
 To resolve inheritance chain issues, we introduced two types that can be used in the components. All components have implemented a static `get styles` function that returns either an array with required styles or just the component styles without an array. However, depending on the inheritance chain, TypeScript may complain about wrong return types, without considering that they will be merged into a flat array in the end.
 
@@ -689,9 +689,9 @@ static get styles(): ComponentStylesData {
 ```
 <br>
 
-**5. Resolving `this` type error with TypeScript.**
+**5. Resolving the `this` type error with TypeScript.**
 
-By default in Strict Mode, the type of `this` is explicitly `any`. When used in a global context function, as in the example, TypeScript will start to raise an error that `this` has an explicit type of `any`. To resolve this, you can add `this` as the first argument to the function and provide its type, usually the context in which the function will be used.
+By default in Strict Mode, the type of `this` is explicitly `any`. When used in a global context function, as in the example, TypeScript will raise an error that `this` has an explicit type of `any`. To resolve this, you can add `this` as the first argument to the function and provide its type, usually the context in which the function will be used.
 
 ```ts
 type MyType = {