TypeScript -> JavaScript for browser: exports/require statements

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"));
});

I've added the tsconfig.json. No I'm using a gulp pipeline. — D.R.
– D.R., Commented Mar 27, 2019 at 11:05
I added babel to my pipeline after .js and before gulp.dest, but it didn't help. What exactly should babel do? — D.R.
– D.R., Commented Mar 27, 2019 at 11:55
"I receive browser errors for this." Could you tell us what are these ? — Kewin Dousse
– Kewin Dousse, Commented Mar 27, 2019 at 12:11

masa · Accepted Answer · 2019-03-27 12:42:31Z

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).

edited Mar 27, 2019 at 12:42

answered Mar 27, 2019 at 12:36

masa

2,8303 gold badges26 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

D.R. Over a year ago

This seems to work, however, how to extend an interface from a given type schema? The compiler always fails with "Augmentations for the global scope can only be directly nested in external modules or ambient module declarations."

andrew.fox · Accepted Answer · 2021-07-03 09:33:51Z

1

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.

answered Jul 3, 2021 at 9:33

andrew.fox

8,0696 gold badges56 silver badges83 bronze badges

Comments

Lucas Bustamante · Accepted Answer · 2021-02-10 20:38:34Z

0

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
}

edited Feb 10, 2021 at 20:38

Lucas Bustamante

17.6k9 gold badges101 silver badges94 bronze badges

answered Mar 27, 2019 at 12:19

Kewin Dousse

4,0592 gold badges29 silver badges50 bronze badges

4 Comments

raina77ow Over a year ago

That'll generate import statements in JS files.

D.R. Over a year ago

Unfortunately, neither es2015 nor system helped.

Kewin Dousse Over a year ago

Indeed, if you're not using any bundler and don't want multiple files, then I guess you should use the outFile option, which "concatenates" (in short) the output in a single file, after resolving the module imports. I edited my answer to reflect this.

D.R. Over a year ago

Concatenating still creates the lines in question :(

Collectives™ on Stack Overflow

TypeScript -> JavaScript for browser: exports/require statements

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related