Starting from v15.5 if we wanted to use React‘s PropTypes we had to change our code to use a separate node module, now we can go one step further and get rid of that extra dependency just by using flow type annotations in our create-react-app project!
Install:
yarn add flow-bin
Scripts:
"flow": "flow"
Run:
npm run flow initnpm run flow
Add flow annotations:
// @flow import {createStore} from ‘redux‘; import reducer from ‘./reducers/todo‘; export type TodoType = { id: number, name: string, isComplete: boolean }; export type StateType = { todos: Array<TodoType>, currentTodo: string }; const initState: StateType = { todos: [ {id: 1, name: ‘Render static UI‘, isComplete: true}, {id: 2, name: ‘Create initial state‘, isComplete: false}, {id: 3, name: ‘Render based on state‘, isComplete: true} ], currentTodo: ‘Temp‘ }; const store = createStore(reducer, initState); export default store;
Import a flow type:
// @flow import React from ‘react‘ import {connect} from ‘react-redux‘; import type {TodoType} from ‘../store‘; const TodoItem = ({id, name, isComplete}: TodoType) => ( <li> <input type="checkbox" defaultChecked={isComplete} /> {name} </li> ) const TodoList = (props: {todos: Array<TodoType>}) => ( <div className="Todo-List"> <ul> {props.todos.map(todo => <TodoItem key={todo.id} {...todo} />)} </ul> </div> ); export default connect( (state) => ({todos: state.todos}) )(TodoList);
时间: 2024-07-28 13:30:54