英文:
tsconfig.json doesn't recognize path "@types"
问题
以下是翻译好的内容：
我为我的 Next.js 应用程序设置了多个绝对路径。 我在另一个文件夹中时有问题，尝试从绝对路径导入组件时，它会像 **"../componentName"** 这样导入，而不是 **"@components/componentName"**。 我正在使用 vsCode，有时必须手动调整导入以保持一致性。我的最后一个问题是，我有一个包含所有 TypeScript 类型的文件夹，名为 **/types**，但当我创建对它的路径时，我不断收到一个错误，说它未声明。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.tsexport 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"; // <== 无法找到模块 '@types' 或其相应的类型声明.ts(2307)
英文:
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
答案1
得分: 1
我遇到了类似的问题，我认为这是因为 @types/ 通常与默认的 @type 依赖项引入发生冲突（例如 @types/react, @types/react-dom, @types/node 等），这些依赖项安装在通常被 Git 忽略的 node_modules 目录内（例如 node_modules/@types/）。
因此，我认为（不是100%确定）即使你在 tsconfig.json 中手动配置了路径映射，使用给定的配置；"@types/*": ["types/*"]，TypeScript 也会忽略它，因为它有自己内置的映射，将 @types/ 映射到默认情况下只查找 node_modules 目录内的内容。
可能的解决方案 (?)
你可以尝试将以下行添加到 tsconfig.json 文件中：
{"compilerOptions": {// ..."typeRoots": ["./node_modules/@types","./types"]}}
但在我的情况下，它仍然不起作用。 值得知道为什么不起作用。
替代建议
所以最终，我选择使用 @/ 来映射所有自定义路径（注意斜杠后缀）以保持一致性。这样，我可以区分官方安装的依赖项（例如 @type 来自 node_modules）和自定义项目源代码目录。
例如：在 tsconfig.json 内配置以下路径：
{"compilerOptions": {// ..."paths": ["@/components/*": ["./src/components/*"],"@/types/*": ["./src/types/*"]]}}
然后，在源代码脚本文件内（例如 .tsx 文件），我们可以使用 @/ 前缀缩写导入类型和组件：
import { SomeType } from "@/types/someType";import SomeComponent from "@/components/some-component/SomeComponent";
英文:
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";
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论