How does VuReact handle Vue 3's top-level TypeScript declarations in React?

#react #vue #webdev #javascript

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax.

In this article, we will look at how VuReact handles top-level TypeScript declarations when compiling Vue 3 code to React.

Before We Start

To keep the examples easy to read, this article follows two simple conventions:

All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.
The discussion assumes you are already familiar with TypeScript.

Compilation Mapping

Top-level TypeScript declarations -> hoisted outside the React component

In Vue, top-level TypeScript declarations inside <script setup> such as interface, type, or enum are purely static language constructs. They do not produce runtime behavior.

VuReact performs static analysis on those declarations and hoists them outside the generated React component so they remain at module scope, preserve their intended visibility, and do not interfere with runtime logic.

<script setup lang="ts">
export interface ExampleInterface { /* ... */ }

enum ExampleEnum { /* ... */ }

function func() {
  type ExampleType = { /* ... */ };
}
</script>

Compiled React

export interface ExampleInterface { /* ... */ }

enum ExampleEnum { /* ... */ }

const Example = memo(() => {
  function func() {
    type ExampleType = { /* ... */ };
  }

  return <></>;
});

As the example shows, top-level type declarations are preserved outside the component as module-level TypeScript declarations, while inner type declarations remain inside their original function scope.

That allows VuReact to preserve TypeScript semantics without introducing unnecessary changes to the runtime structure of the compiled React component.