Styjun

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

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

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",
 "oufFile": "script.js",
 ,
 "compileOnSave": true