Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wujekbogdan opened this issue Oct 4, 2018 · 13 comments · Fixed by #4212 or #4346
Closed

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

wujekbogdan opened this issue Oct 4, 2018 · 13 comments · Fixed by #4212 or #4346
Labels
contribution welcome enhancement good first issue has PR scope: typescript

Comments

@wujekbogdan
Copy link

wujekbogdan commented Oct 4, 2018 •
edited
Loading

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
Copy link
Member

LinusBorg commented Oct 4, 2018 •
edited
Loading

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
Copy link
Contributor

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
Copy link
Member

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

@jacobg
Copy link

jacobg commented Mar 17, 2019

Yes please

@jcao02
Copy link

jcao02 commented May 26, 2019

Any news on this?

@NataliaTepluhina NataliaTepluhina mentioned this issue Jun 30, 2019
Merged
haoqunjiang pushed a commit that referenced this issue Jul 3, 2019
@NataliaTepluhina @haoqunjiang
feat(typescript): add convertJsToTs and allowJs options (#4212)
38debb4 
Close #2676
 
At the moment when we run `vue add`, Vue CLI renames all `*.js` files to `*.ts`. This PR introduces two new prompts on `@vue/cli-plugin-typescript` late-invokation:

1. `convertJsToTs`: if set to `true`, renames all `.js` files to `.ts`. Otherwise renames only `main.js` -> `main.ts`;
2. `allowJs`: if set to `true`, adds `allowJs: true` to TSConfig compiler options.
haoqunjiang pushed a commit that referenced this issue Jul 3, 2019
@NataliaTepluhina @haoqunjiang
feat(typescript): add convertJsToTs and allowJs options (#4212)
51e63cf 
Close #2676

At the moment when we run `vue add`, Vue CLI renames all `*.js` files to `*.ts`. This PR introduces two new prompts on `@vue/cli-plugin-typescript` late-invokation:

1. `convertJsToTs`: if set to `true`, renames all `.js` files to `.ts`. Otherwise renames only `main.js` -> `main.ts`;
2. `allowJs`: if set to `true`, adds `allowJs: true` to TSConfig compiler options.

(cherry picked from commit 38debb4)
@varna
Copy link

varna commented Jul 23, 2019

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
Copy link
Contributor

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

haoqunjiang added a commit to haoqunjiang/vue-cli that referenced this issue Jul 24, 2019
@haoqunjiang
fix: fix typo in typescript generator, convertAllFiles -> convertJsToTs
799c622 
fixes vuejs#2676 (comment)
@haoqunjiang haoqunjiang mentioned this issue Jul 24, 2019
Merged
haoqunjiang added a commit that referenced this issue Jul 25, 2019
@haoqunjiang
fix: fix typo in typescript generator, convertAllFiles -> convertJsTo…
8b7af38 
…Ts (#4346)

fixes #2676 (comment)
haoqunjiang added a commit that referenced this issue Aug 2, 2019
@haoqunjiang
fix: fix typo in typescript generator, convertAllFiles -> convertJsTo…
878c337 
…Ts (#4346)

fixes #2676 (comment)

(cherry picked from commit 8b7af38)
@ffxsam
Copy link
Contributor

ffxsam commented Oct 18, 2019 •
edited
Loading

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).

@haoqunjiang
Copy link
Member

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

@ffxsam
Copy link
Contributor

ffxsam commented Oct 18, 2019 •
edited
Loading

@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.

@haoqunjiang
Copy link
Member

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

Notice the last two prompts:
image

@jacekkarczmarczyk jacekkarczmarczyk mentioned this issue Oct 9, 2020
Open
@jeneser jeneser mentioned this issue Nov 13, 2020
Merged
9 tasks
@jeneser
Copy link
Contributor

jeneser commented Nov 13, 2020 •
edited
Loading

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

Notice the last two prompts:
image

@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
Copy link
Contributor

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: #6054

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
contribution welcome enhancement good first issue has PR scope: typescript
Projects
None yet
Milestone
No milestone
10 participants
@wujekbogdan @jacobg @bodograumann @LinusBorg @jcao02 @haoqunjiang @varna @ffxsam @jeneser @NataliaTepluhina