扩展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

更好的是，我们可以在前面的答案中增加类型安全性。

/* 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;