hawkticehurst
commented
1 year ago I also just ran into this issue while trying to update our Angular sample extension for the Webview UI Toolkit for VS Code.
I'm still unsure what the cause of this problem is (i.e. what changed in Angular v15 to cause this bug) but was able to find a solution for the problem by manually updating the fast-foundation.d.ts file inside node_modules.
I've made a small reproduction of the issue for validation/convenience.
To summarize, however:
Inside node_modules/@microsoft/fast-foundation/dist/fast-foundation.d.tson lines 2252, 2254, and 2256 are a handful of type declarations for the create function.
I got the same error messages as the screenshot above talking about how type 'T' is not assignable to the various types. At the bottom of the screenshot (and partially cut off) the TS compiler actually suggests the correct solution which is to extend type 'T' of the create function with the same set of types that the CSSDesignToken generic type extends.
The working solution I came up with is to replace lines 2252, 2254, and 2256 with the following:
declare function create<T extends string | number | boolean | symbol | any[] | Uint8Array | ({ createCSS?(): string; } & Record<PropertyKey, any>) | null>(nameOrConfig: string): CSSDesignToken<T>;
declare 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>;
declare function create<T extends string | number | boolean | symbol | any[] | Uint8Array | ({ createCSS?(): string; } & Record<PropertyKey, any>) | null>(nameOrConfig: DesignTokenConfiguration & Record<"cssCustomPropertyName", null>): DesignToken<T>;Obviously, manually updating the fast-foundation type declaration file inside node_modules is an unsustainable solution, so any work that can be done to update the generated type declarations within FAST would be greatly appreciated!
(Or for anyone who might have more insight into what changed about Angular v15 than I, maybe there is a way to change the configurations on the Angular side to make the current fast foundation type declaration file work???).
chrisdholt
rishitdshah
pavangayakwad
f1am3d
usrrname
anna-rak
tagazok
vnau
janechu
I'm following the steps mentioned in the docs - https://www.fast.design/docs/integrations/angular/ I encounter errors like -
Error: node_modules/@microsoft/fast-components/node_modules/@microsoft/fast-foundation/dist/fast-foundation.d.ts:2252:66 - error TS2344: Type 'T' does not satisfy the constraint 'string | number | boolean | symbol | any[] | Uint8Array | ({ createCSS?(): string; } & Record<PropertyKey, any>) | null'. Type 'T' is not assignable to type '{ createCSS?(): string; } & Record<PropertyKey, any>'. Type 'T' is not assignable to type '{ createCSS?(): string; }'. 2252 declare function create(nameOrConfig: string): CSSDesignToken;
~ node_modules/@microsoft/fast-components/node_modules/@microsoft/fast-foundation/dist/fast-foundation.d.ts:2252:25
Refer to the image below
Am I missing something?