如何将 Semantic-UI 导入 Angular 项目

我正在开发一个基于 Semantic-UI 框架（这是 Semantic-UI 的一个分支）的 Angular 项目。

我已经安装了：

npm install --save fomantic-ui

然后我在中添加了以下几行angular.json file:

"styles": [
    "node_modules/fomantic-ui/dist/semantic.min.css",
    "src/styles.scss"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/fomantic-ui/dist/semantic.min.js"
]

我还为它安装了类型npm install --save @types/semantic-ui并且，根据this https://github.com/fomantic/Fomantic-UI/issues/1205，它们应该可以与 Semantic-UI 配合良好。

无论如何，这似乎不足以使用诸如modal(), dropdown(), calendar()，事实上，我在 IDE (Webstorm) 和编译过程中都遇到错误：

TS2339: Property 'modal' does not exist on type 'JQuery<HTMLElement>'.

TS2339: Property 'calendar' does not exist on type 'JQuery<any>'.

TS2339: Property 'dropdown' does not exist on type 'JQuery<HTMLElement>'.

等等...

您知道在我的项目中导入 Semantic-UI 的正确方法是什么吗？

对于 Typescript 类型，您需要添加一些行到您的tsconfig.json文件以向您的 Angular 应用程序声明这些类型。

{
  "compilerOptions": {
    ...
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "hammerjs",
      "jasmine",
      "semantic-ui"
    ],
    ...
}

并且还在tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "semantic-ui"
    ]
  },
  ...
}

测试文件中相同tsconfig.spec.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "types": [
      "jasmine",
      "node",
      "semantic-ui"
    ]
  },
  ...
}