HarmonyOS RN库 TurboModule Codegen 编译类型错误

RN 库 TurboModule Codegen 编译类型错误

TurboModule 中，TS代码接口使用 Record Map Any类型，提示：

Module *: Unrecognized generic type ‘Record’ in NativeModule spec.

该如何解决？

codegen 脚本生成的 generated 中 import { Tag } from “…/…/ts” 的 from 路径如何修改？

HarmonyOS

zbw_apple

2024-08-23 09:59:28

浏览

回答 2

按赞同

按时间

zxjiu

codegen 脚本生成的 generated 中 import { Tag } from “…/…/ts” 的 from 路径由codegen自动生成，暂不支持修改

编译类型报错需要升级cli

2024-08-23 14:56:02

鱼弦CTO

在使用 React Native TurboModules 和 Codegen 生成代码时，可能会遇到一些类型错误或路径问题。这些问题通常与 TypeScript 类型定义和代码生成工具的配置有关。下面是针对你提到的问题的一些解决方案。

### 1. Unrecognized Generic Type ‘Record’ in NativeModule Spec

TurboModule 的 Codegen 在处理 TypeScript 类型时，有时候不支持泛型类型如 Record 或 Map。要解决这个问题，你可以将泛型类型转换为具体类型定义，这样可以确保代码生成工具能够正确解析。

#### 示例：

假设你原来的接口定义是这样的：

export interface MyModuleSpec extends TurboModule {
  getData(): Record<string, any>;
}1.
2.
3.

可以改为更具体的类型定义，例如：

export interface MyModuleSpec extends TurboModule {
  getData(): { [key: string]: any };
}1.
2.
3.

这样做的目的是帮助 Codegen 工具更好地理解并生成对应的代码。

### 2. 修改 Codegen 脚本生成的 Import 路径

当 Codegen 脚本生成的文件中包含不正确的导入路径时，可以通过以下几种方式进行修正。

#### 方法一：更新 tsconfig.json

确保你的 tsconfig.json 文件正确配置了模块解析规则，如 baseUrl 和 paths。例如：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.

如果 Tag 模块在 src/ts 目录下，可以通过这种方式告诉 TypeScript 如何解析模块路径。

#### 方法二：手动修改生成脚本

如果自动生成的文件路径总是不正确，你可以手动修改生成脚本（如 codegen）的配置，以确保生成正确的路径。

查找生成路径的逻辑，并进行修改。例如，如果是在 generate-specs.js 中，可以增加一个路径替换逻辑：

const fs = require('fs');
const path = require('path');

function fixImportPaths(filePath) {
  let content = fs.readFileSync(filePath, 'utf8');
  // 根据需要调整路径
  content = content.replace(/from "\.\.\/\.\.\/ts"/g, 'from "@/ts"');
  fs.writeFileSync(filePath, content, 'utf8');
}

// 假设 generated 文件在 output 目录下
const generatedDir = path.resolve(__dirname, 'output/generated');
fs.readdirSync(generatedDir).forEach(file => {
  if (file.endsWith('.ts')) {
    fixImportPaths(path.join(generatedDir, file));
  }
});1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

这样每次生成后都会自动修正路径。

### 3. 自动化脚本

通过自动化脚本，可以在生成文件后立即进行路径修正，这样可以避免手动重复操作。

#### 示例：

创建一个 post-codegen.js 脚本，并在你的代码生成流程中调用它：

const fs = require('fs');
const path = require('path');

const GENERATED_DIR = path.resolve(__dirname, 'output/generated');

// 替换函数
function replaceImportPaths() {
  const files = fs.readdirSync(GENERATED_DIR);
  files.forEach(file => {
    if (file.endsWith('.ts')) {
      const filePath = path.join(GENERATED_DIR, file);
      let content = fs.readFileSync(filePath, 'utf8');
      
      // 替换路径
      content = content.replace(/from "\.\.\/\.\.\/ts"/g, 'from "@/ts"');
      
      // 写回文件
      fs.writeFileSync(filePath, content, 'utf8');
    }
  });
}

// 执行替换
replaceImportPaths();1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

在你的 build 或 generate 脚本中添加对 post-codegen.js 的调用：

node post-codegen.js1.

### 总结

类型定义问题：将Record 和Map 等泛型类型转换为具体类型定义。
路径问题：通过更新tsconfig.json 或手动修改生成脚本来解决路径问题。
自动化处理：使用脚本自动修正生成代码中的路径问题。

通过这些方法，你应该能够解决 TurboModule Codegen 编译过程中的类型错误和路径问题。如果有更多问题或需要进一步的帮助，请随时提问！

2024-08-23 16:28:41

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS RN库 TurboModule Codegen 编译类型错误

订阅鸿蒙技术特刊，精选内容抢先看