ReactTS如何实现无需导入即可全局使用的类型安全属性名获取函数

不需要eject React的webpack配置，有两种低侵入的实现方案可以满足需求：

方案1：TS全局声明 + 自动注入（推荐） #

该方案不会改动原有构建逻辑，也不会污染window全局对象，类型校验完全正常：

• 第一步：抽离工具函数为单独文件src/utils/getPropertyName.ts：

export function getPropertyName<TObject>(name: keyof TObject) {
    return name
}

• 第二步：新增全局类型声明文件src/global.d.ts，添加如下内容让TS识别全局函数：

declare global {
  const getPropertyName: typeof import('./utils/getPropertyName').getPropertyName
}
export {}

• 第三步：通过craco或者react-app-rewired配置webpack内置的ProvidePlugin自动注入函数，无需手动导入。以craco为例，craco.config.js配置如下：

const webpack = require('webpack')
module.exports = {
  webpack: {
    plugins: [
      new webpack.ProvidePlugin({
        getPropertyName: [require.resolve('./src/utils/getPropertyName'), 'getPropertyName']
      })
    ]
  }
}

方案2：挂载到window全局对象（零构建配置修改） #

如果不想引入任何构建配置工具，可以直接将函数挂载到window全局：

• 第一步：修改src/utils/getPropertyName.ts添加挂载逻辑：

function getPropertyName<TObject>(name: keyof TObject) {
    return name
}
(window as any).getPropertyName = getPropertyName
export {}

• 第二步：在项目入口文件src/index.tsx最顶部引入该文件，确保全局挂载优先执行：

import './utils/getPropertyName'

• 第三步：和方案1一致，添加global.d.ts全局类型声明即可。

注意事项 #

• 请确保tsconfig.json的include配置包含了global.d.ts文件，否则会出现找不到函数的TS报错
• 全局函数存在命名冲突风险，建议给特殊工具函数添加唯一前缀降低冲突概率

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