Question

我是打字稿的新手，并试图通过在线示例和入门教程来学习它，我是从以下教程开始的 https://www.codingforentrepreneurs.com/blog/typescript-setup-guide/ 除了当我试图导入jquery并试图在我的打字稿文件中使用它时，一切都运行正常，它开始给出找不到模块的错误。以下是我正在运行的代码块：

我的main.ts文件是

import * as $ from 'jquery'
import {MustHaveCoffee} from './getcoffee'
class SweetSweetClass{
    constructor(){
        console.log("Even sweeter");
        $('body').css('background-color', 'red');//here error occures
    }
}
let basil = new SweetSweetClass();
let coffee = new MustHaveCoffee();

webpack.config.js文件是

var path = require('path');
module.exports = {
    entry: './main.ts',
    resolve: {
        extensions: ['.webpack.js', '.web.js', '.ts', '.js']
    },
    module:{
        loaders: [
            { test:/\.ts$/, loader: 'ts-loader' }
        ]
    },
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

我的tsconfig.json文件是

{
    "compilerOptions":{
        "module":"commonjs",
        "outDir":"dist/",
        "noImplicitAny":true,
        "removeComments":true,
        "preserveConstEnums":true
    }, 
    "include":[
        "./typings/*"
    ],
    "exclude":[
        "node_modules",
        "**/*.spec.ts"
    ]
}

以下是我在运行＆＃39; webapack＆＃39;时遇到的错误。命令

E:\learning-typescript-by-examples>webpack
ts-loader: Using typescript@2.4.1 and E:\learning-typescript-by-examples\tsconfig.json
Hash: 3a411aca489fbed8710d
Version: webpack 3.0.0
Time: 1659ms
Asset     Size  Chunks             Chunk Names
bundle.js  3.34 kB       0  [emitted]  main
[0] ./main.ts 402 bytes {0} [built]
[1] ./getcoffee.ts 235 bytes {0} [built]

ERROR in ./main.ts
Module not found: Error: Can't resolve 'jquery' in 'E:\learning-typescript-by-examples'
@ ./main.ts 3:8-25

另外，我已经通过运行

将jquery添加为全局模块

typings install dt~jquery --global --save

它运作正常。我按照教程中提到的每一步都开始，但是开始得到规定的错误。可能是我错过了一些东西，却无法弄明白。我已经搜索了问题并找到了一些解决方案（比如webpack Module not found: Error: Can't resolve 'jquery'），但解决方案似乎并不符合我的情况，因为我没有使用bower进行依赖管理等任何帮助都会受到高度赞赏。谢谢

更新

我现在通过使用＆＃39; npm install --save-dev @ types / jquery＆＃39;添加了jquery。以下是详细错误

ts-loader: Using typescript@2.4.1 and E:\learning-typescript-by-examples\tsconfig.json
Hash: d72ca1c2dd5c6319254c
Version: webpack 3.0.0
Time: 2233ms
Asset     Size  Chunks             Chunk Names
bundle.js  3.35 kB       0  [emitted]  main
[0] ./main.ts 410 bytes {0} [built] [2 errors]
[1] ./getcoffee.ts 235 bytes {0} [built]


ERROR in ./main.ts
(1,20): error TS2306: File 'E:/learning-typescript-by-examples/node_modules/@types/jquery/index.d.ts' is not a module.

ERROR in ./main.ts
(1,20): error TS6137: Cannot import type declaration files. Consider importing 'jquery' instead of '@types/jquery'.

ERROR in ./main.ts

Module not found: Error: Can't resolve '@types/jquery' in 'E:\learning-typescript-by-examples'

resolve '@types/jquery' in 'E:\learning-typescript-by-examples'

  Parsed request is a module

  using description file: E:\learning-typescript-by-examples\package.json (relative path: .)

    Field 'browser' doesn't contain a valid alias configuration

  after using description file: E:\learning-typescript-by-examples\package.json (relative path: .)

    resolve as module

      E:\node_modules doesn't exist or is not a directory
      looking for modules in E:\learning-typescript-by-examples\node_modules

        using description file: E:\learning-typescript-by-examples\package.json (relative path: ./node_modules)

          Field 'browser' doesn't contain a valid alias configuration
        after using description file: E:\learning-typescript-by-examples\package.json (relative path: ./node_modules)

          using description file: E:\learning-typescript-by-examples\node_modules\@types\jquery\package.json (relative path: .)
            no extension

              Field 'browser' doesn't contain a valid alias configuration

             E:\learning-typescript-by-examples\node_modules\@types\jquery is not a file
            .webpack.js

              Field 'browser' doesn't contain a valid alias configuration

              E:\learning-typescript-by-examples\node_modules\@types\jquery.webpack.js doesn't exist
            .web.js

              Field 'browser' doesn't contain a valid alias configuration

              E:\learning-typescript-by-examples\node_modules\@types\jquery.web.js doesn't exist
            .ts

              Field 'browser' doesn't contain a valid alias configuration

              E:\learning-typescript-by-examples\node_modules\@types\jquery.ts doesn't exist
            .js

              Field 'browser' doesn't contain a valid alias configuration

              E:\learning-typescript-by-examples\node_modules\@types\jquery.js doesn't exist
            as directory
              existing directory

                using path: E:\learning-typescript-by-examples\node_modules\@types\jquery\index

                  using description file: E:\learning-typescript-by-examples\node_modules\@types\jquery\package.json (relative path: ./index)
                    no extension

                      Field 'browser' doesn't contain a valid alias configuration

                      E:\learning-typescript-by-examples\node_modules\@types\jquery\index doesn't exist
                    .webpack.js

                      Field 'browser' doesn't contain a valid alias configuration

                      E:\learning-typescript-by-examples\node_modules\@types\jquery\index.webpack.js doesn't exist
                    .web.js

                      Field 'browser' doesn't contain a valid alias configuration
                      E:\learning-typescript-by-examples\node_modules\@types\jquery\index.web.js doesn't exist
                    .ts

                      Field 'browser' doesn't contain a valid alias configuration
                      E:\learning-typescript-by-examples\node_modules\@types\jquery\index.ts doesn't exist
                    .js

                      Field 'browser' doesn't contain a valid alias configuration
                      E:\learning-typescript-by-examples\node_modules\@types\jquery\index.js doesn't exist

[E:\node_modules]

[E:\learning-typescript-by-examples\node_modules\@types\jquery]

[E:\learning-typescript-by-examples\node_modules\@types\jquery.webpack.js]

[E:\learning-typescript-by-examples\node_modules\@types\jquery.web.js]

[E:\learning-typescript-by-examples\node_modules\@types\jquery.ts]

[E:\learning-typescript-by-examples\node_modules\@types\jquery.js]

[E:\learning-typescript-by-examples\node_modules\@types\jquery\index]

[E:\learning-typescript-by-examples\node_modules\@types\jquery\index.webpack.js]

[E:\learning-typescript-by-examples\node_modules\@types\jquery\index.web.js]

[E:\learning-typescript-by-examples\node_modules\@types\jquery\index.ts]

[E:\learning-typescript-by-examples\node_modules\@types\jquery\index.js]
@ ./main.ts 3:8-32

Answer 1

您尝试导入类型定义而不是模块本身。该错误反映了这一点，并建议您改为导入jquery。

(1,20): error TS6137: Cannot import type declaration files. Consider importing 'jquery' instead of '@types/jquery'.

实际模块为jquery，这意味着您需要将其导入。

import * as $ from 'jquery';

当然你需要先安装它，这可能是你最初的问题。您可以使用以下命令安装它：

npm install --save jquery

您可能想知道为什么需要两个不同的包来使用jQuery。原因是jquery是一个JavaScript模块，当TypeScript没有模块的任何类型信息且jquery没有提供它们时，它们通常不满意。您不需要使用模块的类型，但您需要以某种方式满足TypeScript编译器。因为创建自己的类型定义会很繁琐，所以社区制作的流行库有很多类型定义。它们可以在DefinitelyTyped repository中找到，每个都以@types/<package-name>的形式发布到npm。

您使用的教程建议使用typings，但自TypeScript 2.0以来不再使用（请参阅Deprecation Notice: Regarding TypeScript@2.0）。即使在撰写本文时，该教程似乎已经过时，并且它并没有比官方webpack文档Webpack - TypeScript更多（或更详细）。

通过webpack错误导入jquery - 找不到模块：无法解析jquery

1 个答案: