flowtype不抱怨缺少React prop

Question

I have the following Counter example:

/**
 * @flow
 */

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { increment, decrement } from '../actions/counter'
import type { State } from '../store'

type Props = {
  counter: number,
  increment: Function,
  decrement: Function,
  hello: Function // There is no `hello` prop coming in to the component, but there doesn't seem to be an error
}

class Counter extends Component<*, Props, *> {
  props: Props

  render() {
    const { counter, increment, decrement } = this.props

    return (
      <div>
        <h1>{counter}</h1>
        <button onClick={decrement}>-</button>
        <button onClick={increment}>+</button>
      </div>
    )
  }
}

function mapStateToProps(state: State) {
  return {
    counter: state.counter
  }
}

function mapDispatchToProps(dispatch: Function) {
  return {
    increment: () => dispatch(increment()),
    decrement: () => dispatch(decrement())
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

I have a required hello prop field in my Props type, however I don't seem to be getting any errors even though the component is not receiving a hello prop. Why is this happening?

Answer 1

This is showing the error of the missing properties. I changed <*, Props, *> to <void, Props, void> . And export the Counter class without Redux.

 // @flow
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { increment, decrement } from '../actions/counter'
import type { State } from '../store'

type Props = {
  counter: number,
  increment: Function,
  decrement: Function,
  hello: Function // There is no `hello` prop coming in to the component, but there doesn't seem to be an error
}

// added export for Counter and void instead of *
export class Counter extends Component<void, Props, void> {
  props: Props;

  render() {
    const { counter, increment, decrement } = this.props

    return (
      <div>
        <h1>{counter}</h1>
        <button onClick={decrement}>-</button>
        <button onClick={increment}>+</button>
      </div>
    )
  }
}

function mapStateToProps(state: State) {
  return {
    counter: state.counter
  }
}

function mapDispatchToProps(dispatch: Function) {
  return {
    increment: () => dispatch(increment()),
    decrement: () => dispatch(decrement())
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

Class that use the counter

// @flow
import React, { Component } from 'react';
import {Counter} from './counter';

class MainCounter extends Component
{

 render ()
 {
  return (
   <div>
    <Counter />
   </div>
  );
 }
}