Несколько проблем с Typescript/tslint

Question

Я новичок в Typescript! Просто пытаюсь сделать базовую аннотацию для начала

Во-первых, один из импортеров продолжает кричать. Во-вторых, type В-третьих, jsx не работает правильно.

Мой код

import * as React from "react";
import { useMappedState } from "redux-react-hook";
import TodoItem from "./TodoItem";

type TodosReducer = {
    todos: []
}
const mapState = ({ todosReducer: TodosReducer }) => ({
  todoCount: todosReducer.todos.length,
  todos: todosReducer.todos
});

export default function TodoList(): HTMLDivElement {
  const { todoCount, todos } = useMappedState(mapState);
  return (
    <div>
      <div>You have {todoCount} todos</div>
      <ul>
        {
            todos.map((todo: string, index: number) => <li key={index} {...todo}>,/li.)
        }
      </ul>
    </div>
  );
}

Хорошо. Линия 2 redux-react-hook продолжает кричать, не могу найти посылку. 'response' делал то же самое в строке 1, если я не запускал yarn install в этой ветке снова.

Тогда я не могу в линию mapState Цлинт продолжает говорить

[ts] 'TodosReducer' is declared but its value is never read. [ts] Binding element 'TodosReducer' implicitly has an 'any' type.

Так что в основном у меня есть определенный выше тип для TodosReducer, но все же.

Наконец, внутри функции TodoList, возвращающей <div>...</div> Цлинт продолжает говорить cannot find name div для всех элементов

кот tsconfig.json

{
  "compilerOptions": {
    "target": "es6",                       
    "module": "es6",                     
    "allowJs": true,                     
    "jsx": "react",                     
    "sourceMap": true,                     
    "outDir": "./dist",                       

    "strict": true,                        
    "noImplicitAny": true,                

    "moduleResolution": "node"

  }
}

Answer 1

Сторонние пакеты должны иметь типизацию в TypeScript. @types/react должны быть установлены вместе с react, так далее.

const mapState = ({ todosReducer: TodosReducer }) => ({ ... })

неверный синтаксис для ввода todosReducer параметр. Это рассматривается как синтаксис деструктуры ES6. Правильный:

...
type TodosState = { todosReducer: TodosReducer };

const mapState = ({ todosReducer }: TodosState) => ({ ... );

useMappedState является универсальной функцией, она должна использоваться как:

useMappedState<TodosState>(mapState);