typescript - 带有 TypeScript 的 Monkey patch react-native Text 组件

Question

我想 monkeypatch react-native Text 元素渲染函数。

Typescript 向我显示了一些错误，因为导出的 Text 类没有公开每个实例在内部具有的 defaultProps 静态成员(通过 react-native 中的 TouchableText 实现)和render 函数也不是公共(public)接口(interface)的一部分。

但是下面的代码是有效的 JS 代码(至少)并且它可以正确地实现我的目标。我仍然想摆脱 TS 警告。

const setCustomText = (customProps: TextProps) => {
  Text.defaultProps = {
    ...Text.defaultProps,
    ...customProps,
  }
  const orgRender = Text.render
  Text.render = function render(props:TextProps, ref:Ref<Text>) {
    const style = Array.isArray(props.style) ? props.style : [props.style]
    props = {
      ...props,
      style: [Text.defaultProps.style, ...style],
    }
    return orgRender.call(this, props, ref)
  }
}

它提示:

Text.defaultProps:类型“typeof Text”上不存在属性“defaultProps”。ts(2339)Text.render:类型“typeof Text”上不存在属性“render”.ts(2339)

Answer 1

我为此而努力，并不是对 :any 类型感到非常自豪，但工作正常并且不会提示，请随时改进它，如果你这样做，请分享:)

interface TextTypescriptProps extends Text {
  defaultProps?: any;
  render: any;
}

export const setCustomText = (customProps: TextProps) => {
  Text as unknown as TextTypescriptProps = Text as unknown as 
  TextTypescriptProps || {};

  (Text as unknown as TextTypescriptProps).defaultProps = {
    ...Txt.defaultProps,
    ...customProps,
  };
  const orgRender = Txt.render;
  (Text as unknown as TextTypescriptProps).render = function render(props: TextProps, ref: Ref<Text>) {
    const style = Array.isArray(props.style) ? props.style : [props.style];
    props = {
      ...props,
      style: [(Text as unknown as TextTypescriptProps).defaultProps.style, ...style],
    };
    return orgRender.call(this, props, ref);
  };
};