如何格式化react-native-webview注入的JS并保留类型补全与可测试功能？

方案1：模板字符串+类型标注（适合中等规模注入代码） #

该方案不需要额外依赖，仅通过简单配置就能实现语法高亮和类型补全：

1. 先新增WebView运行环境的类型声明文件webview-env.d.ts，补全全局变量类型：

declare interface Window {
  // 补全react-native-webview内置通信对象类型
  ReactNativeWebView: {
    postMessage: (data: string) => void
  }
  // 你需要自定义挂载的全局变量也可以在这里声明类型
  customAPI: {
    handleUserAction: (content: string) => void
  }
}

2. 编写注入代码时在模板字符串前添加/* javascript */标注，主流IDE会自动识别并提供JS语法高亮、类型补全能力：

const injectedJavaScript = /* javascript */ `
  (function() {
    // 这里写DOM操作、通信逻辑都会有完整的类型提示
    document.addEventListener('click', (e) => {
      if (e.target.tagName === 'A') {
        e.preventDefault()
        window.ReactNativeWebView.postMessage(JSON.stringify({
          type: 'link_click',
          url: e.target.href
        }))
      }
    })

    // 自定义挂载的方法也会有类型校验
    window.customAPI = {
      handleUserAction: (content) => {
        console.log('用户操作：', content)
      }
    }
  })()
`

方案2：独立TS文件+构建工具转字符串（适合大规模、需测试的注入代码） #

如果注入逻辑非常复杂，需要做单元测试，可以将注入代码和RN侧代码完全分离，通过构建工具自动转成字符串使用：

1. 新建独立的注入逻辑文件injected-script.ts，完全按照普通前端TS代码的写法写逻辑：

// injected-script.ts
document.addEventListener('DOMContentLoaded', () => {
  const titleNode = document.querySelector('h1')
  if (titleNode) {
    titleNode.style.fontSize = '18px'
  }
  window.ReactNativeWebView.postMessage('页面加载完成')
})

// 可单独给该文件写单元测试，用jsdom模拟DOM环境即可直接运行测试，不需要处理字符串
export {}

2. 在RN组件中通过构建工具的raw导入能力直接拿到文件的字符串内容，传给WebView即可：

// Vite 环境导入写法
import injectedJavaScript from './injected-script.ts?raw'
// Webpack 环境可配置asset/source规则实现同样效果

// 组件中直接使用
<WebView
  injectedJavaScript={injectedJavaScript}
  // 其余WebView配置
/>

多逻辑组合方案 #

如果需要拆分多段注入逻辑，可以写简单的工具函数合并，避免重复代码：

const combineInjectedScripts = (...scripts: string[]) => {
  return `(function() {${scripts.join(';\n')}})()`
}

// 可按需组合不同功能的注入逻辑
const finalInjectedJS = combineInjectedScripts(
  clickInterceptorScript,
  domModifyScript,
  customAPIScript
)

以上两种方案完全满足你提出的两项要求：

• 语法可读性高：注入代码和普通前端JS/TS写法完全一致，不需要处理字符串转义、拼接问题
• 支持类型补全：配合TS类型声明可以获得完整的语法校验、类型提示，避免拼写错误等低级bug

内容的提问来源于stack exchange，提问作者fengelhardt