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不断大喊，找不到包裹。除非我再次在该分支中运行纱线安装，否则“反应”在第1行上的操作相同。

然后我无法在mapState tslint上继续说

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

所以基本上，我确实在上面为TodosReducer定义了类型。

最后，在TodoList函数内部，返回<div>...</div> 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的一些问题

1 个答案: