Vue3项目引用TS语法实例

基础语法

定义data
//script标签上 **lang="ts"**
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
//定义一个类型type或者接口interface来约束data
type Todo = {
  id: number,
  name: string,
  completed: boolean
}

export default defineComponent({
	//使用reactive时,可以用toRefs解构导出,在template就可以直接使用了
	const data = reactive({
	  todoList: [] as Todo[]
	})
	//可以使用ref或者toRefs来定义响应式数据
	const count = ref(0);
	//使用ref在setup读取的时候需要获取xxx.value,但在template中不需要
	console.log(count.value)
	return {
	  ...toRefs(data)
	}
})
</script>
定义props
import { defineComponent, PropType} from 'vue';
interface UserInfo = {
  id: number,
  name: string,
  age: number
}
export default defineComponent({
//props需要使用PropType泛型来约束。
  props: {
    userInfo: {
      type: Object as PropType<UserInfo>, // 泛型类型
      required: true
    }
  },
})
定义methods
import { defineComponent, reactive, ref, toRefs } from 'vue';

type Todo = {
  id: number,
  name: string,
  completed: boolean
}

export default defineComponent({
  const data = reactive({
    todoList: [] as Todo[]
  })
  // 约束输入和输出类型
  const newTodo = (name: string):Todo  => {
    return {
      id: this.items.length + 1,
      name,
      completed: false
    };
  }
  const addTodo = (todo: Todo): void => {
    data.todoList.push(todo)
  }
  return {
    ...toRefs(data),
    newTodo,
    addTodo
  }
})

vue-router

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../views/Home.vue';
//routes的约束类型是RouteRecordRaw
const routes: Array< RouteRecordRaw > = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
];
//createRouter创建router实例
const router = createRouter({
//router的模式分为
	//createWebHistory -- history模式
	//createWebHashHistory -- hash模式
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;
扩展路由额外属性
// 联合类型
//在实际项目开发中,常常会遇到这么一个场景
//某一个路由是不需要渲染到侧边栏导航上的
//此时我们可以给该路由添加一个hidden属性来实现。
//在ts的强类型约束下,添加额外属性就会报错,那么我们就需要扩展RouteRecordRaw类型。
type RouteConfig = RouteRecordRaw & {hidden?: boolean}; //hidden 是可选属性
const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    hidden: true,
    meta: {
      permission: true,
      icon: ''
    }
  }
];
在setup中使用
//需要导入useRouter创建一个router实例。
import { useRouter } from 'vue-router';
import { defineComponent } from 'vue';
export default defineComponent({
  setup () {
    const router = useRouter();
    goRoute(path) {
       router.push({path})
    }
  }
})

vuex#####

使用this.$store
import { createStore } from 'vuex';
export type State = {
  count: number
}

export default createStore({
  state: {
    count: 0
  }
});
  • 需要创建一个声明文件vuex.d.ts
import {ComponentCustomProperties} from 'vue';
import {Store} from 'vuex';
import {State} from './store'
declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $store: Store<State>
    }
}
在setup中使用
  • 定义InjecktionKey
import { InjectionKey } from 'vue';
import { createStore, Store } from 'vuex';

export type State = {
  count: number
}
// 创建一个injectionKey
export const key: InjectionKey<Store<State>> = Symbol('key');
  • 在安装插件时传入key
// main.ts
import store, { key } from './store';
app.use(store, key);
  • 在使用useStore时传入
import { useStore } from 'vuex';
import { key } from '@/store';
export default defineComponent({
  setup () {
    const store = useStore(key);
    const count = computed(() => store.state.count);
    return {
      count
    }
  }
})
模块
  • 新增一个todo模块。导入的模块,需要是一个vuex中的interface Module的对象,接收两个泛型约束
  • 第一个是该模块类型
import { Module } from 'vuex';
import { State } from '../index.ts';

type Todo = {
  id: number,
  name: string,
  completed: boolean
}

const initialState = {
  todos: [] as Todo[]
};

export type TodoState = typeof initialState;

export default {
  namespaced: true,
  state: initialState,
  mutations: {
    addTodo (state, payload: Todo) {
      state.todos.push(payload);
    }
  }
} as Module<TodoState, State>; //Module<S, R> S 该模块类型 R根模块类型
  • 第二个是根模块类型
// index.ts
export type State = {
  count: number,
  todo?: TodoState // 这里必须是可选,不然state会报错
}

export default createStore({
  state: {
    count: 0
  }
  modules: {
    todo
  }
});
  • 使用:
setup () {
  console.log(store.state.todo?.todos);
}

elementPlus

yarn add element-plus
完整引入
import { createApp } from 'vue'
import ElementPlus from 'element-plus';import 'element-plus/lib/theme-chalk/index.css';import App from './App.vue';
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000, locale })
app.mount('#app')
按需加载
  • 需要安装babel-plugin-component插件:
  • 安装依赖包
yarn add babel-plugin-component -D
  • 加入配置
// babel.config.js
plugins: [
    [
      'component',
      {
        libraryName: 'element-plus',
        styleLibraryName: 'theme-chalk'
      }
    ]
]
  • 创建 element 组件文件
import 'element-plus/lib/theme-chalk/index.css';
import 'dayjs/locale/zh-cn';
import locale from 'element-plus/lib/locale';
import lang from 'element-plus/lib/locale/lang/zh-cn';
import {
  ElAside,
  ElButton,
  ElButtonGroup,
} from 'element-plus';

const components: any[] = [
  ElAside,
  ElButton,
  ElButtonGroup,
];

const plugins:any[] = [
  ElLoading,
  ElMessage,
  ElMessageBox,
  ElNotification
];

const element = (app: any):any => {
  // 国际化
  locale.use(lang);
  // 全局配置
  app.config.globalProperties.$ELEMENT = { size: 'small' };
  
  components.forEach(component => {
    app.component(component.name, component);
  });

  plugins.forEach(plugin => {
    app.use(plugin);
  });
};

export default element;
  • 引用于项目
// main.ts
import element from './plugin/elemment'

const app = createApp(App);
element(app);

axios

  • axios的安装使用和vue2上没有什么大的区别,如果需要做一些扩展属性,还是需要声明一个新的类型。
type Config = AxiosRequestConfig & {successNotice? : boolean, errorNotice? : boolean}
import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
import { ElMessage } from 'element-plus';
const instance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL || '',
  timeout: 120 * 1000,
  withCredentials: true
});

// 错误处理
const err = (error) => {
  if (error.message.includes('timeout')) {
    ElMessage({
      message: '请求超时,请刷新网页重试',
      type: 'error'
    });
  }
  if (error.response) {
    const data = error.response.data;
    if (error.response.status === 403) {
      ElMessage({
        message: 'Forbidden',
        type: 'error'
      });
    }
    if (error.response.status === 401) {
      ElMessage({
        message: 'Unauthorized',
        type: 'error'
      });
    }
  }
  return Promise.reject(error);
};

type Config = AxiosRequestConfig & {successNotice? : boolean, errorNotice? : boolean}

// 请求拦截
instance.interceptors.request.use((config: Config) => {
  config.headers['Access-Token'] = localStorage.getItem('token') || '';
  return config;
}, err);

// 响应拦截
instance.interceptors.response.use((response: AxiosResponse) => {
  const config: Config = response.config;

  const code = Number(response.data.status);
  if (code === 200) {
    if (config && config.successNotice) {
      ElMessage({
        message: response.data.msg,
        type: 'success'
      });
    }
    return response.data;
  } else {
    let errCode = [402, 403];
    if (errCode.includes(response.data.code)) {
      ElMessage({
        message: response.data.msg,
        type: 'warning'
      });
    }
  }
}, err);

export default instance;

setup script

  • 官方提供了一个实验性的写法,直接在script里面写setup的内容,即:setup script。
  • 之前我们写组件是这样的:
<template>
  <div>
    {{count}}
    <ImgReview></ImgReview >
  </div>
</template>
<script lang="ts">
import { ref, defineComponent } from "vue";
import ImgReview from "./components/ImgReview.vue";

export default defineComponent({
  components: {
    ImgReview,
  },
  setup() {
    const count = ref(0);
    return { count };
  }
});
</script>
  • 启用setup script后:在script上加上setup
<template>
  <div>
    {{count}}
    <ImgReview></ImgReview>
  </div>
</template>
<script lang="ts" setup>
	import { ref } from "vue";
	import ImgReview from "./components/ImgReview.vue";
	const count = ref(0);
</script>
  • 是不是看起来简洁了很多,组件直接导入就行了,不用注册组件,数据定义了就可以用。其实我们可以简单的理解为script包括的内容就是setup中的,并做了return。
导出方法
const handleClick = (type: string) => {
  console.log(type);
}
定义props
  • 使用props需要用到defineProps来定义,具体用法跟之前的props写法类似:
  • 基础用法
import { defineProps } from "vue";
const props = defineProps(['userInfo', 'gameId']);
  • 构造函数进行检查 给props定义类型:
const props = defineProps({
  gameId: Number,
  userInfo: {
      type: Object,
      required: true
  }
});
  • 使用类型注解进行检查
defineProps<{
  name: string
  phoneNumber: number
  userInfo: object
  tags: string[]
}>()
  • 可以先定义好类型:
interface UserInfo {
  id: number,
  name: string,
  age: number
}

defineProps<{
  name: string
  userInfo: UserInfo
}>()
defineEmit
import { defineEmit } from 'vue';

// expects emits options
const emit = defineEmit(['kk', 'up']);
const handleClick = () => {
  emit('kk', '点了我');
};
<Comp @kk="handleClick"/>

<script lang="ts" setup>
const handleClick = (data) => {
  console.log(data)
}
</script>
获取上下文
  • 在标准组件写法里,setup 函数默认支持两个入参:
    在这里插入图片描述
  • 在setup script 中使用useContext获取上下文:
 import { useContext } from 'vue'
 const { slots, attrs } = useContext();
  • 获取到的slots,attrs跟setup里面的是一样的。

参考地址

  • 7
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue TS大数据可视化实例的源码是基于Vue框架和TypeScript语言编写的。这个实例是一个用于展示大量数据的可视化界面,可以通过图表、图形等形式直观地呈现数据。 在源码中,首先会引入Vue和需要的其他插件或库,例如echarts、d3等用于数据可视化的库。然后,会定义一个Vue的根组件,这个组件将包含整个可视化界面的布局和逻辑。根组件会包含子组件,用于展示具体的图表或图形。 在组件的代码中,会使用TypeScript来定义数据的类型和接口,以确保代码的类型安全。例如,可以定义一个接口来描述一个数据点的属性,包括x轴坐标、y轴坐标等。然后,在组件中,可以使用这个接口定义数据数组的类型,并进行数据的处理和绑定。 在组件的生命周期钩子函数中,会进行数据的加载和处理。可以从后端获取大量的数据,并对数据进行过滤、排序或其他操作。然后,将处理后的数据传递给子组件,用于图表的绘制和展示。 在子组件中,可以使用echarts或d3等库来创建图表或图形。可以根据需求选择合适的图表类型,例如饼图、柱状图、折线图等。还可以设置图表的样式、颜色、标签等,以使得数据可以更直观地展示给用户。 总之,Vue TS大数据可视化实例的源码包括了用于展示大量数据的可视化界面的逻辑和布局代码,以及使用echarts、d3等库创建图表或图形的代码。它通过Vue框架和TypeScript语言的使用,可以提高代码的可维护性和类型安全性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值