tsconfig.json doesn't recognize path "@types"

I have setup multiple absolute paths for my Next.js application. I have problems where when I am inside another folder and trying to import a component from the absolute path it will import like "../componentName" instead of "@components/componentName". I am using vsCode and sometimes I have to manually adjust the import for consistency.

My last problem is that I have a folder with all my TypeScript types folder is called /types but when I create a path to it I keep getting an error that it's not declared.

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": "./",
    "paths": {
      "@images/*": ["images/*"],
      "@lib/*": ["lib/*"],
      "@components/*": ["components/*"],
      "@types/*": ["types/*"],
      "@styles/*": ["styles/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

/types/index.ts

export type { SocialFields } from "./objects/social-fields";
export type { HeroProps } from "./hero";
export type { ImageProps } from "./image";
export type { PostProps } from "./post";
export type { ReadMoreProps } from "./read-more";
export type { SocialProps } from "./socials";
export type { Tag } from "./tag";

BlogCard.tsx:

import { PostProps } from "@types"; // <== Cannot find module '@types' or its corresponding type declarations.ts(2307

I have stumbled a similar issue, and i believe it is because @types/ typically conflicts with the default @type dependency imports (e.g. @types/react, @types/react-dom, @types/node, etc), which are installed inside the typically git ignored node_modules directory (e.g. node_modules/@types/).

And so I believe (not 100% sure) that even when you have manually configured a path mapping from within tsconfig.json, with the given configuration; "@types/*": ["types/*"], TypeScript will ignore this, as it has its own built-in mapping for @types/ to only (by default) look inside the node_modules directory.

Possible Solution (?)

You could possibly try adding this line to the tsconfig.json file:

{
  "compilerOptions": {
    // ...
    "typeRoots": [
      "./node_modules/@types",
      "./types"
    ]
  }
}

But in my case it still did not work. Would be good to know why.

Alternative Suggestion

So I ended up mapping with @/ for all custom paths (note the forward slash suffix) for consistency. That way, I can differentiate between the officially installed dependencies (e.g. @type from node_modules), and the custom project source code directories.

For example: Configure the following paths inside tsconfig.json:

{
  "compilerOptions": {
    // ...
    "paths": [
      "@/components/*": ["./src/components/*"],
      "@/types/*": ["./src/types/*"]
    ]
  }
}

..and then from inside a source code script file (e.g. .tsx), we could import types and components using the @/ prefix shorthand:

import { SomeType } from "@/types/someType";
import SomeComponent from "@/components/some-component/SomeComponent";