未捕獲的 ReferenceError：$ 未定義 jquery 打字稿

Question

我嘗試在我的項目中安裝 Jquery，首先我運行npm install --save-dev @types/jquery和npm install jquery --save

所以我的 package.json 看起來像這樣：

{
  "name": "website2019",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "@types/swiper": "^4.4.8",
    "animejs": "^3.1.0",
    "core-js": "^3.2.1",
    "jquery": "^3.4.1",
    "parallax-js": "^3.1.0",
    "rellax": "^1.10.0",
    "swiper": "^5.0.4",
    "tippy.js": "^4.3.5",
    "ts-loader": "^6.2.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
    "@babel/preset-env": "^7.6.2",
    "@babel/preset-typescript": "^7.6.0",
    "@babel/register": "^7.6.2",
    "@types/jquery": "^3.3.32",
    "@types/node": "^12.12.6",
    "@typescript-eslint/eslint-plugin": "^2.2.0",
    "@typescript-eslint/parser": "^2.2.0",
    "autoprefixer": "^9.6.1",
    "babelify": "^10.0.0",
    "bootstrap": "^4.3.1",
    "browser-sync": "^2.26.7",
    "browserify": "^16.5.0",
    "cssnano": "^4.1.10",
    "cz-conventional-changelog": "^3.0.2",
    "del": "^5.1.0",
    "eslint": "^6.4.0",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-plugin-import": "^2.18.2",
    "gulp": "^4.0.2",
    "gulp-cheerio": "^0.6.3",
    "gulp-concat": "^2.6.1",
    "gulp-hash": "^4.2.2",
    "gulp-header": "^2.0.9",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^6.1.0",
    "gulp-inject": "^5.0.4",
    "gulp-load-plugins": "^2.0.1",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-svgmin": "^2.2.0",
    "gulp-svgo": "^2.1.1",
    "gulp-svgstore": "^7.0.1",
    "gulp-terser": "^1.2.0",
    "minimist": "^1.2.0",
    "sass": "^1.22.12",
    "stylelint": "^11.0.0",
    "stylelint-order": "^3.1.1",
    "stylelint-scss": "^3.11.1",
    "through2": "^3.0.1",
    "tsify": "^4.0.1",
    "typescript": "^3.7.2",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0",
    "webpack-dev-server": "^3.9.0"
  }
}

jquery 和@type/jquery 安裝良好。 然后在我的 Typescript 文件中，我添加import * as $ from "jquery"; 所以我的文件看起來像這樣：

import * as $ from "jquery";

import accordion from './accordion'
import broswer from './broswer'
import feature from './feature'
import header from './header'
import parallax from './parallax'
import pricing from './pricing'
import scroll from './scroll'
import slider from './slider'
import tab from './tab'
import testimony from './testimony'
import tooltip from './tooltip'
import video from './video'
import home from './home'
// IE Polyfill

document.addEventListener('DOMContentLoaded', () => {
  // LOADED
  document.body.classList.add('loaded')

  // BROWSER
  broswer()

  // HEADER
  header()

  // SLIDER
  slider()

  // TESTIMONY
  testimony()

  // ACCORDION
  accordion()

  // PARALAX
  parallax()

  // TOOLTIP
  tooltip()

  // PRICING
  pricing()

  // FEATURE
  feature()

  // TAB
  tab()

  // VIDEO
  video()

  // SCROLL
  scroll()

  // HOME 
  home()

})

在我的文件 home.ts 中，當我嘗試 jquery 時，出現錯誤

export default () => {
    $('.text-center').css('color', 'red'); 

}
Uncaught ReferenceError: $ is not defined

我不明白為什么，jquery 在我的 package.json 中很好，我將它導入到我的打字稿文件中，你知道如何修復它嗎？

Answer 1

您必須在使用 jquery 的.ts文件中包含import語句。