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;

 

 

0
5 comments

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

0

Convert to export produces

export default {
bar,
baz
}

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.

0

>Which 1) is wrong, this should not be a default export

 

why shouldn't it be a default export?

0

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?

 

0

>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

0

Please sign in to leave a comment.