Javascript 使用TypeScript使用React效果挂钩

我正在尝试使用React和Typescript创建一个简单的TODO应用程序，但是我得到的“参数'id'隐式地具有'any'类型。TS7006” 我编写了以下代码

import React,{useState, useEffect} from 'react';
import {Container } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Todos from "./Components/Todos";
import TodoForm from "./Components/TodoForm";
const App=()=>{
  const[todos, setTodos]=useState([])

  useEffect(()=>{
    const localTodos=localStorage.getItem("todos")
    if(localTodos){
      setTodos(JSON.parse(localTodos))
    }
  },[])

  const addTodos= async addtodo=>{
    setTodos([...todos, todos]);
  }

  useEffect(()=> {
    localStorage.setItem("todos", JSON.stringify(todos))
  } , [todos]);

const markComplete=id=>{
  setTodos(todos.filter(todo=>todo.id !== id))
};
  return(
    <Container fluid>
      <h1>todo with local storage</h1>
      <Todos todos={todos} markComplete={markComplete}/>
      <TodoForm addTodos={addTodos}/>
    </Container>
  )

}
export default App;

import React，{useState，useffect}来自“React”；
从“reactstrap”导入{Container}；
导入“bootstrap/dist/css/bootstrap.min.css”；
导入“/App.css”；
从“/Components/TODO”导入TODO；
从“/Components/TodoForm”导入TodoForm；
常量应用=（）=>{
const[todos，setTodos]=useState（[]
useffect（（）=>{
const localTodos=localStorage.getItem（“todos”）
if（localTodos）{
setTodos（JSON.parse（localTodos））
}
},[])
const addtodo=异步addtodo=>{
setTodos（[…todos，todos]）；
}
useffect（（）=>{
localStorage.setItem（“todos”，JSON.stringify（todos））
}[待办事项]；
常量markComplete=id=>{
setTodos（todos.filter（todo=>todo.id！==id））
};
返回(
本地存储的todo
)
}
导出默认应用程序；

您的

markComplete

函数有一个未定义类型的参数

id

。因此编译器将其定义为

any

。根据

todo对象的
id
类型，尝试使用类似
string
或
number
的类型。像这样：

const-markComplete=（id:string）=>{
setTodos（todos.filter（todo=>todo.id！==id））
};
您的
markComplete
函数正在接受一个
id
，我假设这是
字符串类型，因此将其标记为-

const-markComplete=（id:string）=>…

typescript既有隐式类型也有显式类型，使用隐式类型时，它将根据以前的代码尝试确定要使用的类型，但在您的情况下它不能，因此它警告您，它正在标记为
any
。如果确实要允许隐式
any
，可以在tsconfig中将
noImplicitAny
属性设置为false

公平地说，上面的所有代码都是用纯javascript编写的。我希望看到一个
类型
或
接口
用于
待办事项
，并开始在整个过程中使用它，例如

const[todos，setTodos]=useState（[]）

及

const addTodo=（todo:todo）=>…

然后，您将获得typescript的好处，例如，如果您试图将非
Todo
的内容添加到
Todo
数组中，则会出现错误我的首选解决方案是将以下行添加到tsConfig文件中：

   "noImplicitAny": false

这通常允许没有被解释为“任何”的类型。如果你没有这个，你需要添加一个类型到你所有的东西