我正在尝试在我的应用程序中使用flow类型检查器。我安装了它并尝试运行
纱线流动
由于此项目在Web浏览器上正常运行，因此给出了错误。有谁知道为什么flow失败了？
> yarn run flow
yarn run v0.23.3
$ "D:\ReactJS\todo-app\node_modules\.bin\flow"
Launching Flow server for D:\ReactJS\todo-app
Spawned flow server (pid=13704)
Logs will go to C:\Users\williams~1\AppData\Local\Temp\flow\DzCzBReactJSzBtodo-app.log
src/App.js:34
v
34: this.state = {
35: open: false,
36: todos: [],
37: notetext: ""
38: };
^ object literal. This type is incompatible with
30: class App extends Component {
^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?
src/App.js:39
39: this.handleChange = this.handleChange.bind(this);
^^^^^^^^^^^^ property `handleChange`. Covariant property `handleChange` incompatible with contravariant use in
39: this.handleChange = this.handleChange.bind(this);
^^^^^^^^^^^^^^^^^ assignment of property `handleChange`
src/App.js:43
43: this.setState({ open: true });
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ call of method `setState`
43: this.setState({ open: true });
^^^^^^^^^^^^^^ property `open` of object literal. Property cannot be assigned on possibly undefined value
30: class App extends Component {
^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?
src/App.js:47
47: this.setState({ open: false });
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ call of method `setState`
47: this.setState({ open: false });
^^^^^^^^^^^^^^^ property `open` of object literal. Property cannot be assigned on possibly undefined value
30: class App extends Component {
^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?
src/App.js:51
51: let todos = [...this.state.todos];
^^^^^ property `todos`. Property cannot be accessed on possibly undefined value
51: let todos = [...this.state.todos];
^^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?
src/App.js:54
54: text: this.state.notetext,
^^^^^^^^ property `notetext`. Property cannot be accessed on possibly undefined value
54: text: this.state.notetext,
^^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?
src/App.js:57
v--------------------------------------
57: this.setState({ todos: todos }, () => {
58: // setState is async, so this is callback
59: });
-^ call of method `setState`
57: this.setState({ todos: todos }, () => {
^^^^^^^^^^^^^^^^ property `todos` of object literal. Property cannot be assigned on possibly undefined value
30: class App extends Component {
^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?
src/App.js:60
60: this.props.addTodo(this.state.notetext);
^^^^^^^^ property `notetext`. Property cannot be accessed on possibly undefined value
60: this.props.addTodo(this.state.notetext);
^^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?
src/App.js:98
98: open={this.state.open}
^^^^ property `open`. Property cannot be accessed on possibly undefined value
98: open={this.state.open}
^^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?
src/App.js:106
106: defaultValue={this.state.noteVal}
^^^^^^^ property `noteVal`. Property cannot be accessed on possibly undefined value
106: defaultValue={this.state.noteVal}
^^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?
Found 10 errors
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
App.js
/* @flow */
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import AppBar from "material-ui/AppBar";
import FloatingActionButton from "material-ui/FloatingActionButton";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import * as strings from "./Strings";
import * as colors from "./Colors";
import styles from "./Styles";
import ContentAdd from "material-ui/svg-icons/content/add";
import Dialog from "material-ui/Dialog";
import FlatButton from "material-ui/FlatButton";
import * as injectTapEventPlugin from "react-tap-event-plugin";
import TextField from "material-ui/TextField";
import { List, ListItem } from "material-ui/List";
import { connect } from "react-redux";
import { addTodo } from "./actions/index";
import * as actions from "./actions/index";
const AppBarTest = () =>
<AppBar
title={strings.app_name}
iconClassNameRight="muidocs-icon-navigation-expand-more"
style={{ backgroundColor: colors.blue_color }}
/>;
class App extends Component {
constructor(props) {
injectTapEventPlugin();
super(props);
this.state = {
open: false,
todos: [],
notetext: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleOpen = () => {
this.setState({ open: true });
};
handleClose = () => {
this.setState({ open: false });
};
handleCreateNote = () => {
let todos = [...this.state.todos];
todos.push({
id: todos.length,
text: this.state.notetext,
completed: false
});
this.setState({ todos: todos }, () => {
// setState is async, so this is callback
});
this.props.addTodo(this.state.notetext);
this.handleClose();
};
handleChange(event) {
this.setState({ [event.target.name]: event.target.value });
}
_renderTodos() {
return this.props.todos.map(event => {
return (
<ListItem
primaryText={event.text}
key={event.id}
style={{ width: "100%", textAlign: "center" }}
onTouchTap={this._handleListItemClick.bind(this, event)}
/>
);
});
}
_handleListItemClick(item) {
console.log(item);
}
render() {
return (
<MuiThemeProvider>
<div>
<AppBarTest />
<FloatingActionButton
style={styles.fab}
backgroundColor={colors.blue_color}
onTouchTap={this.handleOpen}
>
<ContentAdd />
</FloatingActionButton>
<Dialog
open={this.state.open}
onRequestClose={this.handleClose}
title={strings.dialog_create_note_title}
>
<TextField
name="notetext"
hintText="Note"
style={{ width: "48%", float: "left", height: 48 }}
defaultValue={this.state.noteVal}
onChange={this.handleChange}
onKeyPress={ev => {
if (ev.key === "Enter") {
this.handleCreateNote();
ev.preventDefault();
}
}}
/>
<div
style={{
width: "4%",
height: "1",
float: "left",
visibility: "hidden"
}}
/>
<FlatButton
label={strings.create_note}
style={{ width: "48%", height: 48, float: "left" }}
onTouchTap={this.handleCreateNote}
/>
</Dialog>
<List style={{ margin: 8 }}>
{this._renderTodos()}
</List>
</div>
</MuiThemeProvider>
);
}
}
function mapStateToProps(state) {
return {
todos: state.todos
};
}
export default connect(mapStateToProps, actions)(App);
的package.json
{
"name": "todo-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.5",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.6.0"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"flow-bin": "^0.48.0",
"react-scripts": "1.0.7",
"redux-devtools": "^3.4.0",
"webpack": "^2.6.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"babel-version": "babel --version"
}
}
答案 0 :(得分：0)
我在运行 yarn install 时遇到了相同的错误代码。 这是我解决它的方法：
清理 npm 缓存：
sudo npm cache clean -f
重新全局安装 npm
sudo npm install -g n
然后使用稳定版本（或指定您需要的版本）
sudo n stable
如果问题仍然存在，您也可以删除您的 package.json 和节点模块，然后重试
答案 1 :(得分：-1)
Flow的核心是一个类型系统，它将静态类型检查器添加到javascript。
在javascript中你可以做像
这样的事情 const add = (a,b) => {
return a+b;
}
add(6,9); // 15
add("6","9"); // 69
add("Slim ","Shady");//Slim Shady
但是使用flow你需要在函数中定义变量的类型。
const add = (a: number,b: number): number => {
return a+b;
}
add(6,9); // 15
add("6","9"); // error
add("Slim ","Shady");// error
在大型项目中使用它有利可图，因为在没有静态类型检查器的情况下它会变得混乱。需要大量记录的项目。
除非团队确实需要，否则不建议在小型项目中使用。并且不会在每个js文件中使用，因为有时静态类型可能会很痛苦