新手求助：如何让FAST UI的FoundationElement正常工作？

问题分析 #

你的代码存在几个关键问题，导致无法正常运行：

• 缺失provideFASTDesignSystem导入：代码中调用了该函数但未从@microsoft/fast-foundation导入，会引发运行时错误。
• 类型引用顺序错误：模板定义时Parent类尚未声明，TypeScript会抛出类型未定义的错误，需调整类与模板的定义顺序。
• 组件注册方式错误：compose返回的是组件定义对象，注册时直接传入该对象即可，无需调用parent()。

修正后的代码 #

import { html } from '@microsoft/fast-element';
import { FoundationElement, provideFASTDesignSystem } from '@microsoft/fast-foundation';

// 先定义组件类，确保类型可被模板引用
class Parent extends FoundationElement {
  connectedCallback() {
    super.connectedCallback();
    console.log('connection');

    this.addEventListener('change', (e) => {
      console.log('handle change event');
    });
  }
}

// 基于已声明的Parent类创建模板
const template = html<Parent>`<p>I'm a parent</p>
  <slot></slot>`;

// 通过compose生成组件定义
const parentDefinition = Parent.compose({ baseName: 'my-element', template });

// 注册组件，直接传入定义对象
provideFASTDesignSystem().register(parentDefinition);

Snowpack与TypeScript配置注意事项 #

• 调整tsconfig.json配置，避免类型检查错误：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "strict": true
  }
}

• 确保Snowpack配置中包含TypeScript插件，正确处理TS文件：

// snowpack.config.js
export default {
  mount: {
    src: '/'
  },
  plugins: [
    '@snowpack/plugin-typescript'
  ]
};

内容的提问来源于stack exchange，提问作者Salihu Dickson