Vue3之TypeScript使用说明

1.ref数据类型定义

通过泛型的方式覆盖默认推到的类型

import {ref} from "vue"
const str = ref<string>("")
const done = ref<number|string>(123)

可以通过Ref这个类型

import { ref } from 'vue'
import type { Ref } from 'vue'

const year: Ref<string | number> = ref('2020')
const done: Ref<boolean> = ref(true)

2.reactive数据类型定义

import { reactive } from "vue"

interface IBody{
    width:string;
    height:number;
}
interface IUserInfo{
    body:IBody;
    name:string;
    age:number;
    sex:string;
    date:Date;
    map:Map<any,any>;
}
const userInfo:IUserInfo = reactive({
    body:{
        width:"100",
        height:200
    },
    name:"小明",
    age:12,
    sex:"女",
    date:new Date(),
    map:new Map(),
})

//OR

const userInfo = reactive<IUserInfo>({
    body:{
        width:"100",
        height:200
    },
    name:"小明",
    age:12,
    sex:"女",
    date:new Date(),
    map:new Map(),
})

3.路由

import { RouteRecordRaw } from "vue-router"
const routes:Array<RouteRecordRaw> = [
    {
        path:"/",
        component:...
    }
]

4.nprogress爆红问题

1.在项目中找到名为tsconfig.json的项目

"allowJs": true //允许引入JS文件

2.在utils文件夹下创建一个nprogress.js

import nprogress from 'nprogress';
export default nprogress;

3.在需要使用的地方直接引入该文件即可

//例如 router/index.ts
import nprogress from "../utils/nprogress.js"
//结束函数
nprogress.done()
//开始函数
nprogress.start()

PS:该库需要引入css样式才能生效--import "nprogress/nprogress.css"

1.解决nprogress爆红问题

/** 
 * Ts引入nprogress会爆红
 * 解决:
 *    1. npm i @types/nprogress
 *    在这个文件中引入下面代码[vite-env.d.ts]
 *    2.declare module 'nprogress'
 */

5.# element-plus按需引入爆红问题

//1.在tsconfig.json文件下
 `src/**/*.d.ts` 改成  `**/*.d.ts`
 
 //修改后
 "include": ["src/**/*.ts", "**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

6.path引入爆红问题

解决:下载yarn add @types/node --D

//vite.config.ts
 import {join} from "path" // 爆红

resolve: {
    //  配置别名
    alias: {
      '@': join(__dirname, './src')
    }
  }

axios的封装以及api的封装

axios.ts

//axios
import axios, { AxiosResponse, AxiosRequestConfig, AxiosError } from "axios"

axios.create({
  baseURL: '', //默认地址
  timeout: 0 // 超时时间
})

//这里函数返回的类型为Any，不知道写啥
axios.interceptors.request.use((config: AxiosRequestConfig): any => {
  return config;
}, (err: AxiosError): Promise<Error> => {
  return Promise.reject(err);
});

axios.interceptors.response.use((res: AxiosResponse): AxiosResponse => {
  return res.data
}, (err: AxiosError): Promise<Error> => {
  switch (err && err.response && err.response.status) {
    case 401:
      break;
    case 402:
      break;
    case 403:
      break;
    case 404:
      alert("Request failed with status code 404")
      break;
    case 500:
      break;
    case 501:
      break;
    case 502:
      break;
    default:
      break;
  }
  return Promise.reject(err)
})

api.ts

import axios, { AxiosInstance, AxiosResponse } from "axios"

interface IApi {
  JSON: string;
  APICode: number;
}

export const api = (data: IApi): Promise<AxiosResponse> => {
  return axios({
    url: "",
    method: "POST",
    data,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  })
}

a.vue

import {getCurrentInstance,ComponentInternalInstance} from "vue"

const { proxy } = getCurrentInstance() as ComponentInternalInstance


//  $api会爆红，目前不知道咋解决，类型断言Any的话，那么api函数接口类型者不生效
proxy?.$api()

通过DOM2级创建事件

// 关闭按钮
function close(): void {
  console.log('关闭');
  window.addEventListener('keyup', keyupFn, false);
}
//按键事件函数，使用完销毁掉
function keyupFn(e: KeyboardEvent): void {
  if (e.key === 'Escape') {
    emit('update:modelValue', !props.modelValue);
    window.removeEventListener('keyup', keyupFn);
  }
}

常见的JavaScript事件类型和相应的事件对象接口：

• 点击事件（click）：MouseEvent
• 鼠标移动事件（mousemove）：MouseEvent
• 鼠标进入和退出元素事件（mouseenter、mouseleave）：MouseEvent
• 双击事件（dblclick）：MouseEvent
• 键盘按下和释放事件（keydown、keyup）：KeyboardEvent
• 文本输入事件（input）：InputEvent
• 资源加载事件（load、unload）：Event
• HTTP请求事件（readystatechange）：Event
• 表单提交事件（submit）：Event
• 元素被选中事件（select）：Event
• 更新页面滚动事件（scroll）：UIEvent
• 开始和停止拖动事件（dragstart、dragend）：DragEvent
• 拖动元素进入和离开目标元素的事件（dragenter、dragleave）：DragEvent
• 元素在拖放目标上位置变化的事件（dragover）：DragEvent
• 将元素拖放到目标上释放时的事件（drop）：DragEvent
• 图像或媒体加载错误时的事件（error）：MediaError
• 可折叠面板展开和折叠事件（show、hide）：Event
• 音频或视频播放暂停事件（play、pause）：Event
• 动画开始、运行和结束事件（animationstart、animationend、animationiteration）：AnimationEvent
• 与过渡效果相关的事件（transitionstart、transitionrun、transitionend、transitioncancel）: TransitionEvent
• 设备方向更改事件（deviceorientation、devicemotion）：DeviceOrientationEvent、DeviceMotionEvent
• 视频尺寸加载事件（loadedmetadata）：Event
• 用户剪切板操作事件（copy、cut、paste）：ClipboardEvent
• 播放列表突然结束时的事件（ended）：Event
• 当某些数据已经下载时的事件（progress）：ProgressEvent
• WebSocket事件（open、message、close、error）：Event
• 表格排序事件（sort）：Event
• 离线缓存事件（cached、obsolete、updateready）：Event
• WebGL上下文捕获事件（webglcontextlost、webglcontextrestored）：WebGLContextEvent
• 长按事件（longpress）：PointerEvent
• Web Socket 关闭事件（close）：CloseEvent
• 指针移动事件 （pointermove）：PointerEvent
• 设备接触屏幕事件（touchstart、touchmove、touchend）：TouchEvent
• 设备方向锁定状态更改事件（orientationchange）：Event
• 全屏切换事件（fullscreenchange、fullscreenerror）：Event
• 数据在目标位置可用时的事件（readystatechange）：Event
• 网络连接状态变化时的事件（online、offline）：Event

TIP

需要注意的是，并不是所有浏览器都支持所有这些事件。具体取决于浏览器版本、操作系统、设备类型和其他因素。