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 一直喊，找不到包裹。 'react' 在第 1 行做同样的事情，除非我运行 yarn install in this b运行ch 再次。

然后我无法对 mapState 进行排队，tslint 一直在说

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

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

最后，在返回 <div>...</div> 的 TodoList 函数内部，tslint 一直对所有元素说 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);

Typescript/tslint 的一些问题

A few problems with Typescript/tslint

typescript

reactjs

react-hooks