147. 精读《@types react 值得注意的 TS 技巧》

1 引言

从 @types/react 源码中挖掘一些 Typescript 使用技巧吧。

2 精读

泛型 extends

泛型可以指代可能的参数类型,但指代任意类型范围太模糊,当我们需要对参数类型加以限制,或者确定只处理某种类型参数时,就可以对泛型进行 extends 修饰。

问题:React.lazy 需要限制返回值是一个 Promise<T> 类型,且 T 必须是 React 组件类型。

方案:

function lazy<T extends ComponentType<any>>(
  factory: () => Promise<{ default: T }>
): LazyExoticComponent<T>;

T extends ComponentType 确保了 T 这个类型一定符合 ComponentType 这个 React 组件类型定义,我们再将 T 用到 Promise<{ default: T }> 位置即可。

泛型 extends + infer

如果有一种场景,需要拿到一个类型,这个类型是当某个参数符合某种结构时,这个结构内的一种子类型,就需要结合 泛型 extends + infer 了。

问题:React.useReducer 第一个参数是 Reducer,第二个参数是初始化参数,其实第二个参数的类型是第一个参数中回调函数第一个参数的类型,那我们怎么将这两个参数的关系联系到一起呢?

方案:

### 确保安装 React 18 和对应类型的解决方案 为了确保在项目中使用 React 18 而不是更高版本(如 React 19),可以通过显式指定版本号的方式来控制依赖的安装。以下是具体的实现方式以及注意事项。 #### 显式指定 React类型定义的版本 通过在 `npm install` 命令中明确指明所需的版本号,可以有效避免意外安装高版本的情况。例如: ```bash npm install react@18.2.0 react-dom@18.2.0 --save ``` 这一步骤会将 React 和 `react-dom` 安装为生产依赖,并固定它们的版本为 `18.2.0`[^1]。 同样地,也需要为 TypeScript 类型定义文件指定相应的版本: ```bash npm install @types/react@18.2.47 @types/react-dom@18.2.18 --save-dev ``` 这里选择了与 React 18 兼容的类型定义版本 `18.2.x`,从而保证开发环境的一致性[^1]。 #### 配置 `.npmrc` 文件以锁定版本范围 为了避免未来的自动更新破坏当前设定好的版本约束条件,可以在项目的根目录下创建或者编辑现有的 `.npmrc` 文件,加入如下内容: ``` react@=18.2.0 @types/react@=18.2.47 react-dom@=18.2.0 @types/react-dom@=18.2.18 ``` 这样做的好处是在后续运行任何包含依赖解析的过程时都会遵循此处预设的规定,不会轻易改变原先选定的目标版本集合[^3]。 #### 使用 `resolutions` 字段进一步强化一致性保障 对于那些间接引入但又需要严格管控其确切形态的部分来说,借助 package.json 中新增加的一个特殊字段叫做 `resolutions` 就显得尤为重要了。比如下面的例子展示了怎样去统一整个项目里头涉及到的所有关于 `@types/react` 实例都指向同一个固定的修订级别之上: ```json { "scripts": { "preinstall": "npx npm-force-resolutions" }, "resolutions": { "@types/react": "18.2.47", "@types/react-dom": "18.2.18" } } ``` 注意这里的 `"preinstall"` 脚本调用了外部工具 `npm-force-resolutions` 来实际生效我们声明出来的偏好设置[^3]。 #### 排查可能存在的路径问题 假如即便做了以上全部安排之后依旧碰到了诸如 `'node_modules/@types/react/index.d.ts' is not a module.` 这样的报错消息,则可能是由于 IDE 缓存或者是构建工具未能及时刷新缓存所引起的。此时可尝试重启 VS Code 并清理 Vite 的中间产物后再重试访问站点链接地址列表所示的服务端口位置[^4]: ```bash rm -rf node_modules/.cache vite/dist vite ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值