尝试在已经存在的vite (vue 3,typescript)项目上设置最有活力的项目。
我的vite.config.ts看起来是这样的:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
test: {
globals: true,
environment: 'jsdom',
},
plugins: [vue()],
});
但在VS代码中,它抱怨道:
在悬停时我看到:
类型'{ test:{ globals: boolean;环境: string;};plugins: Plugin[];}‘的参数不能分配给类型'UserConfigExport’的参数。对象文字只能指定已知的属性,并且在类型‘UserConfigExport.ts(2345)中不存在'test’。
如果我改变这句话,我就能让它消失:
import { defineConfig } from 'vite';
至:
import { defineConfig } from 'vitest/config';
但是为什么呢?这怎么回事?为什么我必须从vitest导入defineConfig才能使它支持测试属性?
发布于 2022-05-07 04:01:50
简短回答:
因为这就是TypeScript的工作方式。Vite配置接口不了解Vitest,TS不允许过多的属性(属性没有由类型/接口定义)
因为Vite本身对Vitest和它的配置一无所知。所以Vitest必须扩展 Vite配置(定义为TS接口)
为了使用这个扩展的接口(而不是原来的接口),您必须首先导入它。
或者,您也可以使用配置Vitest中记录的“三重斜杠命令”。
/// <reference types="vitest" />
import { defineConfig } from 'vite'
export default defineConfig({
test: {
// ...
},
})
发布于 2022-07-25 08:19:14
我也遇到了类似的情况,问我同样的问题,最后我做了这样的事情:
/// <reference types="vitest" />
import { defineConfig } from 'vite';
import type { UserConfig as VitestUserConfigInterface } from 'vitest/config';
const vitestConfig: VitestUserConfigInterface = {
test: {
// vitest config, with helpful vitest typing :)
}
};
export default defineConfig({
test: vitestConfig.test,
// and now: just vite config
});
这可能会有帮助。
发布于 2022-11-15 23:30:20
以下是我所做的,以防有人还在寻找解决方案。我创建了自己的类型并扩展到UserConfig
。
...
import type { InlineConfig } from 'vitest';
import type { UserConfig } from 'vite';
interface VitestConfigExport extends UserConfig {
test: InlineConfig;
}
...
然后我将config
对象的类型转换到我的自定义接口-
export default defineConfig({
plugins: [solidPlugin()],
server: {
port: 3000,
},
test: {
environment: 'jsdom',
globals: true,
transformMode: {
web: [/\.[jt]sx?$/],
},
setupFiles: './setupVitest.ts',
},
build: {
target: 'esnext',
},
} as VitestConfigExport);
这还为新的test
属性启用了intellisense。另外,您不需要声明/// <reference types="vitest" />
。也许能帮上忙。
https://stackoverflow.com/questions/72146352
复制相似问题