Migrating JS to TS
Hi,
I'm migrating several projects from plain pre Node 14 JS to TypeScript, and I find myself doing the exact same repetitive tasks time after time after time:
1. Rename file from foo.js to foo.ts
2. Hover over each `require` statement and use the "convert to import" wizard
3. Fix all problems from step 2 because "convert to import" neither destructured imported functions nor used `import * as foo`, but instead resulted in some implicit default importing (maybe this works with esModuleInterOp?)
import foo from './foo';
foo.bar();
foo.baz();
... so usually this means I will manually replace the import statement with destructured syntax, and then search&replace to remove the `foo.` prefix:
import {bar, baz} from './foo';
bar();
baz();
alternatively
import * as foo from './foo';
foo.bar();
foo.baz();
4. For each member in `module.exports = { ... }`, add `export` keyword to corresponding function or symbol, and remove the entire `module.exports` block
Only after these bulk tasks can I concentrate on adding typings and otherwise taking advantage of TS functionality etc.
Are there any plans for built-in functionality to perform some of these simple tasks, such as a Refactor -> Migrate to TypeScript context menu? Or is there a recommended plug-in that handles this?
Also, side-note, but a very annoying bug is that if there is an inline `require` statement like this:
const baz = require('./foo').bar
... then using "convert to import statement" produces this:
import {bar} from './foo';
const baz = bar.bar;
instead of
import {bar} from './foo';
const baz = bar;
Please sign in to leave a comment.
>For each member in `module.exports = { ... }`, add `export` keyword to corresponding function or symbol, and remove the entire `module.exports` block
did you try the Convert to export intention on
module.exports
?>Are there any plans for built-in functionality to perform some of these simple tasks, such as a Refactor -> Migrate to TypeScript context menu? Or is there a recommended plug-in that handles this?
Nothing I'm aware of; you can try searching for the corresponding tools on the web, see https://github.com/gregjacobs/js-to-ts-converter, for example
>Also, side-note, but a very annoying bug is that if there is an inline `require` statement like this:
can't reproduce; please share a complete code snippet (both export and import definitions)
Convert to export produces
Which 1) is wrong, this should not be a default export and 2) I want each exported function to have the export keyword locally, not collected at the end.
>Which 1) is wrong, this should not be a default export
why shouldn't it be a default export?
If a module exports two functions foo and bar, I don't want to export a default object containing foo and bar, I want to export foo and bar individually.
I may be wrong, but some configurations would have problems using import {foo, bar} from 'my-module'; if it's exported as a default object with members foo and bar, as opposed to two separately exported functions foo and bar. I guess this is related to esModuleInterop?
>I may be wrong, but some configurations would have problems using import {foo, bar} from 'my-module'; if it's exported as a default object with members foo and bar
sure using named import here is not correct, but
import myModule from "./myModule";
const MyClass = myModule.MyClass;
const OtherClass = myModule.OtherClass
is fine