使用自定义导入别名导入自定义类型

Importing custom types with custom import alias

提问人:Bibek Oli 提问时间:11/17/2023 最后编辑:Bibek Oli 更新时间:11/17/2023 访问量:35

问:

最近,我开始将我的Next.js项目升级到TypeScript,并将我的导入别名从修改为。这是我的新.@/*@*tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "removeComments": true,
    "noUnusedLocals": true,
    "allowUnreachableCode": false,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "paths": {
      "@*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

我已经将自定义类型存储在/types文件夹中,例如User.ts

export type TUser = {
  _id: string;
  name: string;
  ...
};

我可以在我的应用程序上导入任何内容,例如:

import Header from "@components/Header"
or
import { ConnectToDatabase } from "@modules/mongodb";

但是当我尝试以这种方式导入我的自定义类型时。User

import { TUser } from "@types/User";

我收到此编译错误。

Cannot import type declaration files. Consider importing 'User' instead of '@types/User'.

但是,如果我像下面这样导入,错误就会消失。

import { TUser } from "@/types/User";

如果我将文件夹类型重命名为其他名称,我可以像往常一样导入。

import { TUser } from "@typesd/User";

为什么会这样?

打字稿 下一个.js

评论


答:

1赞 katniss 11/17/2023 #1

很有可能,您正在直接或间接使用 DefinitelyTyped 提供的类型定义。由于他们在 npm 上的组织“types”下发布类型,因此路径是模棱两可的。您似乎正在尝试导入从@types组织命名的包。@types/UserUser

这就是重命名文件夹起作用的原因 - 因为无论您是否打算从文件夹或组织下的包导入都不再模棱两可,并且出于同样的原因起作用。@/types/User

评论

0赞 Bibek Oli 11/18/2023
哦!知道了。我现在能做什么,继续导入喜欢或其他更好的解决方案?我也尝试过允许导入。但这看起来让我感到困惑,这是节点模块还是自定义类型。...from "@/types/User"declare module "User" {}import { TUser } from "User"
0赞 katniss 11/18/2023
@BibekOli 就我个人而言,我要么使用我的文件夹,要么将我的文件夹重命名为 .@/types/...typings