如何使用TS在create-react-app中修复（Missing：any）

Question

I call BookTracker component in my root App.tsx, with book={MY_MOCK},

type BookParamsTypes = {
  title: string;
  pubDate: number;
  //... rest
};

import { BookParamsTypes } from "./types/BookParamsTypes";

type BookTrackerProps = {
  book: BookParamsTypes[];
};

const BookTracker = ({ book }: BookTrackerProps) => (
//...
        <BookDetailed book={book}/>
//...
);

for the BookDetailed above i have an error message "JSX element type '{ book: BookParamsTypes[]; (Missing): any; }' is not a constructor function for JSX elements. Type '{ book: BookParamsTypes[]; (Missing): any; }' is missing the following properties from type 'Element': type, props, key - ts(2605)" how come this be? no clues

And then i cannot properly map inside BookDetailed

{book.map((item, i: number) => (
  // ..
      <BookTitle>{item.title}</BookTitle>
  // ... rest
  ))}

Linter doesnt understand book.map at all and also says item implicitly has any type ...

For other reference, here is my tsconfig:

 { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "noEmit": true, "jsx": "preserve", "noUnusedLocals": true, "noUnusedParameters": true, "removeComments": false, "preserveConstEnums": true, "types": [], "isolatedModules": true }, "include": [ "src/*" ], "exclude": [ "node_modules", "**/*.spec.ts", "**/*.spec.ts", "src/sw-*.js", "src/idb.js" ] } 

and package.json

 "dependencies": { "@types/jest": "24.0.11", "@types/node": "11.13.6", "@types/react": "16.8.14", "@types/react-dom": "16.8.4", "@types/styled-components": "^4.1.14", "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "2.1.8", "styled-components": "^4.2.0", "typescript": "3.4.4" } "devDependencies": { "babel-plugin-styled-components": "^1.10.0", "stylelint": "^10.0.1", "tslint": "^5.16.0", "tslint-config-airbnb": "^5.11.1", "tslint-config-prettier": "^1.18.0", "tslint-react": "^4.0.0" } 

Maybe i have some sort of tslint / config conflicts? Can please some one help me figure it out?

Answer 1

确保正确定义了BookDetailed组件。