导入@microsoft/fast-foundation的DesignToken时遇TS类型错误求助

问题描述 #

我正在实现Web组件功能：通过designToken属性传入JSON格式的样式字符串（如<comp designToken='{"key":"value"}'></comp>），组件内部以var(--key)方式使用这些样式。但导入import { DesignToken } from '@microsoft/fast-foundation'时，出现TS2344类型错误，错误信息如下：

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-foundation/dist/fast-foundation.d.ts:2252:25
2252 declare function create(nameOrConfig: string): CSSDesignToken;
~
This type parameter might need an extends { createCSS?(): string; } constraint.
node_modules/@microsoft/fast-foundation/dist/fast-foundation.d.ts:2252:25
2252 declare function create(nameOrConfig: string): CSSDesignToken;
~
This type parameter might need an extends { createCSS?(): string; } & Record<PropertyKey, any> constraint.
node_modules/@microsoft/fast-foundation/dist/fast-foundation.d.ts:2252:25
2252 declare function create(nameOrConfig: string): CSSDesignToken;
~
This type parameter might need an extends string | number | boolean | symbol | any[] | Uint8Array | ({ createCSS?(): string; } & Record<PropertyKey, any>) | null constraint.

已尝试更换导入方式、重新安装库，但问题未解决。

解决方案 #

1. 显式指定泛型类型约束 #

错误核心是DesignToken.create方法的泛型T未满足库定义的约束，调用时显式声明符合要求的类型：

// 基础值类型（如字符串、数字）
const textColorToken = DesignToken.create<string>('text-color');

// 带自定义createCSS逻辑的对象类型
interface CustomToken {
  value: string;
  createCSS?(): string;
}
const customBgToken = DesignToken.create<CustomToken>({
  name: 'custom-bg',
  value: '#ffffff',
  createCSS() {
    return `--custom-bg: ${this.value};`;
  }
});

2. 匹配TypeScript版本 #

@microsoft/fast-foundation对TS版本有要求，确保项目TS版本符合库的依赖（通常需TS 4.7+）。可查看库的package.json确认，升级命令：

npm install typescript@latest --save-dev

3. 规范组件designToken属性类型 #

在Web组件的属性定义中，正确约束designToken的类型，确保传入的JSON格式合法：

import { FASTElement, attr } from '@microsoft/fast-element';

class MyComp extends FASTElement {
  @attr({
    converter: {
      fromView: (value) => JSON.parse(value),
      toView: (value) => JSON.stringify(value)
    }
  })
  designToken: Record<string, string | number | boolean> | null = null;

  connectedCallback() {
    super.connectedCallback();
    if (this.designToken) {
      Object.entries(this.designToken).forEach(([key, value]) => {
        this.style.setProperty(`--${key}`, String(value));
      });
    }
  }
}

4. 锁定稳定版本的库 #

若为版本不匹配导致的类型定义问题，尝试安装最新稳定版：

npm install @microsoft/fast-foundation@latest --save

内容的提问来源于stack exchange，提问作者Jae Aeich