Output folder for compiled TypeScript

Question

I'm following a tutorial called THE HERO EDITOR, and it has me creating and editing TypeScript files in an app folder. The app uses a script tsc -w, where the w causes the tsc transpiler to output a new JavaScript file every time a TypeScript file fails.

This caused me some confusion for several minutes, because when I added a TypeScript class, the editor (Visual Studio Code) underlined the class name and told me it was a duplicate declaration. I saw the JavaScript file with the same name, but no sooner had I deleted it, the duplicate declaration, and thus the JS file, were back.

The script is declared in package.json:

"scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
},

Where can I specify where compiled JavaScript goes? I doubt I can do it here, but I can only guess that I need a grunt or equivalent file, but then what do I do in that file, and do I remove the tsc entries from `package.js' once another file takes over?

Answer 1

We can control where our compiled javascript goes with the help of "outDir" parameter of "compilerOptions" in our tsconfig.json file.

I am also using Visual Studio Code and I generally create my tsconfig.json file at the project root directory. Here is an example, where I want my compiled javascript to go inside "src/ts-out/" directory

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true,
        "outDir": "src/ts-out/"
    }    
}

Hope it helps. Happy coding...