Question

我将react-native-navigation与@types/react-native-navigation一起使用。这种方式的工作方式是，所有已注册的React Native组件都会自动获得this.props.navigator。

navigator有push方法，但它不允许任何类型参数。它有一个名为passProps的属性，允许您将属性传递到您导航到的页面，但是没有办法注释您传递的道具类型应该与道具相匹配您正在寻找的屏幕。例如：

export interface BioProps { username: string }
export class BioScreen extends React.Component<BioProps> {}

this.props.navigator.push({
  screen: 'bio.BioScreen',
  title: 'foo',
  passProps: {
    username,
  }
});

在这种情况下，我希望passProps与BioProps类型相同，以确保类型安全。但是，没有像.push<BioProps>这样的内容可以让你这样做。

如果没有内置于定义中，是否有任何方法可以强制执行类型安全？

Answer 1

您可以从模块扩充Navigator接口，以添加一个通用重载，以强制props为特定类型：

// react-native-navigation-augmented.ts
import { Navigation, NavigationComponentProps } from 'react-native-navigation';
declare module 'react-native-navigation'{
    export interface Navigator {
        push<T>(params: PushedScreen & { passProps: T }): void
    }
}


// Otherfile.ts
/// <reference path="./react-native-navigation-augmented.ts" />
this.props.navigator.push<BioProps>({
    screen: 'bio.BioScreen',
    title: 'Pushed Screen',
    // Will cause an error if username is not present or of a different type
    passProps: {
        username: ""
    }
});

为不公开泛型类型的函数键入注释

1 个答案: