Next.js从JS迁移TS：如何用ES6语法实现TypeScript导入？

以下是几个简洁的处理方案，适配你不想用require()、也不想全量生成.d.ts的需求：

1. 为单个JS模块手动添加类型声明文件 #

在目标JS文件（比如cta.js）的同目录下，创建同名的.d.ts文件（cta.d.ts），根据模块的导出内容定义类型：

• 如果模块默认导出一个函数：

  export default function cta(): void;
  

• 如果导出多个变量/函数：

  export const buttonText: string;
  export function handleClick(): void;
  

• 过渡阶段暂时不确定类型时，也可以先声明为any：

  declare const content: any;
  export default content;
  

这种方式精准控制单个模块的类型，不会生成冗余文件。

2. 导入时使用类型断言（临时过渡方案） #

如果只是想快速消除报错，不立即编写完整类型，可以用类型断言直接指定导入模块的类型：

import cta from '../../global/Navbar/cta.js' as typeof import('../../global/Navbar/cta.js');

或者临时断言为any（不推荐长期使用，仅作过渡）：

import cta from '../../global/Navbar/cta.js' as any;

3. 调整tsconfig.json配置适配JS模块 #

在tsconfig.json中添加/修改以下配置：

{
  "compilerOptions": {
    "allowJs": true, // 允许TS项目导入JS文件
    "checkJs": false // 关闭对JS文件的类型检查（避免JS文件本身触发类型报错）
  }
}

开启allowJs后，TS会自动识别JS模块，不会再报"找不到声明文件"的错误。如果团队允许隐式any，可以同时设置"noImplicitAny": false，彻底消除相关报错；若要保持严格类型，还是结合手动声明文件更合适。

4. 批量声明同路径下的未类型化模块 #

如果有一批同目录下的JS模块需要处理，可以在项目根目录创建一个全局声明文件（比如global.d.ts），用通配符匹配路径批量声明类型：

declare module '../../global/Navbar/*' {
  const value: any;
  export default value;
}

这样该路径下所有JS模块都会被赋予any类型，快速消除批量报错，适合项目转换的过渡阶段。

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