Handling TypeScript in Vue 3 to React with VuReact

Introduction

VuReact offers a sophisticated compiler toolchain designed for developers who are transitioning projects from Vue to React, or who prefer using Vue 3 syntax within React. This article delves into how VuReact manages top-level TypeScript declarations during the compilation process, ensuring a seamless migration.

Understanding TypeScript Declarations in Vue

In Vue 3, top-level TypeScript declarations within the <script setup> block, such as interfaces, types, or enums, serve as static language constructs and do not directly influence runtime behavior. These declarations are pivotal for ensuring type safety but remain purely static.

VuReact’s Approach to Compilation

Hoisting Declarations

VuReact employs static analysis to handle these TypeScript declarations effectively. It hoists them outside the React component, preserving them at the module level. This approach maintains their visibility and prevents interference with runtime logic. Here's how it's achieved:

• Vue Example

  <script setup lang="ts">
  export interface ExampleInterface { /* ... */ }
  
  enum ExampleEnum { /* ... */ }
  
  function func() {
    type ExampleType = { /* ... */ };
  }
  </script>
  

• Compiled React Example

  export interface ExampleInterface { /* ... */ }
  
  enum ExampleEnum { /* ... */ }
  
  const Example = memo(() => {
    function func() {
      type ExampleType = { /* ... */ };
    }
    return <></>;
  });
  

Preserving TypeScript Semantics

The hoisting process ensures that top-level type declarations are maintained outside the component, while inner type declarations stay within their function scope. This strategy allows VuReact to preserve the original TypeScript semantics without altering the runtime architecture of the React component.

Conclusion

Additional Resources

• Documentation
• GitHub Repository