如何在VS2017中使用TypeScript的jQuery

Question

注意:这是关于Visual Studio 2017的问题.与早期版本相关的答案或建议可能没有帮助.谢谢.

---

我完全在我的智慧结束.我一直在尝试使用TypeScript(v2.3)来创建一个简单的Visual Studio 2017 Web项目,这让我感到非常沮丧,因为它让我感到疲惫和愤怒.我真的怀疑任何人都没有完成这项壮举而不放弃Visual Studio工具并在VS外面/旁边设置所有内容.

我的第一个问题是,网上有各种各样的资源,提出了不同的方法,它们都有冲突:"使用Gulp","不,使用Bower","使用NPM","不,使用WebPack".当然,很多建议都与早期版本的Visual Studio有关.

同样,对于导入模块的打字稿语法似乎与每一个版本的变化,这么多的那个建议也是出于过期,进一步取决于哪个模块加载器,等你使用.

很多选择都是"很棒的",但工具必须至少有点自以为是,我无法弄清楚阻力最小的路径是什么.我想坚持MS实际上与VS集成的东西,因为当命令和配置格式每周更改时,我真的不喜欢命令行和配置文件.

我按照TypeScript手册中的步骤创建了一个Web项目,它只是说"hello world",但是在"Add Angular 2"部分之前停止了.(我不想使用Angular,或者至少还没有使用).

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

我现在要做的是将jQuery添加到我的项目中,并且能够说(在我的TypeScript文件中):

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

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

我尝试在NPM package.json文件中添加"jquery"作为依赖项:

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

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

TypeScript手册建议使用,npm import @types/jquery但我没有NPM命令行,当我尝试将它直接添加到package.json文件中的依赖项(或devDependencies)部分时,它无法识别它.

在我发现的另一个"教程"中(这个使用Bower只是为了确保它有点混乱),建议将以下内容添加到tsconfig.json文件中以启用TypeScript的自动类型获取,这听起来很棒:

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

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

所以,我在这里,求助于你.我怎样才能得到我的单行TypeScript来(a)识别JQuery类型定义,(b)实际编译和运行？

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

Answer 1

我在向VS2017添加打字支持方面遇到了困难,但看起来像15.4更新解决了我的问题.首先,您应该将@types/jquerydevDependencies 添加到您的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.