ReScript、TypeScript：找不到模块“@rescript/react/src/ReactDOM.gen”或其相应的类型声明

Question

我正在逐步将一个应用程序用 React to TypeScript 重写为 ReScript。我已经在 ReScript 中实现了几个组件，但这是第一个，我将其用作ReactDOM.Style.t组件的属性。

这是我的最小化组件代码：

@genType
@react.component
let make = (~sx: option<ReactDOM.Style.t>=?) => {
  <div></div>
}

ReScript 编译良好（除了未使用的警告sx，但我们可以忽略它）。

我生成了以下内容bs.js，看起来没问题：

@genType
@react.component
let make = (~sx: option<ReactDOM.Style.t>=?) => {
  <div></div>
}

.gen.tsx以及导致问题的以下相应文件：

/* TypeScript file generated from InhypedIcon.res by genType. */
/* eslint-disable import/first */


import * as React from 'react';

// @ts-ignore: Implicit any on import
import * as InhypedIconBS__Es6Import from './InhypedIcon.bs';
const InhypedIconBS: any = InhypedIconBS__Es6Import;

import type {Style_t as ReactDOM_Style_t} from '@rescript/react/src/ReactDOM.gen';

// tslint:disable-next-line:interface-over-type-literal
export type Props = { readonly sx?: ReactDOM_Style_t };

export const make: React.ComponentType<{ readonly sx?: ReactDOM_Style_t }> = InhypedIconBS.make;

这无法编译，我收到 TypeScript 错误：

TypeScript error in /app/src/icons/InhypedIcon.gen.tsx(11,48):
Cannot find module '@rescript/react/src/ReactDOM.gen' or its corresponding type declarations.  TS2307

     9 | const InhypedIconBS: any = InhypedIconBS__Es6Import;
    10 |
  > 11 | import type {Style_t as ReactDOM_Style_t} from '@rescript/react/src/ReactDOM.gen';
       |                                                ^
    12 |
    13 | // tslint:disable-next-line:interface-over-type-literal
    14 | export type Props = { readonly sx?: ReactDOM_Style_t };

我确实明白，TS 找不到rescript/react/src/ReactDOM.gen，但我不太清楚为什么。有什么想法可以解决这个问题吗？

我的包版本：

node: v16.6.2

"typescript": "^4.1.2"
"rescript": "^9.1.4"
"@rescript/react": "^0.10.3"

谢谢。

Answer 1

这是因为 GenType 不附带用于 React 的 rescript 绑定，因此如果您需要它，您必须自己键入它（参见导入类型的文档）：

@genType.import(("react", "CSSProperties"))
type reactStyle = ReactDOM.Style.t

@genType
@react.component
let make = (~sx: option<reactStyle>=?) => {
  <div></div>
}

这应该有效。