TypeScript -> JavaScript for browser：exports/require 语句

Question

I want to switch from JavaScript to TypeScript for our web app's scripts. However, when generating the JavaScript it always puts the following lines on top of the script:

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

I receive browser errors for this. How to prevent TypeScript from doing so?

I read TypeScript: Avoid require statements in compiled JavaScript but it can't be the answer to switch to "any", this forfeits the whole TypeScript idea.

I also read Typescript importing exported class emits require(...) which produces browser errors but this still generates the <reference... stuff into the JS file, which is also not what I want.

How to create "clean" JS files?

My tsconfig.json looks like this:

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

My gulp call is:

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

Just drop the module loading in the beginning of your typescript file, if you do not want to load any modules?

file1.ts:

$(function () {
});

If you try to compile this, you'll get an error:

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.

Run npm as told above ( npm init first, if npm has not been initialized in the directory).

Then add typeRoots and types to tsconfig:

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

After that, the compiling works, and you still have the strong typing in place (jquery types applied in compilation).

Answer 2

Browsers don't support JavaScript modules, so you'll need to tell the TypeScript compiler that you're trying to compile code that will be run on a browser. I don't know what the rest of your project looks like, but in your configuration, try adding "module": "es2015" or "module": "system" to your configuration, while also adding an outFile defining where you want to file to be generated :

in your tsconfig file :

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

Answer 3

I wanted to use TypeScript files injected directly into a HTML file via gulp task (compiled into es5). At first adding type="module" to <script> helped. But then more problems appeared, so finally I've end up using this notation instead of import :

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

and namespace in each of the file to separate them from each other.

That should work for a simple, small projects.