Question

注意：这是关于Visual Studio 2017 的问题。与早期版本相关的答案或建议很可能 un 有用。感谢。

我完全在我的智慧结束。我一直试图让一个简单的Visual Studio 2017 Web项目使用TypeScript（v2.3）工作，它让我感到非常沮丧，让我筋疲力尽，愤怒。我真的怀疑任何人都没有完成这项壮举而不放弃Visual Studio工具并在VS外面/旁边设置所有内容。

我的第一个问题是，网上有各种各样的资源，提出了不同的方法，并且它们都发生冲突：＆＃34;使用Gulp＆＃34;，＆＃34;不，使用Bower＆＃34;，＆＃34;使用NPM＆＃34;，＆＃34;不，使用WebPack＆＃34;。当然，很多建议都与早期版本的Visual Studio有关。

同样，用于导入模块的TypeScript语法似乎随每个版本而变化，因此建议的大部分也是过时的，并且还取决于您和＃的模块加载器等。 39;重新使用。

很多选项都是＆＃34;伟大的＆＃34;，但工具必须至少略微自以为是，我无法弄清楚阻力最小的路径是什么。我想坚持MS实际上与VS集成的东西，因为当命令和配置格式每周更改时，我真的不喜欢命令行和配置文件。

我跟着the steps in the TypeScript handbook创建了一个Web项目，它只是说＆＃34; hello world＆＃34;，但是在＃34;添加Angular 2＆＃34;之前停止了。（我不想使用Angular，或者至少还没有。）

所以，到目前为止，我已经有了一些 NuGet 依赖项，一些 NPM 依赖项，以及 package.json ， tsconfig.json 和 gulpfile.json 文件。

我现在要做的是将jQuery添加到我的项目中，并且能够说（在我的TypeScript文件中）：

let foo: JQuery = $("p");

所以，我显然需要jQuery库，我需要jQuery的typescript定义。这应该不难 - 但我，一个有30年历史的开发人员，无法弄清楚如何使用新工具添加这些东西。

我尝试添加＆＃34; jquery＆＃34;作为NPM package.json文件中的依赖项：

"dependencies": {
  "jquery": "^3.2.1"
},

...但我无法弄清楚如何添加相应的打字稿定义。

TypeScript手册建议使用npm import @types/jquery，但我没有NPM命令行，当我尝试将其直接添加到 package.json <中的依赖项（或devDependencies）部分时/ strong>文件，它没有认出来。

在另一个＆＃34;教程＆＃34;我发现（这个使用Bower只是为了确保它有点混乱），建议将以下内容添加到 tsconfig.json 文件中以启用TypeScript的自动类型获取，其中声音很棒：

"typeAcquisition": { "enable": true },

但遗憾的是，这似乎并不奏效。或者至少，不是我目前的设置。 [虽然当我按照其他教程中的步骤时它确实在IDE中提供了Intellisense，但我实际上从来没有能够让项目进行编译。]

所以，我在这里，求助于你。如何获得我的单行TypeScript以（a）识别JQuery类型定义，（b）实际编译和运行？

更好的是，如果有人知道任何在线资源实际上解释了所有这些当前版本的所有工具那么我很乐意看到这一点。否则我可能会回到VS2015。

Answer 1

我在向VS2017添加打字支持方面遇到了困难，但看起来15.4更新修复了我的问题。首先，您应该将@types/jquery devDependencies添加到package.json文件中。例如：

{
  "name": "asp.net",
  "version": "0.0.0",

  "dependencies": {
    "jquery": "3.1.1",
    /*other packages*/
  },

  "devDependencies": {
    "gulp": "3.8.11",        
    "@types/jquery": "2.0.47"
    /*other dev packages*/
  }
}

您应该设置tsconfig.json文件。例如：

{
  "compilerOptions": {
    "module": "none",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": true,
    "types": [
      "jquery"
    ],
    "lib": [
      "dom",
      "es5",
      "scripthost",
      "es2015.iterable"
    ],
    "target": "es5",
    //"outDir": "wwwroot/app-out"
    "outFile": "wwwroot/app-out/app.js"
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

所以我将module设置为none，因此不需要设置模块捆绑器，例如webpack。在类型中，我们应该指定我们在jquery中提前指定的package.json。另外，我们应在"dom", "es5", "scripthost", "es2015.iterable"中指定lib，因为@types/jquery需要它。 outFile告诉ts放置已编译的js文件的位置。因此，您可以在页面中添加对它的引用。

之后，jquery类型开始在ts文件中工作，无需进一步设置。有时tsconfig.json文件更改不适用于飞行。因此，进行更改，下载npm模块（例如重建解决方案），然后重新启动VS。

如何在VS2017中使用TypeScript中的jQuery

1 个答案: