javascript - TypeScript を使用した React Effect フックの使用

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;

markComplete 関数には、型が定義されていないパラメーター ID があります。したがって、コンパイラはそれを any として定義します。 todo オブジェクトの ID タイプに応じて、文字列や数値などのタイプを使用してみてください。このように:

const markComplete = (id: string) => {
  setTodos(todos.filter(todo=>todo.id !== id))
};

markComplete 関数は ID を受け入れます。これは文字列型であると思われるため、そのようにマーク付けします -

const markComplete = (id: string) => ...

typescript には暗黙的型付けと明示的型付けの両方があり、暗黙的型では、以前のコードに基づいてどの型を使用するかを試行しますが、あなたの場合はそれができないため、いずれかでマークされていると警告します。暗黙的な any を許可したい場合は、tsconfig で noImplicitAny プロパティを false に設定できます。

公平を期すために言うと、上記のコードはすべてプレーンな JavaScript として書かれています。 Todo のタイプまたはインターフェイスが表示され、それを全体を通して使用し始めることを期待します。たとえば、

const [todos, setTodos] = useState<Todo[]>([])

そして

const addTodo = (todo: Todo) =>....

そうすると、typescript の利点が得られます。たとえば、Todo ではないものを todos 配列に追加しようとするとエラーが発生します。

私の推奨する解決策は、tsConfig ファイルに次の行を追加することです。

   "noImplicitAny": false

これにより、通常、「any」として解釈される型を持たないことが許可されます。これがない場合は、持っているものすべてにタイプを追加する必要があります。