网站搜索

Typescript, Angular CLI, NPM, VS Code：属性 在类型 'jQueryStatic' 上不存在

情景

我在我的单页应用中使用 Angular、Angular CLI、NPM 和 Typescript。

在我的一个组件中，我需要使用 jQuery 来初始化一个 jQuery 插件。在我的情况下，该插件是 backstretch，但这并不那么重要，因为下面描述的问题对于任何 jQuery 插件都是相同的。

是的，我知道你们中的一些人会说，Angular 和 jQuery 一起使用——不是最好的主意。但事实是，可重用的 jQuery 插件在 Angular 应用中仍然非常有用。

问题

尽管在 VS Code IDE 中编写代码时，IntelliSense 下拉菜单可以正确显示 jQuery 和 backstretch 的属性，并且似乎没有任何错误，但在运行“ng serve”时问题仍然出现，也就是当 TypeScript 编译成 JavaScript 时。

我在控制台收到的错误是：

错误在 C:/wamp/www/PaperbackComingSoon/Angular/my-app/src/app/app.component.ts (20,7)：类型 'JQueryStatic' 上不存在属性 'backstretch'。

在下面的截图中，你可以看到这个错误，以及 jsconfig.json 文件和已安装的 jQuery 与 Backstretch 的类型定义。

虽然编译器似乎找到了 jQuery，但出于某种奇怪的原因，它在查找 backstretch 时遇到了问题。下面你可以看到 backstretch 的实际类型定义。

问题

我错过了什么吗？有人知道这里可能出了什么问题吗？我的 Backstretch 插件的类型定义文件有可能不是与实际的 jQuery Backstretch 插件相对应的版本吗？

既然我当然在使用 TypeScript，我希望所有拥有类型文件的 jQuery 插件对我的类型都是强类型的。我认为如果某个 jQuery 插件的类型定义确实可用，那么没有理由不使用这个功能。我知道我可以通过自己定义类型并将所有 jQuery 插件设置为“any”类型来轻松解决编译问题，但这不是我想要的，也不太正确。我希望利用我能使用的任何类型文件。我不认为仅仅因为编译器似乎找不到定义的属性就有什么理由不这样做。

可能的原因

我最有可能的猜测是，这与我系统上全局安装的 TS 版本与 VS Code IDE 中的 TypeScript 版本之间的差异有关，因为当在 VSCode 中查看状态栏右下角的 TS 版本时，它显示为 2.4.2。

但是如果我在控制台运行 "tsc -v"，它显示的是 1.0.3.0（注意我之前已经在使用 Visual Studio 时使用过 TS）。但是即使我运行 "npm install -g [email "，这也不会改变任何东西。

有人有什么想法吗？

答案＃1

更新 NPM

npm install npm@latest -g

更新 TypeScript

npm -g upgrade typescript

或

npm install typescript@latest -g

答案＃2

我终于找到了这个解决方案。请按照以下步骤操作。

1. 确保你已在系统上安装了最新版本的 Node JS

  • 下载最新版本的 Node JS 并运行安装程序。
  • 如果需要，在安装程序中选择“修复”

2. 在控制台运行 "npm install typescript@latest -g"

3. 在控制台运行 "tsc -v" 来显示 TypeScript 版本

  • 检查这个版本是否确实是最新的，并且是否与 VSCode 状态栏中的版本匹配：

4. 在你的 Angular 应用中创建一个名为“typings”的文件夹，并在该文件夹中创建一个名为“<插件名称>.d.ts”（在我们的例子中为“backstretch.d.ts”）的文件。

5. 访问 typings 网站（在此例中为 "Backstretch"），复制 .d.ts 文件的内容并粘贴到上述步骤中创建的文件中，然后保存文件。

6. 在控制台运行 "ng serve"，它应该可以正常构建

完成！

关于上述解决方案的附加说明

  • 我仍然不确定为什么安装在 node_modules/@types/jquery-backstretch 下的类型定义无法识别，并且在运行 ng serve 时它无法编译
  • 然而，如果打字文件按照上面第5点所述放置在应用程序下，打字会被识别，并且一切按预期工作
  • npm 应该安装在 "C:\Users\<用户名>\AppData\Roaming\npm" 下，其中 "AppData" 可能是一个隐藏文件夹（参见此处了解如何显示隐藏文件夹）
  • TypeScript 应该安装在 "C:\Users\<用户名>\AppData\Roaming\npm\node_modules\typescript" 下