Question

我想从Web应用程序的脚本的JavaScript切换到TypeScript。但是，在生成JavaScript时，它总是将以下行放在脚本之上：

"use strict";
exports.__esModule = true;
var $ = require("jquery");

为此，我收到浏览器错误。如何防止TypeScript这样做？

我读过TypeScript: Avoid require statements in compiled JavaScript，但是切换到“ any”并不能作为答案，这使整个TypeScript想法丧失了。

我也读过Typescript importing exported class emits require(...) which produces browser errors，但这仍然将<reference...东西生成到JS文件中，这也不是我想要的。

如何创建“干净的” JS文件？

我的tsconfig.json看起来像这样：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "target": "es5"
  },
  "compileOnSave": true
}

我的吞咽电话是：

var ts = require('gulp-typescript');
...
var tsProject = ts.createProject("tsconfig.json");
...
gulp.task("ts", function () {
  return gulp.src(tsInputFiles)
    .pipe(tsProject())
    .js
    .pipe(gulp.dest("wwwroot/js"));
});

Answer 1

如果您不想加载任何模块，只需将模块加载放到打字稿文件的开头？

file1.ts：

$(function () {
});

如果尝试对此进行编译，则会出现错误：

file1.ts(2,1): error TS2581: Cannot find name '$'. Do you need to
install type definitions for jQuery? Try `npm i @types/jquery` and
then add `jquery` to the types field in your tsconfig.

按照上述说明运行npm（如果目录中未初始化npm，请首先运行npm init。

然后将typeRoots和types添加到tsconfig：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [ "node_modules/types" ],
    "types": [ "jquery" ]
  },
  "compileOnSave": true
 }

此后，编译就可以了，您仍然可以使用强类型的输入（在编译中应用了jquery类型）。

Answer 2

浏览器不支持JavaScript模块，因此您需要告知TypeScript编译器您正在尝试编译将在浏览器上运行的代码。我不知道您项目的其余部分是什么样子，但是在您的配置中，尝试将"module": "es2015"或"module": "system"添加到您的配置中，同时还要添加一个outFile来定义您想要的位置要生成的文件：

在您的tsconfig文件中：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "target": "es5",
    "module": "es2015",
    "oufFile": "script.js",
  },
  "compileOnSave": true
}

Answer 3

我想使用通过 TypeScript 任务（编译成 es5）直接注入 HTML 文件的 gulp 文件。起初将 type="module" 添加到 <script> 有帮助。但是后来出现了更多问题，所以最后我最终使用了这个符号而不是 import:

/// <reference types="@types/jquery" />
/// <reference path="my_custom_file.ts" />
/// <reference path="my_externalTypes.d.ts" />

和 namespace 在每个文件中以将它们彼此分开。

这应该适用于简单的小型项目。

TypeScript->浏览器的JavaScript：导出/要求语句

3 个答案: