How to import *.ts file from *.js file?

[samreid]

In phetsims/tasks#987 (comment) I mentioned problems in importing TypeScript files from JavaScript. @jonathanolson mentioned we would like to use TypeScript in central common-code files early on. I mentioned one approach to address that problem (Option 1), but I think it warrants elaboration and discussion:

Options:

1. Make every file *.ts, marking things with // @ts-nocheck so we don't have 50,000 errors all at once. I'm not sure what other implications may come with this large batch change.
2. Import TS from JS using a *.js suffix, like import ControlPanel from './ControlPanel.js'; (even though ControlPanel is a *.ts file). That works but WebStorm doesn't know how to highlight/autocomplete/navigate it. I opened a WebStorm issue here: https://youtrack.jetbrains.com/issue/WEB-51357 and I observed that Sublime (with the TypeScript plugin) works properly for this case.
3. Import TS from JS using no suffix, like import ControlPanel from './ControlPanel';. That works but only if you have your web server set to default to serve *.js for missing files. For instance, http-server can specify --ext js to get this to work. Not sure how to fix that for all servers we use, or to push that requirement to all users of the phet codebase.
4. Add a post-processing step that adds *.js suffixes in import statements after compilation. This complicates the toolchain, we would need another output directory and a way to watch it, etc. Some of this is discussed in https://github.com/microsoft/TypeScript/issues/16577, and there are some 3rd party tools for it.
5. Output build artifacts back to the source directory, so that importing *.js for a *.ts file actually finds the built file. But then navigation is incorrect (navigates to the built file instead of the source file).
6. Another way around this would be to forego testing in "unbuilt" mode, but we are pretty used to that.

For a learning/ramping-up phase, would it be best to mix file types for a while?

[samreid]

As a test, I converted Property.js to Property.ts and everything worked OK except for Webstorm navigation from files that import Property.js. Maybe the best path forward for this issue is to create a minimal reproducible case and submit as a bug report to Webstorm.

[samreid]

I reported this to WebStorm and it is fixed in the latest EAP https://youtrack.jetbrains.com/issue/WEB-51357. It already works fine in Sublime. This issue can be closed.

[samreid]

Confirmed fixed in WebStorm 2021.2