Typescript internal module not recognized by VS Code

Question

I am trying to separate my typescript classes in separate files using internal modules. However, the main.ts file will not load or recognize the sub modules.

main.ts

/// <reference path="Car.ts" />
module Vehicles {
    var c = new Vehicles.Car("red");
}

car.ts

module Vehicles {
    export class Car {
        color: string;
        constructor(color: string) {
            this.color = color;
            console.log("created a new " + color + " car");
        }
    }
}

tsconfig.json

{
    "compilerOptions": {
        "sourceMap":  true, 
        "out": "everything.js main.ts car.ts"
    }
}

Update: edited the "out" flag in tsconfig to try and compile main.ts and car.ts into everything.js - this is the last part that is not working: everything.js is not created. Instead, VS Code creates a main.js and a car.js. It seems that the "out" flag is ignored. I have also tried "outFile" with the same result.

Your out is wrong. It should be just "outFile": "main.js". Try to add export` in front of module. — MartyIX
– MartyIX, Commented Nov 23, 2015 at 15:01
Also, the compiler still creates a "car.js" file, which should not be necessary? — Kokodoko
– Kokodoko, Commented Nov 23, 2015 at 15:03
Your editor may create car.js but that's not the main problem. Please post the content of generated main.js too. — MartyIX
– MartyIX, Commented Nov 23, 2015 at 15:04
Hey, it seems to be working now! I can finally include internal modules from separate files. Thanks for all the help! Apparently, I can even leave out the 'files' option in tsconfig.json. The only problem now is that the TS files are not yet concatenated into one big JS file. — Kokodoko
– Kokodoko, Commented Nov 23, 2015 at 15:16
Yes, files is not necessary. I don't use the option. We use gulp-typescript for compiling .ts files because we can compile incrementally the code then which is faster. — MartyIX
– MartyIX, Commented Nov 23, 2015 at 15:18

CoderPi · Accepted Answer · 2015-11-25 15:04:14Z

2

main.ts

/// <reference path="car.ts" />
var c = new Car("red");

car.ts

class Car {
    color: string;
    constructor(color: string) {
        this.color = color;
        console.log("created a new " + color + " car");
    }
}

tsconfig.json

{
    "compilerOptions": {
        "sourceMap":  true, 
        "outFile": "main.js"
    },
    "files": [
        "main.ts",
        "car.ts"
    ]
}

tasks.json

Kokodoko: I finally found the problem! You have to OMIT the "args" option inside "tasks.json", only then will the arguments in tsconfig.json be used! I found the answer here: github.com/Microsoft/typescript/wiki/tsconfig.json. It says: When input files are specified on the command line, tsconfig.json files are ignored

For further information about Modules, don't forget to have a look at the TypeScript Handbook

edited Nov 25, 2015 at 15:04

answered Nov 23, 2015 at 15:09

CoderPi

13.2k4 gold badges38 silver badges64 bronze badges

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

7 Comments

Zorgatone Over a year ago

You missed the Vehicles module

Kokodoko Over a year ago

The Typescript Handbook literally states that you can concatenate multiple .ts files into one .js file using the --out flag. This part is still not working in VS Code with the above config file. Actually, the "out" flag is completely ignored!

CoderPi Over a year ago

the --out flag is for use in console, don't expect it to work in tsconfig.json someone hinted to use outFile, did you try this? btw. why don't you use Visual Studio 2015?

Kokodoko Over a year ago

Yup, also tried outfile. What's confusing about this is that microsoft's own Typescript documentation does not seem to apply to their own product VS Code... :( I do like VS Code though! It's fast and clean. It's just hard to configure. VS Studio is not available for mac. Also I find that tool somewhat bloated for these simple purposes.

CoderPi Over a year ago

oh a mac, ok. But yeah i agree its a nice little Programm. According to: code.visualstudio.com/docs/languages/typescript you can have a "tasks.json" file, with commands and arguments

|

Kokodoko · Accepted Answer · 2015-11-24 11:25:09Z

1

To compile several .ts files into one big .js file using a VS Code task, you need to remove the 'args' from tasks.json and add the "out" argument to tsconfig.json

tasks.json

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

tsconfig.json

{
    "compilerOptions": {
        "sourceMap":  true,
        "out": "myapp.js"
    }
}

Note: When input files are specified on the command line, tsconfig.json files are ignored.

answered Nov 24, 2015 at 11:25

Kokodoko

28.3k37 gold badges132 silver badges208 bronze badges

Collectives™ on Stack Overflow

Typescript internal module not recognized by VS Code

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related