一、引言

目前，大部分vue3项目都是使用ts开发的，但是我们在开发的过程中，难免会引用到一些老的js二方包，而这些二方包有些并没有适配ts（提供ts声明文件 xxx.d.ts），如果在我们的项目中使用js二方包，会报编译错误，那这个时候，就需要我们自己来写 ts声明文件

二、准备

1、使用vite创建一个vue3 ts项目

npm create vite@latest

2、在项目中引入js依赖

npm install jquery

三、编译报错

修改HelloWorld.vue文件为如下内容:

<script setup lang="ts">
import { ref } from 'vue';
import $ from 'jquery';

defineProps<{ msg: string }>()

const count = ref(0)
const resContent = ref('')

function doQuery() {
  $.ajax({
    url: 'https://mimg.127.net/cross/static/webmail-js6/login_index.json',
    method: 'get',
    success: (res:string) => {
      console.log(res)
      resContent.value = res
    }
  })
}
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
  <div class="customer">
    <button type="button" @click="doQuery">请求jquery</button>
    <p>
      {{ resContent }}
    </p>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

我们会看到jquery飘红，如果我们执行编译，执行编译(npm run build)也会报错

四、自定义ts声明文件

1、在根目录下创建一个 index.d.ts文件

2、在index.d.ts文件中声明jquery模块

declare module 'jquery' {
    type SuccessCallback = (res: any) => void;

    interface JQueryStatic {
        ajax(settings?: AjaxSettings): any;
    }

    interface AjaxSettings {
        url?: string | undefined;
        method?: string | undefined;
        success?: SuccessCallback | undefined;
    }

    const jqueryInstance:JQueryStatic = {}
    export default jqueryInstance
}

3、将声明文件配置到 tsconfig.json(或tsconfig.app.json)

4、如果代码测还是飘红，说明有缓存，清空一下缓存，或者执行一下编译就好

五、补充

ts声明文件，只是解决编译时的问题，我们在里面写的东西，只是为了支持ts的编译语法约束，实际编译的结果为js，调用的还是我们引入的js二方包的代码

在vue3 ts项目中引用js二方包

一、引言

二、准备

三、编译报错

四、自定义ts声明文件

五、补充