jquery之如何将 Semantic-UI 导入 Angular 项目

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

我已经安装了:

npm install --save fomantic-ui

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

"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 ，它们应该可以与 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" 
    ] 
  }, 
  ... 
}