将 TS 文件导入 Vue 文件

Question

我已经创建了一个包含枚举和接口的ts文件，并且需要在Vue组件中使用它们。但是，当我尝试将ts文件导入到我的Vue组件中时，我会收到一个错误消息，提示找不到该模块。

我的src/models/Profile.ts文件看起来像这样：

export enum Status {
    NONE,
    ACCEPTING,
    NOT_ACCEPTING,
}

export interface Profile {
    status: Status,
    firstName: string,
    lastName: string,
}

我正在尝试导入上述的Vue组件：

import Profile from '@/models/Profile.ts';

@Component({computed: mapGetters(['user'])})
export default class CreateProfile extends Vue {
    ...
}

具体错误：

An import path cannot end with a '.ts' extension. Consider importing '@/models/Profile' instead.

但是当我尝试那样做时，我遇到了以下问题：

Cannot find module '@/models/Profile'.

- Andrea

---

你可能需要在tsconfig文件和webpack文件中配置路径别名。 - user13637316

你的项目是否添加了TypeScript支持？你的项目是使用Vue cli创建的吗？如果是的话，你可以通过输入vue add typescript来添加TS支持。 - undefined

请尝试在Codesandbox中重新创建该问题。如果没有看到您的配置文件，很难准确定位具体的问题。 - undefined

你试过使用 import {Profile} from '@/models/Profile.ts'; 替代吗？ - undefined

这个问题有任何更新吗？ - undefined

Answer 1

试试这个： import type { Profile } from '@/models/Profile.ts';

- Damir Nafikov