Flow to TypeScript Declaration Converter | Generate .d.ts Files

📘 Flow to TypeScript Declarations (.d.ts)

Convert Flow types & functions thành TypeScript declaration file (declare type / declare function).

📝 Input Flow Code:

Use T[] syntax instead of Array<T>

Convert $ReadOnly<T> to Readonly<T>

Add export in declarations

📤 Output TypeScript Declarations:

// .d.ts declarations will appear here...

💡 Example Flow Samples:

📄 Simple Types

Basic type definitions

📦 Exact Types

Exact objects {| |}

🧪 Functions

Function signatures

Generate Accurate TypeScript Definitions from Flow

When migrating a library or integrating a Flow-based package into a TypeScript project, you need reliable type definitions. Our Flow to TypeScript Declaration tool specifically focuses on extracting type logic to create clean .d.ts files. It bridges the gap between the two ecosystems, allowing your TypeScript projects to consume Flow-typed code with full type safety.

Key Features of the Declaration Generator

Automatic .d.ts Formatting: Outputs valid TypeScript declaration syntax, including export and declare keywords.
Namespace Handling: Intelligently manages Flow modules and converts them into TypeScript namespaces or module declarations.
Advanced Type Mapping: Converts Flow's unique syntax like $Exact, $Shape, and Class types into their nearest TypeScript equivalents.
Library-Ready Output: Generates definitions suitable for publishing to DefinitelyTyped or including in your @types folder.

How to Convert Flow to .d.ts

Paste Flow Types: Input your Flow interfaces, types, and exported definitions into the editor.
Analyze: Our engine parses the Flow AST to identify public API surfaces and internal types.
Generate: Click convert to see the structured TypeScript declaration output.
Save: Copy the result and save it as a index.d.ts file in your project.

Why Use .d.ts Files for Migration?

You don't always need to rewrite your entire logic to enjoy TypeScript support. Using declaration files allows you to maintain the original Flow source while providing a "type bridge" for TypeScript users.

1. Support for Legacy Libraries

If you have a stable library written in Flow, you can provide TypeScript support without changing a single line of your source code. Simply generate a .d.ts file and include it in your package distribution.

2. Facilitate Incremental Migrations

In large-scale migrations, you may not be ready to convert every .js file to .ts. By generating declarations for your Flow modules, you allow new TypeScript parts of your app to interact with legacy code seamlessly.

3. Maintain Type Integrity

Manual conversion of complex library types is prone to error. Our automated tool ensures that the complex relationships between types in Flow are preserved as accurately as possible within the TypeScript ecosystem.

Frequently Asked Questions

How does it handle Flow's Private/Opaque types?

The converter attempts to map Flow's opaque types to TypeScript's "Branded Types" or simply aliases, depending on the visibility of the original type.

Can I generate declarations for React components?

Yes. The tool recognizes Flow React prop types and converts them into React.ComponentType or React.FC definitions in the resulting declaration file.

Does this tool support Flow's "Maybe" types in declarations?

Absolutely. ?T in Flow is consistently mapped to T | null | undefined in the generated .d.ts to maintain the highest level of strictness.

Pro Tips for Library Maintainers

Bundle with Package: Include the generated .d.ts file in your package.json under the "types" or "typings" field so TypeScript users can find it automatically.
Check Module Exports: Ensure your Flow export statements are correctly captured; the tool supports both CommonJS-style and ESM exports.
Verify Utility Types: After generation, double-check complex types like $Diff or $ObjMap, as these may require specific TypeScript generic logic to function identically.