为 TypeScript 扩展控制台接口

Posted 2023-02-22

【中文标题】为 TypeScript 扩展控制台接口

【英文标题】：Extends Console Interface for TypeScript

【发布时间】：2017-11-29 13:42:20

【问题描述】：

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

import Reactotron from 'reactotron-react-native';

window.console.tron = Reactotron;

虽然当我这样做时，TypeScript 抱怨新对象：

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

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

interface ConsoleWithTron extends Console 
  tron: any
;

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

帮助会很棒！

谢谢。

【问题讨论】：

为什么控制台是大写的？

@evolutionxbox 因为它最初来自node_modules/@types/node/globals.d.ts 引用我们的interface Console，但是当从我们的全局window 变量中作为属性调用时采用驼峰形式。

@Leo 三年！ ？？？ - 顺便说一句

@evolutionxbox 哈哈为死灵道歉！ ❤️

【参考方案1】：

您可以只扩充Console 接口本身。见merging interfaces：

interface Console 
    tron: any

如果你想从模块内部扩充Console，你必须将它包装在declare global 块中。见global augmentation

declare global 
    interface Console 
        tron: any
    

【讨论】：

在这样做之后我仍然从tsc 收到同样的错误......我在将tron 添加到控制台对象之前定义了接口。

您是在模块中添加这个吗？您可能必须将其包装在 declare global 中。见global augmentation

【参考方案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;