我是打字稿的新手,并试图通过在线示例和入门教程来学习它,我正在关注https://www.codingforentrepreneurs.com/blog/typescript-setup-guide/的教程, 除了当我工作正常我试图导入jquery并尝试在我的typescript文件中使用它,它开始给出找不到模块的错误.以下是我正在运行的代码块:
我的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" ] }
以下是我在运行'webapack'命令时遇到的错误
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模块:错误:无法解析'jquery')但是解决方案似乎不适合我的情况,因为我没有使用bower for依赖管理等任何帮助都将受到高度赞赏.谢谢
UPDATE
我现在通过使用'npm install --save-dev @ types/jquery'添加了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
Michael Jung.. 9
您正在尝试导入类型定义而不是模块本身.错误反映了这一点,并建议您导入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存储库中找到,并且每个存储库都以npm的形式发布@types/
.
您正在使用的教程建议使用typings
,但自TypeScript 2.0以来不再使用该教程(请参阅弃用说明:关于TypeScript@2.0).即使在撰写本文时,该教程似乎已经过时,并且它实际上并没有比官方webpack文档Webpack-TypeScript更多(或更详细).
您正在尝试导入类型定义而不是模块本身.错误反映了这一点,并建议您导入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存储库中找到,并且每个存储库都以npm的形式发布@types/
.
您正在使用的教程建议使用typings
,但自TypeScript 2.0以来不再使用该教程(请参阅弃用说明:关于TypeScript@2.0).即使在撰写本文时,该教程似乎已经过时,并且它实际上并没有比官方webpack文档Webpack-TypeScript更多(或更详细).