将TypeScript转换为Javascript。两个文件在同一位置？

我在新的Angular应用程序中使用了TypeScript，开始使用它，我只是有一个问题，就是这些js和ts文件应该放在哪里。transpiler似乎习惯于将.js文件转储到与.ts文件相同的目录中

---

这是最好的做法吗？感觉我的文件夹结构现在被.ts和.js文件污染了。接受此文件夹或创建另一个文件夹？

这是IDE的默认设置，例如Webstorm，它具有整洁的功能，例如在project explorer中的

.ts

文件的子树中隐藏

.js

（以及

.map.js

）文件。您还可以通过这样的方式调整构建：分离

.ts

源代码，并创建

build/

目录，在其中存储编译的

.js

和

.map.js

。这取决于你的个人喜好和使用的工具。

你可以通过其他方式来实现

使用Grunt或Gulp npm插件

VisualStudio支持此npm插件

我的GrunFile.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');
}

任务运行器资源管理器工具栏显示了此方法并使用双击定义任务运行。Vs在后台运行cmd上的代码。 您可以在输出窗口中看到

使用前 在项目目录上运行cmd代码

npm install

Grunfile.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');
}

---

我要大口喝下去，但我喜欢这个解决方案。谢谢你，伙计。