React 在一個名為 的檔案中定義了一些（不是全部）DOM 型別global.d.ts，這會導致問題。在 React 專案中使用EventListener型別（來自 TypeScript lib dom）時似乎存在沖突，因為大多數其他型別都是由 React 宣告的。
有沒有辦法EventListener在 React 專案中使用該型別？我使用next.js，所以可能這不是一個好主意，放棄使用global.d.ts檔案exclude中tsconfig.json的SSR作業？
預期結果（純 TS）：https : //codesandbox.io/s/nice-tdd-xnkov?file=/ src/
index.ts
window.onload = () => {
// NO Problem: Listener is correct.
// Explanation:
// EventListener is coming from typescript (lib.dom.d.ts)
// MouseEvent is coming from typescript (lib.dom.d.ts)
const listener: EventListener = (ev: MouseEvent) => {
console.log("Click!");
};
document.body.addEventListener("click", listener);
};
在 React 中不起作用：https ://codesandbox.io/s/react-dom-type-conflict-1y06r ? file =/ src/
App.tsx
useEffect(() => {
// Problem: Listener is seemingly incorrect.
// Explanation:
// EventListener is coming from typescript (lib.dom.d.ts)
// MouseEvent is coming from react (global.d.ts)
const listener: EventListener = (ev: MouseEvent) => {
console.log("Click!");
};
document.body.addEventListener("click", listener);
}, []);
解釋，為什么 React 宣告這些型別（來自global.d.ts）：
不包含 DOM 庫的 React 專案需要這些介面來編譯。React Native 應用程式使用 React，但沒有可用的 DOM。JavaScript 運行時僅適用于 ES6/ES2015。這些定義允許此類專案僅使用
--lib ES6.警告：所有這些介面都是空的。如果需要各種屬性的型別定義（例如 HTMLInputElement.prototype.value），則需要添加
--lib DOM（通過命令列或 tsconfig.json）。
uj5u.com熱心網友回復：
編輯：正如@Christoph Bühler 指出的，似乎 addEventListener 事件處理程式接收到一個MouseEventInit而不是MouseEvent
所以這有效：
const listener: EventListener = (ev: MouseEventInit) => {
console.log("Click!");
const e = ev as MouseEvent;
console.log(e.target);
};
我從你的分叉出來的作業 CodeSandbox。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/373492.html