CODEWITHSUNDEEP
javascripttypescriptwebstorm
Tina Hildebrandt
Tina Hildebrandt

Reputation: 1357

TypeScript compiler creates empty JavaScript file in WebStorm

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.

Upvotes: 2

Views: 2645

Answers (1)

Amid
Amid

Reputation: 22382

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.

Upvotes: 1

Related Questions