TypeScript如何从另一文件同时导入类型定义与函数，兼容p5.js执行顺序

最优实现方案 #

你可以根据项目规模二选一，两种都可以解决类型+函数统一导入的问题，同时规避p5生命周期函数加载异常的问题。

方案1：TypeScript全局命名空间（适配现有代码，改动最小）

这个方案不需要修改现有业务逻辑，仅调整lib的导出方式和HTML引入规则即可：

1. 重写lib.ts代码，移除原来的全局声明、export default、手动挂载window的逻辑，直接定义全局命名空间：

namespace lib {
  // 类型定义统一放在types子命名空间
  export namespace types {
    export interface example {
      // 你的接口字段
    }
    // 其余接口直接在这里扩展
  }
  // 工具函数统一放在functions子命名空间
  export namespace functions {
    // 工具函数需要加export暴露
    export function yourUtil() {
      // 函数逻辑
    }
  }
}

2. 调整HTML脚本引入顺序，移除lib的type="module"和async属性，保证脚本同步按顺序加载：

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
<!-- 按顺序先加载lib，再加载sketch -->
<script src="./dist/lib.js"></script>
<script src="./dist/sketch.js"></script>

3. sketch.ts中直接调用即可，保留三斜线引用即可获得完整类型提示：

/// <reference path="./lib.ts" />

// 直接使用类型
const testData: lib.types.example = {}
// 直接调用工具函数
lib.functions.yourUtil()

// p5生命周期函数正常写，和单文件开发行为完全一致
function setup() {
  createCanvas(400,400)
}

这个方案的优势：

• 类型和运行时函数统一通过lib命名空间暴露，不需要写两次导出声明
• 脚本严格同步加载，完全不会影响p5对全局生命周期函数的检测逻辑
• 无额外依赖，改动成本极低

方案2：ES模块 + p5实例模式（适合大型项目，无全局污染）

如果后续需要接入前端工程化工具，推荐用p5实例模式规避全局生命周期函数的检测限制，完全使用ES模块化开发：

1. lib.ts正常用ES模块导出内容：

export namespace types {
  export interface example {
    // 接口字段
  }
}
export namespace functions {
  export function yourUtil() {}
}

2. sketch.ts改为模块写法，导入依赖后手动实例化p5：

import { types, functions } from './lib.js'

// 所有p5逻辑都写在实例回调内
const sketch = (p: p5) => {
  p.setup = () => {
    p.createCanvas(400,400)
  }
  p.draw = () => {
    p.background(220)
  }
  p.mouseClicked = () => {
    // 点击事件逻辑
  }
}

// 手动初始化p5实例
new p5(sketch)

3. HTML仅需引入sketch作为模块即可，无需单独加载lib：

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
<script type="module" src="./dist/sketch.js"></script>

这个方案的优势：

• 完全符合ES模块化规范，无全局变量污染
• 支持按需导入，适合代码规模较大的项目维护

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