React and Typescript - incorrect Types Checking

Question

I'm writing my first application using React+TypeScript. I'm very confused about why my Visual Studio Code show completly different Type Checking than the same code in CodeSandbox.

Here is what my VSC shows: [props.direction as any]

And here is corect way in CodeSandbox: [props.direcion as FlexProps]. Link to Codesanbox from where I got this example: https://codesandbox.io/s/funny-frost-1bxwk?file=/src/Heading.tsx

When I rewrite the code in this way, everything is ok:

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

However if interface FlexProps has more types, I will have to repeat them on each line separately. So is not good way for me.

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"
  }
}

and 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"]
}

I deleted my answer as I have now found that the type of props has nothing to do with the plugin so it was wrong. I do want to ask, what does it show for the type of styled? I would guess it is type any, in which case did you do npm install @types/styled-components? That is the relevent step needed to have type checking on the library. — Tadhg McDonald-Jensen
I've solved a problem. In react-app-env.d a I have ``` /// <reference types="react-scripts" /> declare module "styled-components"; ``` I deleted declare module "styled-components" and It seems to work fine — Tomasz
ok cool, feel free to post an answer on your own question instead of just labeling "solved" in the title, better house keeping for the site. :) glad you were able to solve it! — Tadhg McDonald-Jensen

Tomasz Tomasz · Accepted Answer · 2020-10-01T15:06:05

Solution:

I've solved a problem. In react-app-env.d I have

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

I deleted declare module "styled-components" and It seems to work fine

React and Typescript - incorrect Types Checking

1 Answers