Unable to concat typescript modules (.ts) files in

2019-09-14 21:36发布

问题:

I am new to Typescript. I've been trying to concatenate typescript modules by using the tsc --out command. But I'm getting some error. There is no information about the error. Below is the process, I've tired.

.ts files I have:

Validation.ts:

module Validation {  
    export interface StringValidator {
       isAcceptable(s: string): boolean;
    }
}

ZipCodeValidator.ts:

/// <reference path="Validation.ts" />
module Validation {
    var numberRegexp = /^[0‐9]+$/;
    export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }
    }
}

LettersOnlyValidator.ts:

/// <reference path="Validation.ts" />
module Validation {
    var lettersRegexp = /^[A‐Za‐z]+$/;
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            return lettersRegexp.test(s);
        }
    }
}

Test.ts:

/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />
/// <reference path="ZipCodeValidator.ts" />
// Some samples to try
var strings = ['Hello', '98052', '101'];
// Validators to use
var validators: { [s: string]: Validation.StringValidator; } = {};
validators['ZIP code'] = new Validation.ZipCodeValidator();
validators['Letters only'] = new Validation.LettersOnlyValidator();
// Show whether each string passed each validator
strings.forEach(s => {
    for (var name in validators) {
        console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does not match ') + name);
    }
});

tsc command:

tsc --out sample.js Test.ts

Error:

error TS6053: File 'ΓÇÉout.ts' not found.  
error TS6054: File 'sample.js' must have extension '.ts' or '.d.ts' 

Please let me know the way to resolve. And one more, is there any way to concat the typescript module in gulp?

回答1:

It looks like you're using wrong dash character in your tsc --out.
TypeScript compiler looks at your command and instead of "invoke tsc with file Test.ts and output to sample.js" sees something along the lines of "invoke tsc with 3 files: --out, sample.js, Test.ts". It then looks for these files and tries to compile them.

To fix the problem, just copy&paste the command with the correct dash character:
tsc --out sample.js Test.ts



回答2:

I won't answer you exactly because i don't use the tsc command.

But if I were you, I would make it automatic (with Gulp for example) :

var gulp = require('gulp');
var typescript = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var addsrc = require('gulp-add-src');
var concat = require('gulp-concat');

gulp.task('tsc', function () {
    return gulp.src(['*.ts']) // all your ts files here (check the path)
        .pipe(sourcemaps.init())
        .pipe(typescript({
            sortOutput: true
        })) 
        .js // compile with tsc, ordered with _reference.ts
        .pipe(addsrc('external.js')) // add an external javascript file (if needed)
        .pipe(concat('app.js')) // concat all in one file
        .pipe(sourcemaps.write()) // generate the .map
        .pipe(gulp.dest('dist')); // write all in the dist folder
});

In short :

  • gulp-typescript : tsc for gulp
  • gulp-sourcemaps : allows you to generate the .map (to link between the .ts files and the .js files)
  • gulp-add-src : allows you to add sources files in the pipe. It's usefull to push some javascript files in the process.
  • gulp-concat : concat all the files