將屬性添加到 React Typescript 接口

Question

我想我使用了正確的語法/術語，如果沒有，請告訴我。 我正在將一個項目轉換為 typescript 並且一切正常 - index.tsx 文件當前將 React.icons 設置為來自 coreui 庫的自定義圖標的 object。 使用 typescript， Property 'icons' does not exist on type 'typeof React'.

我想我需要擴展 React 接口/類型聲明以將icons包含為typeof React 。

錯誤出現在下面代碼中React.icons = icons的第一個icons下。 如果有人能指出我正確的方向，我會很高興。

import "react-app-polyfill/ie11"; // For IE 11 support
import "react-app-polyfill/stable";
import "core-js";
import "./polyfill";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

import store from "./store";

import { icons } from "./assets/icons";

interface IReactIcons extends React {
  icons: object;
}

React.icons = icons;

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

嘗試在下面添加模塊增強：

import "react-app-polyfill/ie11"; // For IE 11 support
import "react-app-polyfill/stable";
import "core-js";
import "./polyfill";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

import store from "./store";

import { icons } from "./assets/icons";

declare module "react" {
  interface React {
    icons: {};
  }
}

React.icons = icons;

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister()

Answer 1

您不能使用模態增強，因為正如文檔所述：

1. 你不能在擴充中聲明新的頂級聲明——只是對現有聲明的補丁。
2. 默認導出也不能增加，只能命名導出

好消息是您可以改用全局增強

declare global {
  namespace React {
    let icons:any;
  }
}

如果您知道您的icons是什么類型，請使用它而不是any