Webpack 错误 TS2339：“JQuery”类型上不存在属性“对话框”答案

【问题标题】：Webpack error TS2339: Property 'dialog' does not exist on type 'JQuery'Webpack 错误 TS2339：“JQuery”类型上不存在属性“对话框”
【发布时间】：2017-07-02 10:52:53
【问题描述】：

我的 webpack.config.js 是

var path = require('path');

module.exports = {
    entry: {
        'AdminPanel/AdminPanel': '../../client/scripts/AdminPanel/AdminPanel.ts',
        'Registration/Registration': '../../client/scripts/Registration/Registration.ts'
    },
    output: {
        filename: '[name].js',
        path: '../../src/client/scripts'
    },
    resolve: {
        extensions: ['.webpack.js', '.web.js', '.ts', '.js']
    },
    module: {
        loaders: [
            { test: /\.ts$/, loader: 'ts-loader' },
            { test: /\.css$/, loader: "style-loader!css-loader" },
            { test: /\.(woff|woff2|eot|ttf|svg)$/, loader: 'url-loader' },
            { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' },
            { test: /\.(jpe?g|png|gif)$/i, loader: "file-loader" }
        ]
    }
}

package.json的内容

{
  "name": "test",
  "version": "0.0.0",
  "description": "test",
  "main": "src/server.js",
  "author": {
    "name": "pratik"
  },
  "devDependencies": {
    "@types/body-parser": "^0.0.33",
    "@types/bootstrap": "^3.3.5",
    "@types/cookie-parser": "^1.3.30",
    "@types/express": "^4.0.35",
    "@types/express-handlebars": "0.0.29",
    "@types/jquery": "2.0.40",
    "@types/jqueryui": "^1.11.32",
    "@types/mysql": "0.0.31",
    "css-loader": "^0.26.1",
    "file-loader": "^0.10.0",
    "style-loader": "^0.13.1",
    "ts-loader": "^2.0.0",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1"
  },
  "dependencies": {
    "body-parser": "^1.16.1",
    "bootstrap": "^3.3.7",
    "cookie-parser": "^1.4.3",
    "express": "^4.14.1",
    "express-handlebars": "^3.0.0",
    "jquery": "^3.1.1",
    "jqueryui": "^1.11.1",
    "mysql": "^2.13.0"
  }
}

我的 ts 文件

import * as $ from 'jquery';
import 'jqueryui/jquery-ui.js';
import 'bootstrap/dist/css/bootstrap.css';
import 'jqueryui/jquery-ui.css';

$(document).ready(function () {
    alert('hi');
    let s = '<input class="date" type= "date" name= "txtFromUniversityDate" id= "txtFromUniversityDate" placeholder= "Please select joining date." > </p>';
    $('.container').dialog();
});

为了生成编译后的版本，我运行下面的命令：

tsc && webpack --config "../../webpack.config.js" --display-error-details --verbose --watch

但我遇到了以下错误：

/client/scripts/AdminPanel/AdminPanel.ts 中的错误 (9,21)：错误 TS2339：“JQuery”类型上不存在属性“对话框”。

谁能帮我解决这个错误？

【问题讨论】：

标签： javascript jquery typescript webpack

【解决方案1】：

您需要为 jQuery UI 安装 TypeScript 定义。

【讨论】：

【解决方案2】：

我认为这是 webpack 中的错误或者它可能是一个特性。我在这里发布一个答案，以防将来有人需要它。在与模块引用相同的文件顶部添加对 d.ts 的引用解决了该问题。

/// <reference path="../../../node_modules/@types/jqueryui/index.d.ts" />

所有外部 js 文件也是如此。

【讨论】：