TypeScript中.d.ts文件可访问性及导入报错问题排查

1. 先解决眼前的语法错误 #

你提供的导入代码里有个明显的语法问题——第二个导入语句的字符串没闭合，这就是[PARSE_ERROR] Unterminated string的直接原因：

// 错误写法：末尾缺了单引号
import Logo from '../../../assets/Resources/icons/logo.png;
// 修正后：
import Logo from '../../../assets/Resources/icons/logo.png';

2. .d.ts文件的正确放置与生效逻辑 #

你的.d.ts内容是对的，不需要到处移动，直接放在src目录下（和vite-env.d.ts同级）就行。Vite + TypeScript会自动扫描src下的全局声明文件，只要语法错误修复，导入资源时就不会再报“找不到模块”的类型错误。

3. 优化资源导入：用Vite路径别名告别嵌套相对路径 #

你想统一管理导入变量名，推荐配置Vite路径别名，彻底摆脱../../../这种容易出错的相对路径：

步骤1：修改vite.config.js #

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      // 给资源目录起别名
      '@assets': path.resolve(__dirname, './src/assets/Resources'),
    },
  },
});

步骤2：补充TypeScript别名声明 #

在src/vite-env.d.ts里加上别名的类型支持（或者把你的资源类型声明合并到这里）：

/// <reference types="vite/client" />

// 资源类型声明
declare module '*.png' {
  const src: string;
  export default src;
}
declare module '*.jpg' {
  const src: string;
  export default src;
}
declare module '*.mp4' {
  const src: string;
  export default src;
}

// 路径别名的TypeScript支持
declare module 'node:path' {
  export * from 'path';
}

步骤3：用别名简化导入 #

之后就可以用简洁的路径导入所有资源，再也不用数层级：

import RightDownArrow from '@assets/icons/right-down.png';
import Logo from '@assets/icons/logo.png';
import SpringVideo from '@assets/Video/2026-spring-homepage.mp4';

总结 #

• 当前报错的核心是导入语句未闭合字符串，先修正这个语法错误
• .d.ts文件放在src根目录就会生效，位置没问题
• 配置Vite路径别名能高效解决资源导入路径混乱的问题，方便统一管理

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