如何将TypeScript转为JS字符串注入React Native WebView？

1. 内联TypeScript转JavaScript的工具 #

直接使用TypeScript官方提供的transpileModule API即可实现，无需额外安装第三方库（只要项目已安装TypeScript）。该API能将TypeScript代码字符串直接转换为JavaScript代码字符串，完美适配你的内联转换需求。

2. 正确序列化JS代码为字符串的方法 #

你之前对JS函数使用toString()无效，是因为运行时的函数对象已是编译后的JS代码，toString()返回的内容可能包含编译器添加的额外包装代码，且无法从TS函数直接获取纯净的JS代码字符串。正确做法是在代码层面处理TS到JS的转换，直接生成JS代码字符串。

完整实现示例 #

my-injection-code.ts

import * as ts from 'typescript';

// 将你的TS方法以字符串形式定义
const myTSMethodCode = `
const myTSMethod = (param: string): number => {
  // 这里编写你的TypeScript逻辑
  return param.length;
};
`;

// 使用TypeScript API转换为JS代码
const transpiledResult = ts.transpileModule(myTSMethodCode, {
  compilerOptions: {
    target: ts.ScriptTarget.ES6, // 根据WebView兼容需求选择目标版本
    module: ts.ModuleKind.None,
  },
});

// 获取转换后的纯净JS代码字符串
const myMethodAsStringOfJS = transpiledResult.outputText;

// 拼接最终注入WebView的代码
const injectionCode = `
  ${myMethodAsStringOfJS}

  const messageEventListenerFn = (e) => {
    // 调用转换后的JS方法
    const result = myTSMethod(e.data);
    console.log('处理结果:', result);
  };
  document.addEventListener('message', messageEventListenerFn);
`;

export { injectionCode };

MyWebviewScreen.tsx

import React, { useRef } from 'react';
import WebView from 'react-native-webview';
import { Button } from 'react-native';
import { injectionCode } from './my-injection-code';

type Props = {};

const MyWebviewScreen = ({}: Props) => {
    const webviewRef = useRef<WebView>(null);

    const handlePress = () => {
        webviewRef.current?.injectJavaScript(injectionCode);
    };

    return (
      <>
        <Button title="注入代码" onPress={handlePress} />
        <WebView
            ref={webviewRef}
            injectedJavaScriptBeforeContentLoaded={injectionCode}
            source={{ uri: 'https://example.com' }} // 替换为你的目标URL
        />
      </>
    );
};

export default MyWebviewScreen;

额外提示 #

• 若注入的TS代码依赖其他模块，可单独编写一个TS文件，用TypeScript编译器提前编译为JS文件，再读取JS文件内容作为字符串注入，这样更高效且便于维护。
• 确保transpileModule的编译选项与项目TS配置一致，避免出现语法兼容问题。

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