Vue-cli: Do not rename all *.js files to *.ts after running `vue add @vue/typescript` - give users a choice to enable `allowJs:true` mode.

[wujekbogdan]

What problem does this feature solve?

This feature makes the JS -> TypeScript migration easier

What does the proposed API look like?

At the moment when we run @vue/typescript then vue CLI adds all required dependencies and creates all required configuration files - this is fine. But it also renames all *.js files to *.ts. IMO it doesn't help with anything. Such an automation only makes sense if we have a fresh Vue project, but if we already have an existing application, then it doesn't make the migration any easier. It's very unlikely that existing files will compile successfully. Missing types and different import syntax will cause lots of compilation failures.

So I suggest that after the vue add @vue/typescript command is executed:

• the CLI should as whether to rename all the *.js files to *.ts
• the CLI should ask whether to enable the allowJs: true mode.
• the only file that should be renamed is the main.js file.

allowJs: true is the best way to migrate a JS project to TypeScript progressively. Thanks to this we can still use existing JS modules as they are, write new modules in TypeScript, and migrate existing ones one by one.

It's not my personal opinion. Setting allowJs to true is recommended in the official Migration from Javascrtipt guide.

[LinusBorg]

is the best way to migrate a JS project to TypeScript progressively

Sure. But vue create does create a fresh project, there's nothing to migrate.

If you want rot "copy over" an existing project into this new one, can't you set allowJs: true and add your old JavaScript files? You will remove all of the generated boilerplate files except maybe main(j|ts) anyway, right?

So I may be missing something? I don't the the problems you are speaking of.

[bodograumann]

This is not about creating a new project with vue-cli. This is for when you have an existing vue project and then call vue add @vue/typescript. Now all the .js files are renamed to .ts, which is not what I would have expected.
Also I get errors for those files, because obviously they are not proper typescript.

[LinusBorg]

Oh, that's indeed a good point that I haven't had thought about!

[jacobg]

Yes please

[jcao02]

Any news on this?

[varna]

I assume that #4212 was merged to v4.0.0-beta.0?
If so, then PR doesn't work for me. I do get the option to skip renaming, but all my files still get renamed.

[bodograumann]

Yeah, @varna, you are not mistaken. In convert.js the option is called convertAllFiles while everywhere else it is called convertJsToTs.

[ffxsam]

This is extremely annoying. Even in an existing project, when I run vue upgrade or vue add <plugin>, it renames all my .js files to .ts. Sometimes this is not good, as I'm using things like hygen which expects the necessary files to be JS, not TS (same applies for Storybook config file).

[sodatea]

@ffxsam but I think this option has already been shipped since 3.10 or 4.0.0-beta.1?

[ffxsam]

@sodatea It doesn't seem so. I literally just upgraded my vue-cli 3.x project, and every time I ran vue add, it mass-renamed my files.

I'm using @vue/cli version 4.0.4.

[sodatea]

vue add typescript?
Here's my screencast: https://asciinema.org/a/0JWOnwJZmlygrWbVw0i9gC5j1

Notice the last two prompts:

[jeneser]

vue add typescript?
Here's my screencast: https://asciinema.org/a/0JWOnwJZmlygrWbVw0i9gC5j1

Notice the last two prompts:

@sodatea Yeah, if you have @vue/cli-plugin-eslint in your devDependencies, the convertJsToTs prompt will be filtered, it looks like a bug. prompts.js#L40. A PR has been created. #6053

[bodograumann]

You are right about that @jeneser. That part of the code was meant to remove the tslint prompt, so was broken for a while and is completely unneeded today.
I have created a fix PR: https://github.com/vuejs/vue-cli/pull/6054