From edf73f0806e70ff53469fc6b12b09b6ad7b5de69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Collonval?=
 <fcollonval@users.noreply.github.com>
Date: Sat, 30 Sep 2023 05:46:40 +0200
Subject: [PATCH] [archive] Fix usage with TypeScript 4.8+ (#6779)

* Fix template variable type

* Remove additional typescript errors

* Change files
---
 ...-673f775c-c439-46ef-93ae-7bd51076ce27.json |  7 ++
 .../src/design-token/design-token.ts          | 87 ++++++++++++++-----
 .../fast-foundation/src/di/di.ts              |  2 +-
 .../fast-foundation/src/tabs/tabs.spec.ts     |  2 +-
 4 files changed, 76 insertions(+), 22 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-673f775c-c439-46ef-93ae-7bd51076ce27.json

diff --git a/change/@microsoft-fast-foundation-673f775c-c439-46ef-93ae-7bd51076ce27.json b/change/@microsoft-fast-foundation-673f775c-c439-46ef-93ae-7bd51076ce27.json
new file mode 100644
index 00000000000..c7318137f3a
--- /dev/null
+++ b/change/@microsoft-fast-foundation-673f775c-c439-46ef-93ae-7bd51076ce27.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix typings for Typescript 4.8+",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "fcollonval@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/src/design-token/design-token.ts b/packages/web-components/fast-foundation/src/design-token/design-token.ts
index 0b60ff33655..00a03524c70 100644
--- a/packages/web-components/fast-foundation/src/design-token/design-token.ts
+++ b/packages/web-components/fast-foundation/src/design-token/design-token.ts
@@ -143,7 +143,7 @@ class DesignTokenImpl<T extends { createCSS?(): string }> extends CSSDirective
         return [...this._appliedTo];
     }
 
-    public static from<T>(
+    public static from<T extends { createCSS?(): string }>(
         nameOrConfig: string | DesignTokenConfiguration
     ): DesignTokenImpl<T> {
         return new DesignTokenImpl<T>({
@@ -157,9 +157,17 @@ class DesignTokenImpl<T extends { createCSS?(): string }> extends CSSDirective
         });
     }
 
-    public static isCSSDesignToken<T>(
-        token: DesignToken<T> | CSSDesignToken<T>
-    ): token is CSSDesignToken<T> {
+    public static isCSSDesignToken<
+        T extends
+            | string
+            | number
+            | boolean
+            | symbol
+            | any[]
+            | Uint8Array
+            | ({ createCSS?(): string } & Record<PropertyKey, any>)
+            | null
+    >(token: DesignToken<T> | CSSDesignToken<T>): token is CSSDesignToken<T> {
         return typeof (token as CSSDesignToken<T>).cssCustomProperty === "string";
     }
 
@@ -349,7 +357,7 @@ class CustomPropertyReflector {
  * A light wrapper around BindingObserver to handle value caching and
  * token notification
  */
-class DesignTokenBindingObserver<T> {
+class DesignTokenBindingObserver<T extends { createCSS?(): string }> {
     public readonly dependencies = new Set<DesignTokenImpl<any>>();
     private observer: BindingObserver<HTMLElement, DerivedDesignTokenValue<T>>;
     constructor(
@@ -394,19 +402,24 @@ class DesignTokenBindingObserver<T> {
  */
 class Store {
     private values = new Map<DesignTokenImpl<any>, any>();
-    set<T>(token: DesignTokenImpl<T>, value: StaticDesignTokenValue<T>) {
+    set<T extends { createCSS?(): string }>(
+        token: DesignTokenImpl<T>,
+        value: StaticDesignTokenValue<T>
+    ) {
         if (this.values.get(token) !== value) {
             this.values.set(token, value);
             Observable.getNotifier(this).notify(token.id);
         }
     }
 
-    get<T>(token: DesignTokenImpl<T>): StaticDesignTokenValue<T> | undefined {
+    get<T extends { createCSS?(): string }>(
+        token: DesignTokenImpl<T>
+    ): StaticDesignTokenValue<T> | undefined {
         Observable.track(this, token.id);
         return this.values.get(token);
     }
 
-    delete<T>(token: DesignTokenImpl<T>) {
+    delete<T extends { createCSS?(): string }>(token: DesignTokenImpl<T>) {
         this.values.delete(token);
     }
 
@@ -471,7 +484,7 @@ class DesignTokenNode implements Behavior, Subscriber {
      * @param start - The node to start looking for value assignment
      * @returns
      */
-    public static findClosestAssignedNode<T>(
+    public static findClosestAssignedNode<T extends { createCSS?(): string }>(
         token: DesignTokenImpl<T>,
         start: DesignTokenNode
     ): DesignTokenNode | null {
@@ -581,7 +594,7 @@ class DesignTokenNode implements Behavior, Subscriber {
      * Checks if a token has been assigned an explicit value the node.
      * @param token - the token to check.
      */
-    public has<T>(token: DesignTokenImpl<T>): boolean {
+    public has<T extends { createCSS?(): string }>(token: DesignTokenImpl<T>): boolean {
         return this.assignedValues.has(token);
     }
 
@@ -590,7 +603,9 @@ class DesignTokenNode implements Behavior, Subscriber {
      * @param token - The token to retrieve the value for
      * @returns
      */
-    public get<T>(token: DesignTokenImpl<T>): StaticDesignTokenValue<T> | undefined {
+    public get<T extends { createCSS?(): string }>(
+        token: DesignTokenImpl<T>
+    ): StaticDesignTokenValue<T> | undefined {
         const value = this.store.get(token);
 
         if (value !== undefined) {
@@ -610,7 +625,9 @@ class DesignTokenNode implements Behavior, Subscriber {
      * @param token - The token to retrieve a raw value for
      * @returns
      */
-    public getRaw<T>(token: DesignTokenImpl<T>): DesignTokenValue<T> | undefined {
+    public getRaw<T extends { createCSS?(): string }>(
+        token: DesignTokenImpl<T>
+    ): DesignTokenValue<T> | undefined {
         if (this.assignedValues.has(token)) {
             return this.assignedValues.get(token);
         }
@@ -623,7 +640,10 @@ class DesignTokenNode implements Behavior, Subscriber {
      * @param token - The token to set
      * @param value - The value to set the token to
      */
-    public set<T>(token: DesignTokenImpl<T>, value: DesignTokenValue<T>): void {
+    public set<T extends { createCSS?(): string }>(
+        token: DesignTokenImpl<T>,
+        value: DesignTokenValue<T>
+    ): void {
         if (DesignTokenImpl.isDerivedDesignTokenValue(this.assignedValues.get(token))) {
             this.tearDownBindingObserver(token);
         }
@@ -641,7 +661,7 @@ class DesignTokenNode implements Behavior, Subscriber {
      * Deletes a token value for the node.
      * @param token - The token to delete the value for
      */
-    public delete<T>(token: DesignTokenImpl<T>): void {
+    public delete<T extends { createCSS?(): string }>(token: DesignTokenImpl<T>): void {
         this.assignedValues.delete(token);
         this.tearDownBindingObserver(token);
         const upstream = this.getRaw(token);
@@ -783,7 +803,10 @@ class DesignTokenNode implements Behavior, Subscriber {
      * @param token - The token to hydrate
      * @param value - The value to hydrate
      */
-    public hydrate<T>(token: DesignTokenImpl<T>, value: DesignTokenValue<T>) {
+    public hydrate<T extends { createCSS?(): string }>(
+        token: DesignTokenImpl<T>,
+        value: DesignTokenValue<T>
+    ) {
         if (!this.has(token)) {
             const observer = this.bindingObservers.get(token);
 
@@ -815,7 +838,7 @@ class DesignTokenNode implements Behavior, Subscriber {
      * @param token - The token to notify when the binding updates
      * @param source - The binding source
      */
-    private setupBindingObserver<T>(
+    private setupBindingObserver<T extends { createCSS?(): string }>(
         token: DesignTokenImpl<T>,
         source: DerivedDesignTokenValue<T>
     ): DesignTokenBindingObserver<T> {
@@ -828,7 +851,9 @@ class DesignTokenNode implements Behavior, Subscriber {
     /**
      * Tear down a binding observer for a token.
      */
-    private tearDownBindingObserver<T>(token: DesignTokenImpl<T>): boolean {
+    private tearDownBindingObserver<T extends { createCSS?(): string }>(
+        token: DesignTokenImpl<T>
+    ): boolean {
         if (this.bindingObservers.has(token)) {
             this.bindingObservers.get(token)!.disconnect();
             this.bindingObservers.delete(token);
@@ -845,13 +870,35 @@ function create<T extends Function>(
 function create<T extends undefined | void>(
     nameOrConfig: string | DesignTokenConfiguration
 ): never;
-function create<T>(nameOrConfig: string): CSSDesignToken<T>;
-function create<T>(
+function create<
+    T extends
+        | string
+        | number
+        | boolean
+        | symbol
+        | any[]
+        | Uint8Array
+        | ({ createCSS?(): string } & Record<PropertyKey, any>)
+        | null
+>(nameOrConfig: string): CSSDesignToken<T>;
+function create<
+    T extends
+        | string
+        | number
+        | boolean
+        | symbol
+        | any[]
+        | Uint8Array
+        | ({ createCSS?(): string } & Record<PropertyKey, any>)
+        | null
+>(
     nameOrConfig:
         | Omit<DesignTokenConfiguration, "cssCustomPropertyName">
         | (DesignTokenConfiguration & Record<"cssCustomPropertyName", string>)
 ): CSSDesignToken<T>;
-function create<T>(
+function create<
+    T extends string | number | boolean | symbol | {} | any[] | Uint8Array | null
+>(
     nameOrConfig: DesignTokenConfiguration & Record<"cssCustomPropertyName", null>
 ): DesignToken<T>;
 function create<T>(nameOrConfig: string | DesignTokenConfiguration): any {
diff --git a/packages/web-components/fast-foundation/src/di/di.ts b/packages/web-components/fast-foundation/src/di/di.ts
index 5281f4b590a..19c2302f55e 100644
--- a/packages/web-components/fast-foundation/src/di/di.ts
+++ b/packages/web-components/fast-foundation/src/di/di.ts
@@ -1721,7 +1721,7 @@ export class ContainerImpl implements Container {
             }
         }
 
-        throw new Error(`Unable to resolve key: ${key}`);
+        throw new Error(`Unable to resolve key: ${String(key)}`);
     }
 
     public getAll<K extends Key>(
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts b/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
index dcd903f75f5..33bd182c58a 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
@@ -42,7 +42,7 @@ async function setup() {
     const [tabPanel1, tabPanel2, tabPanel3] = Array.from(
         element.querySelectorAll("fast-tab-panel")
     );
-    const [tab1, tab2, tab3] = Array.from(element.querySelectorAll("fast-tab"));
+    const [tab1, tab2, tab3] = Array.from<HTMLElement>(element.querySelectorAll("fast-tab"));
 
     return {
         element,