如何在TypeScript Ionic项目中通过d.ts文件引入JavaScript文件？

下面是实操性的步骤，适配Ionic 5+和TypeScript 4.x及以上版本：

1. 存放JavaScript文件 #

将目标JS文件放到项目合适的目录，比如新建src/js/目录，放入my-utils.js示例文件：

// my-utils.js
export function greet(name) {
  return `Hello, ${name}!`;
}

export const DEFAULT_NAME = 'Guest';

2. 创建对应的类型声明文件（d.ts） #

在同一目录下创建同名.d.ts文件（如my-utils.d.ts），定义JS文件的类型：

// my-utils.d.ts
declare module './my-utils' {
  export function greet(name: string): string;
  export const DEFAULT_NAME: string;
}

如果JS文件未用ES模块导出，而是挂载到全局，声明文件写法如下：

// 全局变量声明方式
declare global {
  interface Window {
    MyUtils: {
      greet: (name: string) => string;
      DEFAULT_NAME: string;
    };
  }
}

// 必须添加此行让文件成为模块
export {};

3. 配置TypeScript编译规则 #

打开项目根目录的tsconfig.json，确保以下配置正确：

{
  "compilerOptions": {
    "allowJs": true, // 允许TypeScript处理JS文件
    "esModuleInterop": true, // 兼容CommonJS/ES模块导入逻辑
    "baseUrl": "./src", // 可选，简化路径导入
    "paths": {
      "@/*": ["*"] // 可选，用@代替src根路径
    }
  },
  "include": [
    "src/**/*", // 确保覆盖JS和d.ts文件所在目录
    "src/js/**/*"
  ]
}

4. 在Ionic代码中导入使用 #

如果是模块导出的JS文件，直接在组件/服务中导入：

// home.page.ts
import { greet, DEFAULT_NAME } from '../js/my-utils';
// 若配置了baseUrl，可简化为：import { greet } from '@/js/my-utils';

export class HomePage {
  constructor() {
    console.log(greet(DEFAULT_NAME)); // 输出 Hello, Guest!
  }
}

如果是全局挂载的JS文件，直接通过window访问：

// home.page.ts
export class HomePage {
  constructor() {
    console.log(window.MyUtils.greet('Ionic'));
  }
}

常见问题排查 #

• 若出现"找不到模块"错误，检查tsconfig.json的include是否包含了JS和d.ts文件的目录
• 确保d.ts文件中的模块路径与实际JS文件的相对路径一致
• 若是第三方JS库，可将声明文件放到src/types/目录，再在tsconfig.json的typeRoots中添加该目录

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