TypeScript-React 高级应用指南：杂项与进阶技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00999/article/details/148324912

TypeScript-React 高级应用指南：杂项与进阶技巧

react Cheatsheets for experienced React developers getting started with TypeScript 项目地址: https://gitcode.com/gh_mirrors/rea/react

前言

在 React 与 TypeScript 结合开发应用时，除了核心的组件开发外，我们还会遇到许多周边问题需要解决。本文将深入探讨这些"杂项"问题，帮助开发者提升开发效率和代码质量。

组件库开发中的 PropTypes

虽然 TypeScript 提供了类型检查，但在开发可复用的组件库时，PropTypes 仍然有其价值：

interface MyComponentProps {
  autoHeight: boolean;
  secondProp: number;
}

export class MyComponent extends React.Component<MyComponentProps, {}> {
  static propTypes = {
    autoHeight: PropTypes.bool,
    secondProp: PropTypes.number.isRequired,
  };
}

为什么需要同时使用？

为 JavaScript 用户提供运行时类型检查
在开发环境中提供额外的错误提示
某些工具（如 React DevTools）会读取 PropTypes

组件注释的最佳实践

良好的注释可以极大提升代码可维护性，TypeScript 支持 TSDoc 注释格式：

interface MyComponentProps {
  /** 
   * 控制组件是否自动调整高度
   * @default true
   */
  autoHeight?: boolean;
}

/**
 * 这是一个功能强大的组件，支持以下特性：
 * - 自动高度调整
 * - 响应式布局
 * - 自定义样式
 */
export function MyComponent({ autoHeight = true }: MyComponentProps) {
  return <div>示例组件</div>;
}

注释的好处：

IDE 智能提示中显示详细说明
自动生成文档
便于团队协作

命名空间组件模式

对于相关联的组件，可以使用命名空间模式组织代码：

const Form = ({ children }: { children: React.ReactNode }) => (
  <form>{children}</form>
);

const Input = (props: React.InputHTMLAttributes<HTMLInputElement>) => (
  <input {...props} />
);

// 导出组合组件
export default Object.assign(Form, { Input });

使用方式：

<Form>
  <Form.Input type="text" />
</Form>

优势：

逻辑相关的组件组织在一起
减少导入语句数量
更清晰的组件层级关系

设计系统开发工具

构建设计系统时，推荐以下工具：

Docz
- 专为组件文档设计
- 开箱即用的 TypeScript 支持
- 支持 Markdown 和 MDX
Storybook
- 成熟的组件开发环境
- 丰富的插件生态
- 自动生成 PropTypes 文档

选择建议：

快速原型开发 → Docz
企业级设计系统 → Storybook

从 Flow 迁移到 TypeScript

迁移过程需要注意：

工具辅助
- 使用 flow-to-typescript 转换基础类型
- 手动调整复杂类型定义
常见差异
- 类型推断策略不同
- 泛型语法差异
- 模块系统处理方式
迁移策略
- 逐步迁移，文件 by 文件
- 设置混合类型检查模式
- 建立类型测试防止回归

代码格式化配置

Prettier + TypeScript 的最佳实践：

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always"
}

集成建议：

配合 husky 实现提交前自动格式化
与 ESLint 配合使用（注意规则冲突）
团队统一配置

类型测试实践

确保类型定义的正确性：

测试工具
- dtslint：微软官方工具
- tsd：轻量级类型断言
- dts-jest：结合 Jest 生态
测试场景
- 公共 API 边界类型
- 复杂泛型约束
- 类型工具函数

示例：

import { expectType } from 'tsd';

expectType<string>(Math.random() > 0.5 ? 'string' : 'other string');

处理非 TypeScript 库

当使用无类型定义的第三方库时：

快速解决方案

// global.d.ts
declare module 'untyped-library';

完整类型定义

declare module 'untyped-library' {
  export function doSomething(options: {
    count: number;
    debug?: boolean;
  }): Promise<void>;
}

进阶技巧：

查看库的源码推断类型
参考相似库的 DefinitelyTyped 定义
提交类型定义回社区

编译性能优化

提升大型项目编译速度：

TypeScript 配置
- 启用 incremental 编译
- 使用项目引用(Project References)
- 适当放宽 strict 模式
工具链优化
- 升级到最新 TypeScript 版本
- 使用 ts-loader 的 transpileOnly 模式
- 考虑使用 esbuild-loader 加速转译
架构优化
- 将类型检查与打包分离
- 按需加载类型定义
- 模块联邦拆分大型项目