如何在 Angular 2 项目中使用 types/select2？

Posted 2023-05-07

【中文标题】如何在 Angular 2 项目中使用 types/select2？

【英文标题】：How to use types/select2 in a Angular 2 project?

【发布时间】：2017-08-27 01:01:02

【问题描述】：

我正在使用 Typescript 开发 Angular 2 项目。我希望能够使用 select2，但我没有看到任何与 select2 等效的稳定功能丰富的插件。但是我在DefinitelyTyped 项目中遇到了types/select2。我不确定如何在我的项目中使用它们。我也找不到其他DefinitelyTyped 库的示例。我是 TS 和 Angular 2 的新手。有人可以提供有关我应该如何使用它的指针吗？

我知道我可以使用我的 package.json 包含该库，但不知道如何在组件中使用。

【问题讨论】：

看看这个链接能不能帮到你embed.plnkr.co/gHZKfFbTuTJY8lX5BG7o

您的示例似乎直接使用了 jQuery 库。感谢您设置 Plunkr。我正在寻找如何使用来自DefiniteTyped 的types/select2。那里还有很多其他的库，我以后可能会用到。所以寻找正确的方法......

【参考方案1】：

安装 @types/select2 后，它允许 typescript 编译器进行静态类型检查，以确保正确调用 Select2 库。它不会改变您使用 select2 的方式 - 您仍然需要安装 Select2 库并像在没有类型检查的情况下一样使用它。

对于外部依赖项（如 jQuery 或 Select2），您应该安装它们对应的类型定义文件，以便 typescript 编译器可以在编译时解析外部类型。这比声明any 类型（即declare var $: any）更可取

确保你也安装了 jQuery 类型：

npm install @types/jquery

这将安装node_modules/@types/jQuery 下的类型定义。默认情况下，typescript 编译器会解析 node_modules/@types 文件夹中的类型。

对于 TypeScript NodeJS 包，您可以在编译步骤中生成类型定义文件，并在 package.json 文件的 typings 属性中指定 index.d.ts。在这种情况下，您不一定需要将类型定义导出到node_modules/@types。

【讨论】：

所以 types/ 仅用于类型检查，它们不提供任何 jquery 插件集成以轻松与 Angular 2 一起使用？

是的，它只用于类型检查。

Angular2 使用模块加载器。任何使用模块加载器的库都可以使用package 指定类型定义文件的方式。像 jQuery 和 Select2 这样的库使用传统的文件加载方式——通过来自index.html 的script 标签。这就是引用类型定义文件有点不同的原因。

总的来说，这是一个很好的答案，但您应该提供一个如何将 jQuery 和 select2 作为模块加载的示例。

【参考方案2】：

我遇到了类似的问题并通过导入解决了它：

import 'select2';

我之前安装的：

npm install select2 --save

完成此操作后，您可以像往常一样通过 jquery 使用该库。

【参考方案3】：

我解决了这个问题

import  Select2 from 'select2'

并安装：

npm install @types/select2@4.0.48

现在我必须运行测试，但 Typescript slint 上没有更多错误