Vue3+TypeScript引入env.js报错：找不到声明文件的原因与解决

场景说明 #

我正在开发基于Vue 3和TypeScript的SPA应用，将API的URL与密钥存储在src\env.js中，文件内容如下：

export default {
 api_url: "https://api.themoviedb.org/3/movie/550?",
 api_key: "somerandomkey"
}

src\views\HomeView.vue中的代码如下：

<template>
<div class="container">
    <h1 class="page-title">{{ pageTitle }}</h1>
    <MoviesList />
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios';
import env from '@/env.js'
import MoviesList from '../components/MoviesList.vue';

export default defineComponent({
    name: 'HomeView',

    components: {
      MoviesList
    },

    data() {
      return {
        pageTitle: "Popular Movies",
        movies: [],
      }
    },
    methods: {
      getMovies() {
        axios.get(`${env.api_url}api_key=${env.api_key}`).then(response => {
        this.movies = response.data.results;
        })
        console.log(this.movies)
      }
    }
});
</script>

问题 #

编译失败，终端报错：

Could not find a declaration file for module '@/env.js'.

疑问 #

1. 该问题的成因是什么？
2. 最可靠的解决方法是什么？

解答 #

1. 问题成因

TypeScript是强类型语言，要求每个模块都有对应的类型声明文件（.d.ts）来明确模块的类型结构。你导入的@/env.js是纯JavaScript模块，没有配套的类型声明，TypeScript无法自动推断它的类型信息，因此抛出编译错误。

2. 最可靠的解决方法

推荐两种方案，可根据项目需求选择：

方案一：为env.js添加类型声明文件

在src目录下创建env.d.ts文件，内容如下：

declare module '@/env.js' {
  export default {
    api_url: string;
    api_key: string;
  }
}

这个声明文件会告诉TypeScript：@/env.js模块导出一个包含api_url和api_key两个字符串属性的对象，编译时就能识别模块的类型。

方案二：将env.js改为env.ts文件

直接把src\env.js重命名为src\env.ts，并完善类型定义：

interface EnvConfig {
  api_url: string;
  api_key: string;
}

const env: EnvConfig = {
  api_url: "https://api.themoviedb.org/3/movie/550?",
  api_key: "somerandomkey"
};

export default env;

之后在HomeView.vue中修改导入路径为import env from '@/env.ts'（若Vue路径别名支持省略后缀，也可写@/env），TypeScript能直接识别模块的类型，无需额外声明文件。

内容的提问来源于stack exchange，提问作者Razvan Zamfir