如何在typescript中引入jquery

在使用TypeScript来编码的时候，当需要用到一些DOM操作或者调用Ajax的时候，还是想引入常用的jQuery来进行操作，那么如何在TypeScript中引入jQuery，然后再页面中使用呢？下面介绍一下具体的方法：

第一步：通过npm安装jquery和jquery类型定义文件

npm install jquery @types/jquery --save-dev

第二步：设置tsconfig.json文件

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "allowJs": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ],
    "lib": [
        "es5",
        "es2015"
    ]
}

第三步：安装webpack，并配置webpack.config.js文件

npm install webpack --save-dev

webpack.config.js

const path = require('path');
const { CheckerPlugin } = require('awesome-typescript-loader')

module.exports = {
    entry: './src/index.ts',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader'
            }
        ]
    },
    plugins: [
        new CheckerPlugin()
    ]
};

第四步：安装node类型定义文件

这一步是为了解决ts在编译时报的“node_modules/@types/jquery/index.d.ts(2961,63): error TS2304: Cannot find name 'Iterable'.”错误

npm install @types/node --save-dev

第五步：在src目录下新建index.ts文件如下：

import * as $ from 'jquery';

$('#one').on('click', function () {
    console.log("sdf");
})

第六步：在package.json文件的scripts中添加如下代码：

"scripts": {
  "build": "webpack"
},

第七步：在命令行输入如下命令进行编译

npm run build

现在你就可以看到编译好的index.js文件会出现在dist目录下，然后再根目录新建index.html引入dist下的index.js文件即可使用