Reactjs React和Typescript-不正确的类型检查

我正在使用React+TypeScript编写我的第一个应用程序。 我很困惑为什么我的VisualStudio代码显示的类型检查与CodeSandbox中的相同代码完全不同

以下是我的VSC显示的内容：[道具。方向，如有]

下面是CodeSandbox中的正确方法：[props.direcion作为FlexProps]。 链接到Codesanbox，我从中获得了以下示例：

当我以这种方式重写代码时，一切正常：

export const Flex = styled.div`
display: flex;
flex-direction: ${(props : FlexProps) => props.direction}
`

然而，如果接口FlexProps有更多的类型，我将不得不在每一行分别重复它们。所以这对我来说不是个好办法

my package.json：

{
  "name": "interactive-visited-countries-map-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/styled-components": "^5.1.2",
    "@typescript-eslint/eslint-plugin": "^4.1.1",
    "@typescript-eslint/parser": "^4.1.1",
    "eslint": "^7.9.0",
    "eslint-plugin-react-hooks": "^4.0.8",
    "lodash.sortby": "^4.7.0",
    "node-sass": "^4.14.1",
    "normalize.css": "^8.0.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "react-tooltip": "^4.2.7",
    "styled-components": "^5.1.1",
    "styled-icons": "^10.19.0",
    "svg-url-loader": "^6.0.0",
    "typescript": "^4.0.2",
    "typescript-styled-plugin": "^0.15.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/lodash.sortby": "^4.7.6",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4",
    "prettier": "^2.1.1"
  }
}

和tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015", "es2017", "dom.iterable"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": false,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "downlevelIteration": true,
    "declaration": true,
    "noImplicitAny": false,
    "plugins": [
      {
        "name": "typescript-styled-plugin"
      }
    ]
  },
  "include": ["src", "**/*.ts"]
}

解决方案：

我解决了一个问题。 在

react app env.d

中，我有

<reference types="react-scripts" /> 
declare module "styled-components"; 

声明模块“样式化组件”；

我删除了

声明模块“样式化组件”

---

它似乎很好

我删除了我的答案，因为我现在发现

道具的类型与插件无关，所以它是错误的。我确实想问，对于
样式化的类型
，它显示了什么？我猜它是type
any
，在这种情况下，您是否执行了
npm安装@types/styled components
？这是对库进行类型检查所需的相关步骤。我解决了一个问题。在react app env.da中，我有``///声明模块“样式化组件”；```我删除了declare模块“styled components”，它似乎工作得很好好（好吧，很酷，请随意在你自己的问题上发布答案，而不是在标题“更好地维护网站”中标记“已解决”。）很高兴你能解决它！