React和Typescript-错误的类型检查

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

这是我的VSC显示的内容：[props.direction as any]

这是CodeSandbox中的corect方式：[props.direcion as FlexProps]。从我获得此示例的地方链接到Codesanbox：https ://codesandbox.io/s/funny-frost-1bxwk?file=/src/Heading.tsx

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

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

但是，如果接口FlexProps具有更多类型，我将不得不在每行上分别重复它们。所以对我来说不是一个好方法。

我的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"]
}