若依vue3项目js版本集成typeScript

下载typeScript

在package.json里加入typeScript

添加类型声明文件

axios.d.ts

import * as axios from 'axios';

declare module 'axios' {
    interface AxiosInstance {
        (config: AxiosRequestConfig): Promise<any>;
    }
}

env.d.ts

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

declare module "*.vue" {
	import type { DefineComponent } from "vue";
	// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
	const component: DefineComponent<{}, {}, any>;
	export default component;
}

//环境变量 TypeScript的智能提示
interface ImportMetaEnv {
	VITE_APP_TITLE: string;
	VITE_APP_PORT: string;
	VITE_APP_BASE_API: string;
}

interface ImportMeta {
	readonly env: ImportMetaEnv;
}

vue-shim.d.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

auto-imports.d.ts

// Generated by 'unplugin-auto-import'
export {}
declare global {}

components.d.ts

// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'

export {}

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    
  }
}

修改main.js为main.ts

import { createApp } from 'vue'
import Cookies from "js-cookie";

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import locale from 'element-plus/es/locale/lang/zh-cn'

import '@/assets/styles/index.scss' // global css
import '@/assets/styles/grc.scss';

import App from './App.vue'
import store from './store'
import router from './router'
import directive from './directive' // directive

// 注册指令
import plugins from './plugins' // plugins
import { download } from '@/utils/request'

// svg图标
import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon/index.vue'
import elementIcons from '@/components/SvgIcon/svgicon'

import './permission' // permission control

import { useDict } from '@/utils/dict'
import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi'

// 分页组件
import Pagination from '@/components/Pagination/index.vue'
// 自定义表格工具组件
import RightToolbar from '@/components/RightToolbar/index.vue'
// 富文本组件
import Editor from "@/components/Editor/index.vue"
// 文件上传组件
import FileUpload from "@/components/FileUpload/index.vue"
// 图片上传组件
import ImageUpload from "@/components/ImageUpload/index.vue"
// 图片预览组件
import ImagePreview from "@/components/ImagePreview/index.vue"
// 自定义树选择组件
import TreeSelect from '@/components/TreeSelect/index.vue'
// 字典标签组件
import DictTag from '@/components/DictTag/index.vue'

const app = createApp(App)

// 全局方法挂载
app.config.globalProperties.useDict = useDict
app.config.globalProperties.download = download
app.config.globalProperties.parseTime = parseTime
app.config.globalProperties.resetForm = resetForm
app.config.globalProperties.handleTree = handleTree
app.config.globalProperties.addDateRange = addDateRange
app.config.globalProperties.selectDictLabel = selectDictLabel
app.config.globalProperties.selectDictLabels = selectDictLabels

// 全局组件挂载
app.component('DictTag', DictTag)
app.component('Pagination', Pagination)
app.component('TreeSelect', TreeSelect)
app.component('FileUpload', FileUpload)
app.component('ImageUpload', ImageUpload)
app.component('ImagePreview', ImagePreview)
app.component('RightToolbar', RightToolbar)
app.component('Editor', Editor)

app.use(router)
app.use(store)
app.use(plugins)
app.use(elementIcons)
app.component('svg-icon', SvgIcon)

directive(app)

// 使用element-plus 并且设置全局的大小
app.use(ElementPlus, {
  locale: locale,
  // 支持 large、default、small
  size: Cookies.get('size') || 'default'
})

app.mount('#app')

修改vite.config.js为vite.config.ts 内容不变

添加tsconfig.json文件

{
	"compilerOptions": {
		"allowJs": true,
		"target": "ESNext",
		"useDefineForClassFields": true,
		"module": "ESNext",
		"moduleResolution": "node",
		"strict": true,
		"jsx": "preserve",
		"noEmit": true,
		"noImplicitAny": false,
		"sourceMap": true,
		"resolveJsonModule": true,
		"isolatedModules": true,
		"esModuleInterop": true,
		"lib": ["ESNext", "DOM"],
		"skipLibCheck": true, // 不对第三方依赖类型检查 ，element-plus 生产打包报错
		"allowSyntheticDefaultImports": true, // 默认导入
		"baseUrl": ".",
		"paths": {
			"@/*": ["src/*"]
		},
		"types": ["vite/client", "element-plus/global"],
		"outDir": "dist", // 请保留这个属性，防止tsconfig.json文件报错
	},

	"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
	"exclude": ["node_modules", "dist", "script"],
}

将index.html下的导入入口文件修改为main.ts

以上就是将若依vue3js版本集成typeScript的详细步骤，如有不对，欢迎大佬前来指正