TypeScript中全局包正确用法：解决Enzyme全局方法类型未识别问题

我之前也碰到过完全一样的情况——把Enzyme的方法挂到全局后，TypeScript直接不认，报找不到名称的错误。核心原因是TypeScript需要明确的类型声明来识别全局变量，咱们可以通过以下几步解决：

• 创建全局类型声明文件
  在项目的TypeScript可识别目录下（比如src根目录，或者专门的types文件夹）新建一个声明文件，比如enzyme-global.d.ts。

• 添加全局方法的类型声明
  在这个文件里扩展NodeJS的Global接口，把Enzyme三个方法的类型定义补上：

  import { ShallowWrapper, Renderer, ReactWrapper } from 'enzyme';
  
  declare global {
    namespace NodeJS {
      interface Global {
        shallow: (node: React.ReactElement<any>, options?: any) => ShallowWrapper;
        render: (node: React.ReactElement<any>, options?: any) => Renderer;
        mount: (node: React.ReactElement<any>, options?: any) => ReactWrapper;
      }
    }
  }
  

  这样TypeScript就知道global对象上存在这三个方法，还能正确推断它们的参数和返回值类型。

• 确保TypeScript识别声明文件
  检查你的tsconfig.json，保证include数组包含了这个声明文件的路径，比如：

  {
    "compilerOptions": {
      // 你的其他配置项
    },
    "include": [
      "src/**/*",
      "src/enzyme-global.d.ts" // 替换成你的声明文件实际路径
    ]
  }
  

做完这些配置后，你在测试文件里直接写const component = shallow(<Input {...props} />);就不会再报错了，而且还能享受到TypeScript的类型提示~

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