打字稿，Angular CLI，NPM，VS代码:属性< property>类型"jQueryStatic< HTMLElement>"上不存在 [英] Typescript, Angular CLI, NPM, VS Code: Property <property> does not exist on type 'jQueryStatic<HTMLElement>'
问题描述
我在单页应用程序中使用了 Angular ， Angular CLI ， NPM 和 Typescript .
I am using Angular, Angular CLI, NPM and Typescript in my single page app.
在我的组件之一中，我需要使用 jQuery 来初始化 jQuery 插件.以我为例，该插件为 backstretch ，但这与下面描述的问题无关.对于任何jQuery插件都是相同的.
In one of my components, I have the need to use jQuery to initialize a jQuery plugin. In my case, the plugin is backstretch, but this is not so relevant as the problem described below will be the same for any jQuery plugin.
是的，我知道你们中的一些人将Angular和jQuery一起说-不是最好的主意.但是事实是，可重用的jQuery插件在Angular应用中仍然非常有用.
And yes, I know what some of you will say, Angular and jQuery together - not the best idea. But the fact is reusable jQuery plugins are still very useful in an Angular app.
尽管在VS Code IDE中编写代码时，IntelliSense下拉列表可以正确显示jQuery和反向拉伸的属性，并且似乎没有任何错误，但是在运行"ng serve"时确实出现了问题，因此，当TypeScript编译为JavaScript时.
Despite the fact that when writing code in the VS Code IDE, the IntelliSense drop-down shows the properties of both jQuery and backstretch properly and there seems to be no error whatsoever, the problem does appear when running "ng serve", thus when TypeScript compiles into JavaScript.
我在控制台中收到的错误是:
The error I get in the console is:
错误 C:/wamp/www/PaperbackComingSoon/Angular/my-app/src/app/app.component.ts (20,7):类型上不存在属性"backstretch" "JQueryStatic".
ERROR in C:/wamp/www/PaperbackComingSoon/Angular/my-app/src/app/app.component.ts (20,7): Property 'backstretch' does not exist on type 'JQueryStatic'.
在下面的屏幕截图中，您可以看到此错误，还可以看到jsconfig.json文件以及jQuery和Backstretch的已安装类型定义.
In the screenshot below you can see this error, but also the jsconfig.json file and the installed type definitions for both jQuery and Backstretch.
尽管编译器似乎可以找到jQuery，但由于某种奇怪的原因，它在寻找反向扩展方面存在问题.在下面，您可以看到反向拉伸的实际类型定义.
While the compiler seems to find jQuery, it has issues with finding backstretch for some strange reason. Below you can see the actual type definition for backstretch.
我想念什么?有谁知道这里可能有什么问题吗?我的Backstretch插件的类型定义文件是否可能不是实际jQuery Backstretch插件的正确版本?
What am I missing? Does anyone have any idea what could be wrong here? Is it possible that my type definition file for the Backstretch plugin is not the right version for the actual jQuery Backstretch plugin?
因为我当然使用TypeScript，所以我希望所有具有可用于我的类型的键入文件的jQuery插件都进行强类型化.如果确实可以使用某个jQuery插件的类型，我认为没有理由不使用此功能.我知道我可以通过自己定义类型并制作所有类型为"any"的jQuery插件来轻松解决编译问题，但这不是我想要的，而且看起来也不正确.我想利用任何输入文件.我看不出为什么不这样做，仅仅是因为编译器似乎找不到所定义的属性.
Since I am of course using TypeScript, I want all the jQuery plugins that have typing files available for my types to be strongly typed. I see no reason why not to use this feature if the typings for a certain jQuery plugin are indeed available to me. I know I could easily fix my compiling problem by defining the typing on my own and making all the jQuery plugins of type "any", but this is not what I want and it does not seem right. I want to leverage any typing files at my disposal. I don't see any reason why not, just because the compiler does not seem to find the defined property.
可能的原因
我最好的选择是，这与系统上全局安装的TS版本与VS Code IDE中的打字稿的差异有关，因为在检查状态栏右下角状态栏中的VSCode中的TS版本时， IDE会显示 2.4.2.
My best bet is that this has something to do with the difference in TS versions installed globally on my system versus the typescript in VS Code IDE, because when checking the TS version in VSCode in the status bar at the right bottom of the IDE says 2.4.2.
但是，如果我在控制台中运行"tsc -v"，它会给我 1.0.3.0 (请注意，我以前在Visual Studio中一直使用TS).但是，即使在我运行"npm install -g typescript@2.4.2之后，它也不会更改任何内容.
But if I run "tsc -v" in the console, it gives me 1.0.3.0 (mind that I've been using TS before, with Visual Studio). But even after I run "npm install -g typescript@2.4.2, this does not change anything.
有什么主意吗?
推荐答案
我终于找到了解决方案.请按照以下步骤操作.
I finally found the solution. Follow the steps below.
1.确保您已在系统上安装最新版本的Node JS
- 下载最新版本的Node JS 并运行安装程序.
- 如果需要，请在安装程序中选择修复"
- Download the last version of Node JS and run the installer.
- Choose "Repair" in the installer if needed
2.在控制台中，运行"npm install typescript @ latest -g"
3.在控制台中，运行"tsc -v"以显示TypeScript版本
- 检查该版本确实是最新版本，并且与VSCode状态栏中的版本匹配:
4.在您的角度应用程序中创建一个名为"typings"的文件夹，并在该文件夹中创建一个名为<插件名称> .d.ts"(在我们的示例中为"backstretch.d.ts").
5.转到打字网站(在这种情况下，反向拉伸")，复制.d.ts文件的内容，并将其粘贴到上面创建的文件中，然后保存文件.
5. Go to the typings site (in this case "Backstretch"), copy the content of the .d.ts file and paste it into the file created in above point and save the file.
6.在控制台中运行"ng serve"，它应该可以正确构建
完成！
- 我仍然不确定为什么无法识别在node_modules/@ types/jquery-backstretch下安装的类型，为什么在运行ng serve时无法编译
- 但是，如果将键入文件放置在应用程序下(如上述第5点所述)，则可以识别键入内容，并且一切都会按预期进行
- npm应该安装在"C:\ Users \<用户名> \ AppData \ Roaming \ npm"下，其中"AppData"可能是隐藏文件夹(请参阅 \ AppData \ Roaming \ npm \ node_modules \ typescript"
- I am still not sure why the installed typing under node_modules/@types/jquery-backstretch is not recognized and when running ng serve it does not compile
- if the typing file is placed under the app however, as described in above point #5, the typing is recognized and everything works as expected
- npm should be installed under "C:\Users\ < username > \AppData\Roaming\npm" where "AppData" might be a hidden folder (see here how to show hidden folders)
- typescript should be installed under ""C:\Users\ < username > \AppData\Roaming\npm\node_modules\typescript""
这篇关于打字稿，Angular CLI，NPM，VS代码:属性< property>类型"jQueryStatic< HTMLElement>"上不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
