如何配置TypeScript全局类型避免单文件重复导入Engine类型

核心操作步骤 #

你对全局类型文件的作用认知基本正确，只是需要注意模块声明文件的全局类型挂载写法，按以下步骤配置即可：

• 找到项目中的全局类型声明文件，通常是根目录下的typings.d.ts/global.d.ts，如果没有就新建一个，确认该文件路径被包含在tsconfig.json的include配置项中。
• 在该声明文件中添加以下代码：

// 先从依赖包导入需要全局使用的类型
import type { Engine } from "tsparticles-engine";

declare global {
  // 把类型挂载到全局命名空间，推荐加前缀避免和其他同名类型冲突
  export type TsparticlesEngine = Engine;
  // 如果确认项目无其他同名Engine类型，也可以直接用原名挂载
  // export type Engine = Engine;
}

// 这行不能漏，用来标记当前文件是TS模块
export {};

• 配置完成后，所有TS/TSX/Vue文件里都可以直接使用全局挂载的类型，不需要再单独写导入语句，原组件代码可以简化为：

<style lang="scss">
</style>

<template>
    <Particles id="tsparticles"
               :particlesInit="particlesInit"
               url="/assets/particles.json" />
</template>

<script lang="ts">
import { loadFull } from "tsparticles";

export default {
    methods: {
        particlesInit: (engine: TsparticlesEngine) => {
            loadFull(engine);
        },
    },
};
</script> 

注意事项 #

• 如果声明文件包含顶层import/export语法，TS会将其识别为模块文件，而非全局脚本文件，这时候必须把要全局生效的类型包裹在declare global块中，才能正常挂载到全局命名空间。
• 不推荐不加前缀直接把第三方类型挂到全局，一旦后续引入其他带同名Engine类型的依赖，会直接出现类型冲突，排查成本很高。

#

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