React中扩展process对象属性遇ts(2339)错误：gitInfo不存在于Process类型

核心问题 #

你错误地扩展了全局Process接口，但TypeScript中，process对象对应的内置类型是NodeJS.Process，直接扩展Process不会关联到process实例的类型，所以触发报错。另外如果声明文件没被TypeScript正确识别，也会导致类型不生效。

解决步骤 #

1. 修正全局类型声明 #

把代码改成扩展NodeJS.Process接口：

declare global {
  namespace NodeJS {
    interface Process {
      gitInfo: {
        GIT_COMMIT_DATE?: string;
        GIT_COMMIT_HASH?: string;
        GIT_BRANCH?: string;
        GIT_COMMIT_MESSAGE?: string;
      };
    }
  }
}

// 此时再使用process.gitInfo就不会报错
const gitInfo = process.gitInfo;

2. 确保声明文件被TypeScript检测到 #

• 将这段代码保存为.d.ts后缀的文件，比如src/global.d.ts或者src/types/git.d.ts
• 检查tsconfig.json的include配置，确保包含该文件所在目录：

{
  "include": ["src/**/*"]
}

3. 匹配Webpack DefinePlugin配置 #

注意Webpack的DefinePlugin会直接替换代码，所以要把gitInfo对象序列化为字符串注入：

const { execSync } = require('child_process');
const webpack = require('webpack');

// 提取Git信息
const getGitMeta = () => {
  try {
    return {
      GIT_COMMIT_DATE: execSync('git log -1 --format=%cd').toString().trim(),
      GIT_COMMIT_HASH: execSync('git rev-parse --short HEAD').toString().trim(),
      GIT_BRANCH: execSync('git rev-parse --abbrev-ref HEAD').toString().trim(),
      GIT_COMMIT_MESSAGE: execSync('git log -1 --format=%B').toString().trim(),
    };
  } catch (err) {
    console.warn('无法获取Git信息:', err);
    return {};
  }
};

module.exports = {
  // ...其他Webpack配置
  plugins: [
    new webpack.DefinePlugin({
      'process.gitInfo': JSON.stringify(getGitMeta()),
    }),
  ],
};

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