扩展 TypeScript 的控制台接口

Question

我想在 window.console 全局中添加一个对象。

import Reactotron from 'reactotron-react-native';

window.console.tron = Reactotron;

尽管当我这样做时，TypeScript 会抱怨新对象：

错误 TS2339：“控制台”类型上不存在属性“tron”。

我正在考虑扩展控制台界面：

interface ConsoleWithTron extends Console {
  tron: any
};

虽然，我不确定如何将这个新接口分配给我的全局控制台对象？

帮助会很棒！

谢谢。

Answer 1

您可以只增加Console界面本身。 请参阅合并接口：

interface Console {
    tron: any
}

如果您想从模块内部扩充Console ，您必须将其包装在declare global { }块中。 查看全局增强

declare global {
    interface Console {
        tron: any
    }
}

Answer 2

更好的是，我们可以在之前的答案中添加带有 linting 的类型安全性

/* eslint-disable import/no-extraneous-dependencies */
import { Reactotron } from 'reactotron-core-client';
import { ReactotronReactNative } from 'reactotron-react-native';

declare global {
  interface Console {
    tron: Reactotron<ReactotronReactNative> & ReactotronReactNative;
  }
}

并更简单地分配它

console.tron = Reactotron;