如何在Svelte 4项目中声明全局可用的Object Class？

首先明确：你之前在app.d.ts里声明没用，是因为这个文件仅用于TypeScript的类型定义，不包含类的实际运行逻辑，运行时找不到类的实现，自然没法实例化。

下面给你几种可行的全局使用方案：

方案一：挂载到window对象（客户端专用） #

适合仅在浏览器环境使用的场景：

1. 先创建类的实现文件，比如src/lib/Car.js：

export class Car {
  constructor() {}
  make = '';
  model = '';
  year = '';
}

2. 在根布局文件src/routes/+layout.svelte里导入并挂载到window：

<script>
  import { Car } from '$lib/Car';
  // 只在客户端环境挂载，避免SSR报错
  if (typeof window !== 'undefined') {
    window.Car = Car;
  }
</script>

<slot />

3. （TypeScript项目）在app.d.ts里补充类型声明，让TS识别window上的Car：

declare global {
  interface Window {
    Car: typeof import('$lib/Car').Car;
  }
}
export {};

现在任意组件里直接写const myCar = new Car();就能用了。

方案二：通过Vite配置全局变量（支持SSR） #

如果需要在服务器端渲染场景也能用，可以用Vite的全局定义：

1. 同样先创建src/lib/Car.js文件存放类实现
2. 修改vite.config.js，添加define配置：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  define: {
    // SSR环境下空对象占位，客户端加载实际类
    globalThis.Car: 'import.meta.env.SSR ? {} : (await import("$lib/Car")).Car'
  }
});

3. （TypeScript项目）在app.d.ts补充类型：

declare global {
  var Car: typeof import('$lib/Car').Car;
}
export {};

这样不管客户端还是SSR环境，都能直接用new Car()。

方案三：模块化导入（更推荐） #

其实不一定要搞全局变量，模块化导入更清晰，还能避免全局污染：
在需要用的组件里直接导入：

import { Car } from '$lib/Car';
const myCar = new Car();

这种方式在大型项目里更易维护，也符合现代JS的模块化规范。

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