Importing TypeScript modules in Flow

Question

We are in the process of migrating a front-end React application from Flow to TypeScript.

I have the Webpack and TS config setup to load TypeScript files and it all compiles and builds fine.

The flow check is performed separately (is not part of the build process) until all the files are switched to TypeScript but this is failing with errors of this nature:

src/SomeFlowModule.js:5
  5: import TypeScriptModule from './TypeScriptModule';
                           ^^^^^^^^^^^^^ ./TypeScriptModule. Required module not found

Is there a way to make Flow aware of imported TypeScript files and perhaps just treat them as any?

Answer 1

The solution I came up with was to add a declaration for TypeScript files:

declare module TsStub {
  declare var exports: any;
}

You'll need to reference this stub in your .flowconfig so Flow knows about it under the [libs] key. E.g. if it was saved in interfaces/TsStub.js I would just add this to .flowconfig:

[libs]
interfaces/

And then reference the stub in my .flowconfig:

module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(ts\|tsx\)$' -> 'TsStub'

I now need to import ts files with their extension (e.g. import myTsModule from 'my-ts-module.ts') but it does compile fine.

When I get around to converting the flow file to TS I just need to fix the extensions, but the compilers help you with this.