将vue-web-terminal导入vue中出现typescript错误

[YunHerry]

版本: 3.2.2 使用了typescript main.ts

import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import 'vue-web-terminal/lib/theme/dark.css'
import Terminal from "vue-web-terminal";
import echarts from 'echarts';
const app = createApp(App);
app.use(router).use(Terminal).use(ElementPlus).mount("#app");
app.config.globalProperties.$echarts = echarts;

ERROR in src/main.ts:11:21
TS2345: Argument of type '__VLS_WithTemplateSlots<DefineComponent<{ title: { type: StringConstructor; default: string; }; name: { type: StringConstructor; default: string; }; initLog: { type: { (arrayLength: number): Message[]; (...items: Message[]): Message[]; new (arrayLength: number): Message[]; new (...items: Message[]): Message[]; ... 4...' is not assignable to parameter of type 'Plugin<[]>'.
  Property 'install' is missing in type 'ComponentPublicInstanceConstructor<{ $: ComponentInternalInstance; $data: {}; $props: { title?: string | undefined; name?: string | undefined; initLog?: Message[] | undefined; ... 36 more ...; "onOn-inactive"?: ((...args: any[]) => any) | undefined; }; ... 10 more ...; $watch<T extends string | ((...args: any) => an...' but required in type '{ install: (app: App<any>) => any; }'.
     9 | import echarts from 'echarts';
    10 | const app = createApp(App);
  > 11 | app.use(router).use(Terminal).use(ElementPlus).mount("#app");
       |                     ^^^^^^^^
    12 | app.config.globalProperties.$echarts = echarts;

[tzfun]

3.2.2版本经过ts项目测试验证过，刚刚在sandbox起了一个干净的 TS 项目是没问题的：https://codesandbox.io/p/devbox/vue-web-terminal-ts-vlpdcz

这些点你再确认一下看看？

1. 你的项目中是否有对 *.vue 文件做特殊处理
2. 你的项目中对是否有对TS declare做特殊处理，v3版本的terminal插件打包出来实际上还是 js，引入项目也是js

[YunHerry]

感谢解答。确实对vue文件做了特殊处理(

[YunHerry]

不太对,我检查了一下d.ts的声明,只有一个默认的声明

declare module "*.vue" {
  import { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

除了这个声明以外没有别的涉及了对*.vue的处理 我使用的是vuecli,并不是vite(

[YunHerry]

我重新使用vuecli创建了一个新的项目,这个项目里只有scssloader和typescript,但是在我use了Terminal之后仍然会爆一样的问题

TS2345: Argument of type '__VLS_WithTemplateSlots<DefineComponent<{ title: { type: StringConstructor; default: string; }; name: { type: StringConstructor; default: string; }; initLog: { type: { (arrayLength: number): Message[]; (...items: Message[]): Message[]; new (arrayLength: number): Message[]; new (...items: Message[]): Message[]; ... 4...' is not assignable to parameter of type 'Plugin<[]>'.
  Property 'install' is missing in type 'ComponentPublicInstanceConstructor<CreateComponentPublicInstance<Readonly<ExtractPropTypes<{ title: { type: StringConstructor; default: string; }; name: { type: StringConstructor; default: string; }; initLog: { type: { (arrayLength: number): Message[]; (...items: Message[]): Message[]; new (arrayLength: number): Mes...' but required in type '{ install: (app: App<any>) => any; }'.
    3 | import router from "./router";
    4 | import Terminal from "vue-web-terminal";
  > 5 | createApp(App).use(Terminal).use(router).mount("#app");
      |                    ^^^^^^^^
    6 |

[tzfun]

我重新使用vuecli创建了一个新的项目,这个项目里只有scssloader和typescript,但是在我use了Terminal之后仍然会爆一样的问题

刚刚新建了一个vue-cli构建的ts项目确实有这个问题，我猜测是因为 .d.ts 不全以及打包输出的原因，因为这个 v3 版本打包发布后仍然是一个js版本不是一个完整的 ts 版本，所以目前暂时只加了部分 .d.ts 仅仅是为了提供一部分 API 的类型区别，后续需要发一个纯ts版本才能解决这个问题。

暂时的解决办法：添加 @ts-ignore 注释，跳过编译判断，并不影响插件的使用。

// @ts-ignore
createApp(App).use(Terminal).mount("#app");

最后感谢你提供这个信息 👍

[YunHerry]

感谢解答(

[Fengtao1314520]

in latest version (V3.3.0), still exist this issue and use

• vue 3.4.15
• Vite 5.0.11

[tzfun]

in latest version (V3.3.0), still exist this issue

Yes, this problem is not addressed, solving it requires generating a .d.ts file for the compiler to recognize the function, but I am not familiar with it, you can submit PR if you are interested.

You can temporarily use @ts-ignore to mask errors.