TypeScript项目中使用无类型声明纯JS模块的最佳实践是什么？

快速兼容方案（满足临时正常使用需求） #

新增.d.ts声明模块是当前场景下最快的可行方案，操作步骤如下：

• 在项目src目录下新建custom.d.ts文件（如果已有全局声明文件可以直接复用）
• 写入以下任意一种声明内容即可：
  1. 最简写法（完全关闭该模块的类型校验）：

  declare module 'react-console-emulator';
  

  2. 保留组件基础类型识别写法：

  declare module 'react-console-emulator' {
    import type { ComponentType } from 'react';
    const Terminal: ComponentType<any>;
    export default Terminal;
  }
  

• 确认tsconfig.json的include配置包含该声明文件路径，示例配置：

{
  "include": ["src/**/*", "src/custom.d.ts"]
}

配置完成后重启TypeScript服务即可正常在JSX中使用该组件，不会再出现类型报错。

长期维护最优方案 #

如果项目需要长期维护，推荐补全组件的完整类型声明，替代上面的any类型，既可以避免类型报错，还能享受TS的类型提示和校验能力：

declare module 'react-console-emulator' {
  import type { ComponentType } from 'react';
  // 按照组件文档的入参说明补全所有属性类型
  interface TerminalProps {
    // 命令映射表，必填
    commands: Record<string, (...args: string[]) => void | string | Promise<string>>;
    // 提示符文本，可选
    promptLabel?: string;
    // 是否自动聚焦，可选
    autoFocus?: boolean;
    // 欢迎语，可选
    welcomeMessage?: string;
    // 补充你用到的其他属性
  }
  const Terminal: ComponentType<TerminalProps>;
  export default Terminal;
}

这样处理后，使用组件时传入错误类型的属性会被TS自动识别提醒，比直接使用any类型更安全。

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