Question

我有这个容器

export interface State {
  email: string
}

const mapStateToProps = (state: State) => ({
  email: state.email,
})

const mapDispatchToProps = (dispatch: Dispatch<Action>) => ({
  onChange: (name: string, value: string) => dispatch(/*...*/),
})

export default connect(mapStateToProps, mapDispatchToProps)(Login)

和这个组件

export interface LoginProps {
  email: string
  onChange: (name: string, value: string) => void
}

const Login = (props: LoginProps) => (
  <p>Render something here</p>
)

有没有办法根据Container定义推断登录属性的类型，所以我不必手动定义LoginProps？

Answer 1

connect有很好的类型定义，因此可以推断传递给包装组件的props的类型。如果您像这样编写容器/组件......

export interface State {
  email: string
}

const stateToProps = (state: State) => ({
    email: state.email
  })

const dispatchToProps = (dispatch: Dispatch<Action>) => ({
    onChange: (name: string, value: string) => dispatch(/*...*/)
})

const BlahBlah = connect(stateToProps, dispatchToProps)(({ email, onChange }) => (
    <div />
));

email和onChange无需额外注释即可正确输入。

但是，当您单独编写Login组件时，没有类型注释...

const Login = (props) => (
  <p>Render something here</p>
)

无法推断出props的类型。这是因为除了将Login传递给connect之外，您还可以直接调用它。例如，我可以写一个组件：

render() {
    return (
        <Login unrelated="a string" typescript="cool" />
    );
}

在Login组件上没有注释，编译器无法知道Login（连接的一个或我的直接渲染）的哪些调用提供了正确的道具。如果没有注释，编译器只能输入道具any，因此我们失去了类型安全性。

是否可以根据父组件推断组件属性的类型？

1 个答案: