Typescript/tslint 的一些问题

Question

我是打字稿的新手！只是尝试做基本的注释作为开始

首先，其中一个进口产品一直在大喊大叫二、对象解构中没有拾取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一直大喊大叫，找不到包裹。"react"在第 1 行上做同样的事情，除非我再次在这个分支中运行 yarn install。

然后我无法行地图状态 tslint 一直说

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

所以基本上我确实在上面为 TodosReducer 定义了类型，但仍然如此。

最后，在返回<div>...</div> tslint 的 TodoList 函数中，所有元素都cannot find name div

cat 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);