TypeScript to Javascript. Both files in the same location?

Question

I'm getting started with TypeScript by using it in my new Angular application and I just have a question in terms of where to put all these js and ts files. It seems the convention for the transpiler to dump the .js file in the same directory as the .ts file.

Is this the best practice? It feels like my folder structure is now polluted with .ts and .js files. Accept this or make another folder?

Answer 1

This is default setting for IDE such as Webstorm which has neat feature such as hiding .js (and also .map.js ) files in a sub-tree of .ts file in project explorer. You can also adjust your build in such a way that you separate .ts sources and create build/ directory where you store compiled .js and .map.js . Its a matter of your personal preference and the tools you use.

Answer 2

You can make this other ways.

with Grunt or Gulp npm plugins.

visual studio support this npm plugins.

my sample with gruntfile.js

Task Runner Explorer toolbar shown this methods and run with double click definations tasks. Vs run code on cmd at background. you seen in output window.

before use run cmd code on project directory

npm install

gruntfile.js

/// <binding BeforeBuild='default' Clean='default' />
/// <vs BeforeBuild='default' Clean='ts:default' />
module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        banner: '/* \n * <%= pkg.title || pkg.name %> v<%= pkg.version %>\n' +
                  ' * <%= pkg.homepage %>\n' +
                  ' * Copyright (c) 2004 - <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
                  ' * License: <%= pkg.license %>\n' +
                  ' * created at <%= grunt.template.today("HH:mm:ss dd.mm.yyyy") %> \n */ \n',

        //#region watch
        watch: {
            sass: {
                files: 'assets/css/*.scss',
                tasks: ['sass', 'cssmin']
            }
        },
        //#endregion

        //#region notify_hooks
        notify_hooks: {
            options: {
                enable: true,
                max_jshint_notifications: 5,
                title: "Project notifications "
            }
        },
        //#endregion

        //#region typescript
        ts: {
            //https://www.npmjs.com/package/grunt-ts
            default: {
                src: ["**/*.ts", "!assets/typings/**/*.ts", "!**/*.d.ts", "!node_modules/**/*.ts"],
                options: {
                    sourceMap: true
                }
            }
        },
        ts_publish: {
            default: {
                src: ["**/*.ts", "!assets/typings/**/*.ts", "!**/*.d.ts", "!node_modules/**/*.ts"],
                options: {
                    sourceMap: false
                }
            }
        },
        //#endregion

        //#region uglify
        uglify: {
            options: {
                banner: '<%= banner %>',
                report: 'gzip',
                //manage: false,
                compress: {
                    drop_console: true
                }
            },
            assets_app: {
                options: { sourceMap: true, banner: '<%= banner %>' /*,sourceMapName: 'path/to/sourcemap.map'*/ },
                files: [{
                    expand: true,
                    cwd: 'assets/app',  // bulundugu dizin
                    src: ['*.js', '!*.min.js'],
                    ext: '.js',
                    dest: 'assets/app/'
                }]
                //files: { 'assets/js/myScripts.js': ['assets/js/theme.js', 'assets/js/theme.init.js'] }
            },
            assets_account: {
                options: { sourceMap: true },
                files: [{
                    expand: true,
                    cwd: 'assets/app/account',  // bulundugu dizin
                    src: ['**/*.js', '!**/*.min.js'],
                    ext: '.js',
                    dest: 'assets/app/account/'
                }]
            },
            assets_cordova: {
                options: { sourceMap: true },
                files: [{
                    expand: true,
                    cwd: 'assets/app/cordova',  // bulundugu dizin
                    src: ['**/*.js', '!**/*.min.js'],
                    ext: '.js',
                    dest: 'assets/app/cordova/'
                }]
            }
        },
        //#endregion

        //#region cssmin
        cssmin: {
            options: {
                banner: '<%= banner %>',
                report: 'gzip'
            },
            my_target: {
                files: [{
                    expand: true,
                    cwd: 'assets/css',
                    src: ['*.css', '!*.min.css'],
                    dest: 'assets/css',
                    ext: '.min.css'
                }]
            }
        },
        //#endregion

        //#region less 
        less: {
            development: {
                options: {
                    paths: ["assets\master\less"]
                },
                files: [{
                    expand: true,
                    cwd: 'assets\master\less',
                    src: ['*.less'],
                    dest: 'assets\master\less',
                    ext: '.css'
                }]
            }
        },
        //#endregion

        //#region sass
        sass: {
            dist: {
                options: {
                    style: 'expanded'
                },
                files: { 'assets/css/myStyle.css': 'assets/css/*.scss' }
            }
        }
        //#endregion

    });

    grunt.loadNpmTasks('grunt-notify');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks("grunt-ts");
    //grunt.loadNpmTasks('grunt-contrib-watch');
    //grunt.loadNpmTasks('grunt-contrib-sass');


    //grunt.registerTask('default', ['cssmin', 'ts']);
    grunt.registerTask('default', ['ts']);
    grunt.registerTask('default_ts', ['ts', 'uglify'])
    grunt.registerTask('before_publish', ['cssmin', 'ts_publish', 'uglify']);

    grunt.task.run('notify_hooks');
}

my package.json

{
  "name": "xxxx",
  "version": "1.0.0",
  "description": "xxxx",
  "main": "xx",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "sfasdf"
  ],
  "author": "Abdullah SARGIN apocalips@windowslive.com",
  "license": "ISC",
  "devDependencies": {
    "grunt-contrib-cssmin": "^0.12.3",
    "grunt-contrib-jshint": "^0.11.2",
    "grunt-contrib-sass": "^0.9.2",
    "grunt-contrib-uglify": "^0.9.1",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-notify": "^0.4.1",
    "grunt-ts": "^4.2.0-beta.1"
  }
}