如何让TypeScript识别自定义类为全局类型并修复ts2416报错

错误原因 #

你的ts(2416)报错是类型定义冲突导致：全局Char接口声明char属性为Character类型，但实际Character类的char属性是string类型，同时出现了循环定义的逻辑问题。

第一步：修正类型定义 #

在项目根目录新建global.d.ts全局类型声明文件，内容如下：

declare class Character {
  readonly char: string;
  constructor(char: string);
  toString(): string;
  toUpperCase(): string;
  toLowerCase(): string;
}

declare global {
  // 全局暴露Char类型
  type Char = Character;
  // 全局暴露Character类的类型声明
  var Character: typeof Character;
}

// 该文件需要作为模块导出
export {}

确保你的tsconfig.json的include数组包含这个文件，示例配置：

{
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "global.d.ts"]
}

第二步：调整类实现并全局挂载 #

修改你的models/Char.ts文件，内容如下：

class Character implements Char {
  readonly char: string;

  constructor(char: string) {
    if (char.length !== 1) {
      throw new Error(`${char} is not a character.`);
    }
    this.char = char;
  }
  toString(): string {
    return this.char;
  }
  toUpperCase(): string {
    return this.char.toUpperCase();
  }
  toLowerCase(): string {
    return this.char.toLowerCase();
  }
}

// 将类挂载到全局对象，运行时可直接调用
globalThis.Character = Character;

第三步：项目入口引入一次 #

在NextJS项目的全局入口文件中引入一次该类文件即可，无需其他文件再导入：

• Pages路由：在pages/_app.tsx顶部添加import '@/models/Char';
• App路由：在app/layout.tsx顶部添加import '@/models/Char';

配置完成后，你就可以在项目任意文件中直接使用Char类型和Character类，不需要额外导入，也不会再出现类型报错。

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