Trying to use allowJS, getting error TS6054

[scirelli]

I'm trying to slowly convert an JS project into a TS project. I started using tsc with a simple tsconfig.json

{
    "compilerOptions":{
        "outDir":"../app_gen",
        "allowJs":true
    },
    "exclude":[
        "fonts",
        "images",
        "styles"
    ]
}

Which just takes the js files and puts them into the app_gen folder as expected.

I found typeString/grunt-ts and decided to try and use it. I took the example config and added the allowJS:true flag

            ts: {
                // use to override the default options, See: http://gruntjs.com/configuring-tasks#options
                // these are the default options to the typescript compiler for grunt-ts:
                // see `tsc --help` for a list of supported options.
                options: {
                    allowJs: true,
                    compile: true,                 // perform compilation. [true (default) | false]
                    comments: false,               // same as !removeComments. [true | false (default)]
                    target: 'es5',                 // target javascript language. [es3 | es5 (grunt-ts default) | es6]
                    module: '',                    // target javascript module style. [amd (default) | commonjs]
                    sourceMap: false,              // generate a source map for every output js file. [true (default) | false]
                    sourceRoot: '',                // where to locate TypeScript files. [(default) '' == source ts location]
                    mapRoot: '',                   // where to locate .map.js files. [(default) '' == generated js location.]
                    declaration: false,            // generate a declaration .d.ts file for every output js file. [true | false (default)]
                    htmlModuleTemplate: 'My.Module.<%= filename %>',    // Template for module name for generated ts from html files [(default) '<%= filename %>']
                    htmlVarTemplate: '<%= ext %>',                      // Template for variable name used in generated ts from html files [(default) '<%= ext %>]
                                                                        // Both html templates accept the ext and filename parameters.
                    noImplicitAny: false,          // set to true to pass --noImplicitAny to the compiler. [true | false (default)]
                    fast: "watch"                  // see https://github.com/TypeStrong/grunt-ts/blob/master/docs/fast.md ["watch" (default) | "always" | "never"]
                    /* ,compiler: './node_modules/grunt-ts/customcompiler/tsc'  */ //will use the specified compiler.
                },
                // a particular target
                dev: {
                    src: [
                        "app/**/*.ts",
                        "app/**/*.js",
                        "!app/**/*.spec.js"
                    ],          // The source typescript files, http://gruntjs.com/configuring-tasks#files
                    //html: ['app/**/**.tpl.html'],  // The source html files, https://github.com/basarat/grunt-ts#html-2-typescript-support
                    //reference: 'app/reference.ts', // If specified, generate this file that you can use for your reference management
                    outDir: 'app_gen',             // If specified, generate an out.js file which is the merged js file
                    watch: 'app',                  // If specified, watches this directory for changes, and re-runs the current target
                    // use to override the grunt-ts project options above for this target
                    options: {
                    }
                }
}

I was expecting grunt-ts to do the same as the tsc with the tsconfig.json. Instead I get a error TS6054 for each js file in the project.

error TS6054: File '.../properties.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'. 50 non-emit-preventing type warnings
Error: tsc return code: 2

Why is this happening? tsc, even if allowJS is false, will ignore the js files.

As I said my goal is to slow convert the js files to ts files. I don't want to have to rename all the js files to ts.

Thanks in advance.

---

I just found the verbose flag, turned it on and I don't see the --allowJs flag being set.

Using tsc v1.7.3
...I cut out the list of js files here...
"app/.baseDir.ts" --removeComments --target ES5 --outDir app_gen

[nycdotnet]

Hi, Since you had a tsconfig.json you were happy with, just use that. See here: https://github.com/typeStrong/grunt-ts/#tsconfig Basically in the Gruntfile you just need to point grunt-ts to your tsconfig.json and it should do the right thing.

Also note that the allowJs switch is only supported with TypeScript 1.8 or higher and grunt-ts 5.5 or higher. I see your cut-out seems to indicate you have tsc 1.7.3. To upgrade TypeScript, edit your package.json and run npm install again.

Good luck.

[fcamblor]

The allowJs param doesn't seem to be taken into consideration in my tsconfig when running grunt-ts. However, if I execute tsc with the same tsconfig.json file, it works (my js files are packaged into my app.js resulting file)

My tsconfig.json file :

{
    "compilerOptions": {
        "module": "amd",
        "target": "ES5",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outFile": "../../.tmp/scripts/app.js",
        "sourceMap": true,
        "inlineSourceMap": false,
        "allowJs": true,
        "inlineSources": true
    }
}

I'm using [email protected] & [email protected], and using verbose: true shows me that --allowJs seems to be passed to tsc :

Watching all TypeScript / Html files under : app/scripts/
Compiling...
Cleared fast compile cache for target: dev
Fast compile will not work when --out is specified. Ignoring fast compilation
Using tsc v1.8.9
"/Users/fcamblor/Documents/projects/my-project/app/scripts/Hello.ts" "/Users/fcamblor/Documents/projects/my-project/app/scripts/Hello2.ts" --sourcemap --removeComments --noImplicitAny --preserveConstEnums --inlineSources --allowJs --target ES5 --module amd --out .tmp/scripts/app.js

Anyway, I'm wondering why grunt-ts is manually transfering tsconfig.json properties to tsc rather than calling tsc -p <path_to_tsconfig>

[nycdotnet]

If you want tsc to use the native tsconfig.json, you can just use the passThrough option. For example:

grunt.initConfig({
  ts: {
    default: {
      tsconfig: {
        passThrough: true
      }
    }
  }
});

[nycdotnet]

There's two simple reasons I can think of that allowJs would be passed but not work - one is that you have an older version of TypeScript even though your package.json specifies 1.8.9 - can you check that in your node_modules folder? The other possibility is that they're just not being included in the compilation context and you need to update your glob or src attribute to include *.js or whatever .js files are appropriate.

[fcamblor]

Nice ! passThrough did the trick

npm list typescript gives me :

[email protected] /Users/fcamblor/Documents/projects/my-project
   [email protected]
       [email protected]

(and looking at node_modules folder, this is the same)

And yes, I was going to play with glob files to include *.js files ... until I tried the passThrough you gave me earlier and which did the trick :)

Thanks btw.