Question

我的网站项目中的导入语句有问题。尝试使用nodejs-打字稿和jQuery

我的项目文件夹如下：

项目
- node_modules
- 公共
  - js
  - jquery / dist（复制表单node_modules / jquery / dist）
  - index.html
- ts
  - test.ts
package.json
tsconfig.json

package.json：

{
  "name": "testclient",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/jquery": "^3.3.4",
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "typescript": "^2.9.2"
  }
}

tsconfig.json：

{
    "compileOnSave": true,
    "compilerOptions": {
        "experimentalDecorators": true,
        "sourceMap": true,
        "strict": true,
        "module": "ES2015",
        "moduleResolution": "Classic",
        "target": "ES5",
        "lib": ["dom", "es5", "es2015", "es2015.promise"],
        "removeComments": true,
        "sourceMap": true,
        "outDir": "public/js",
        "allowSyntheticDefaultImports": true
    },
    "include": [
        "ts/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

index.html

<!DOCTYPE html>
<html lang="de">
    <header>
        <title>Test</title>
    </header>
    <body>
        Mein Test
    </body>
    <script type="text/javascript" src="js/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
</html>

test.ts

import $  from 'jquery';
$(document).ready(() => {
    console.log('document is ready now');
    console.log($);
});

如果我在Chrome浏览器中启动index.html并打开控制台，则会收到错误消息：

未捕获的SyntaxError：意外的标识符test.js：1

我知道$暂时不被称为jquery。所以我不能在脚本中使用jQuery

在不使用///<reference path=""/>导入jquery的情况下使其运行的最佳实践是什么。要设置哪些tsconfig参数以使其在浏览器中运行？

Answer 1

不确定我是否完全理解了这个问题（有点奇怪），但我认为您正在尝试在索引页面中实现jQuery，而不必下载和映射它，您可以通过在代码中实现它来简单地实现：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

您还会收到此错误，因为您的test.js路径错误，应该是

<script type="text/javascript" src="../ts/test.js"></script>

如果我考虑到您的映射

Answer 2

jquery和打字稿存在问题。您很可能需要下载jQuery的TypeScript definition file并将其包含在项目中。在尝试使用jquery之前，请确保您已完成以下步骤：

选项1：安装@types包（建议用于TS 2.0 +）

在您的项目运行中：

npm install --save-dev @types/jquery

然后，编译器将自动解析jquery的定义。

选项2：手动下载

下载jquery.d.ts。

选项3：使用键入

如果您使用的是here，则可以通过以下方式添加它：

// 1. Install typings
npm install typings -g
// 2. Download jquery.d.ts (run this command in the root dir of your project)
typings install dt~jquery --global --save

设置定义文件后，将别名（$）导入所需的TypeScript文件中，以照常使用它。

import $ from "jquery";
// or
import $ = require("jquery");

您的意思是需要使用--allowSyntheticDefaultImports进行编译-在 tsconfig.json 中添加"allowSyntheticDefaultImports": true。

未捕获的SyntaxError：意外的标识符-导入jQuery

2 个答案: