Typescript, Angular CLI, NPM, VS Code: Property 2019-07-26 05:54发布 站内文章 / Angular 46 0 0

问题:

Scenario

I am using Angular, Angular CLI, NPM and Typescript in my single page app.

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.

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.

Problem

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:

ERROR in C:/wamp/www/PaperbackComingSoon/Angular/my-app/src/app/app.component.ts (20,7): Property 'backstretch' does not exist on type 'JQueryStatic'.

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.

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.

Questions

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?

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.

---

Possible reason

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.

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.

Any idea, anyone?

回答1:

Update NPM

npm install npm@latest -g

Update typescript

npm -g upgrade typescript

or

npm install typescript@latest -g

回答2:

I finally found the solution. Follow the steps below.

1. Make sure you have the last version of Node JS installed on the system

• Download the last version of Node JS and run the installer.
• Choose "Repair" in the installer if needed

2. In the console run "npm install typescript@latest -g"

3. In the console run "tsc -v" to display the TypeScript version

• check that this version is indeed the latest and that it matches the one in the VSCode status bar:

4. Create a folder in your angular app called "typings" and in that folder create a file called "< plugin name >.d.ts" ("backstretch.d.ts" in our case).

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. Run "ng serve" in the console and it should build properly

DONE!

---

Additional notes about the solution above

• 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""