TypeScript compiler creates empty JavaScript file in WebStorm

Question

It is my initial experience with TypeScript. I took a simple JavaScript app consisting of two files and converted them to TypeScript.

One file accounts.ts contains the main code, the other one fiat.ts is a support file which exports a module Fiat with some exported members. After some editing I got no more error messages from the TypeScript compiler.

I use a tsconfig.json file to control the compilation:

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "outFile": "main.js",
    "target": "ES5",
    "sourceMap": true
  },
  "files": [
    "accounts.ts",
    "fiat.ts"
  ]
}

It should create a main.js file containing the code. But this contains after a successful compilation only one line:

//# sourceMappingURL=main.js.map

No other code gets included. I found by accident that if I remove the line

import {Fiat} from './fiat';

in the accounts.ts file then the compiler includes the code of accounts.ts into main.js but not the code of fiat.ts and additionally the TypeScript compiler shows error messages for each reference to Fiat in accounts.ts.

I cannot figure out how to create a JavaScript file from just two TypeScript files. Any help would be appreciated!

What I found after some research: The Typescript module concept can be handeled in two different ways: internal and external modules. My difficulties came from not really understanding this. External modules work with a dynamic module loader. You import them. Only internal modules can be lumped together into one (or multiple) Javascript file(s) that get loaded with the HTML via the script tag. To work with internal modules you need /// <reference path="./name.ts" /> lines in the files that reference them. Other syntax differences between internal and external modules are minor as far as I know.

Possible duplicate of TypeScript compile all ts files as a single JavaScript file in WebStorm 7 — Tamas Hegedus
– Tamas Hegedus, Commented Apr 21, 2016 at 20:33
I saw that and tried to understand it. The guy there used file watchers, I use the compiler directly. Might not be such a difference but the compiler options proposed there did nothing for my problem. It seems to be different. — Tina Hildebrandt
– Tina Hildebrandt, Commented Apr 21, 2016 at 21:14

Amid · Accepted Answer · 2016-04-21 20:14:13Z

1

If you want to use modules (external modules) and compile them in single file you should set module to target amd or system (assuming you have 1.8 typescript) in your tsconfig.json.

By removing import/export you do not use modules and thus outFile works.

answered Apr 21, 2016 at 20:14

Amid

22.5k6 gold badges63 silver badges59 bronze badges

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

9 Comments

Tina Hildebrandt Over a year ago

Yes I saw that somewhere explained and tried this as well. It leads to Javascript code which does not execute. With the 'amd' option I get a "define is not defined" and with "system" a "System is not defined" error in the browser console.

Amid Over a year ago

What loader are you using?

Amid Over a year ago

Remember browsers does not yet have ability to load modules - you need to use one like systemjs, requirejs, etc

Tina Hildebrandt Over a year ago

What confuses me is the fact that I first created the 'fiat.ts' with the module in it and used it from within a Javascript version of 'accounts.js'. This worked like a charm. I did not need a module loader, I just included the generated 'fiat.js' in the web page and it was usable. Why doesn't this work with one more Typescript file which not even contains a module but is just the updated Javascript version? This is weiered. With the second Typescript file the transpiler started to generate different code.

Amid Over a year ago

It does not work due to how tsc is bild. tsc will not emit code if target is commonjs and you are using multiple files together with outFile option. In general modules are not meant to be used with one file only.

|

Collectives™ on Stack Overflow

TypeScript compiler creates empty JavaScript file in WebStorm

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related