前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >将Ts往Vue3中再整合一下

将Ts往Vue3中再整合一下

作者头像
前端小鑫同学
发布2022-12-26 09:08:02
4290
发布2022-12-26 09:08:02
举报
文章被收录于专栏:小鑫同学编程历险记

Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~

00. 创建一个vue3+ts的基础工程:yarn create vite

01. Ts规范data的类型(类型断言):

使用type定义Todo的类型:

代码语言:javascript
复制
type Todo = {
  id: number;
  name: string;
};

data中的属性这样来定义:

代码语言:javascript
复制
data() {
 return {
   items: [] as Todo[],
 };
},

类型推断正常并提示:

image.png
image.png

02. Ts规范props的类型(PropType):

使用type定义Title的类型:

代码语言:javascript
复制
type Title = {
  value: string;
  color: string;
};

props中的属性这样来定义:

代码语言:javascript
复制
props: {
 title: {
   type: Object as PropType<Title>,
   required: true,
 },
},

类型推断正常并提示:

image.png
image.png
image.png
image.png

03. Ts规范computed的写法(规范返回值类型):

定义制定返回类型的computed:

代码语言:javascript
复制
computed: {
 doubleCounter(): number {
   return this.counter * 2;
 },
},

04. Ts规范methods的写法(规范形参和返回值类型):

代码语言:javascript
复制
createTodo(name: string): Todo {
 return { name, id: this.items.length + 1 };
},

05. Ts规范composition api的写法:

定义属性:

代码语言:javascript
复制
defineProps({
  title: {
 type: Object as PropType<Title>,
 required: true,
  },
});

定义data:

代码语言:javascript
复制
const counter = ref(1);
const items = ref([] as Todo[]);
const todoName = ref("");

定义计算属性:

代码语言:javascript
复制
const doubleCounter = computed(() => counter.value * 2);

定义方法:

代码语言:javascript
复制
const createTodo = (name: string): Todo => {
  return { name, id: items.value.length + 1 };
};

使用type规范模块导入:

代码语言:javascript
复制
<script lang="ts" setup>
import { computed, ref } from "vue";
import type { PropType } from "vue";
import type { Todo, Title } from "../types";
</script>

06. Ts规范Vuex4.+的写法:

安装Vuex4+:yarn add vuex@next --save

模块扩展(vuex.d.ts):

代码语言:javascript
复制
// 模块扩展:this.$store强类型支持
declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
 // 应用泛型约束Store的类型
 $store: Store<State>;
  }
}

useStore类型化:

创建一个InjectionKey

代码语言:javascript
复制
export const key: InjectionKey<Store<State>> = Symbol();

按装store是携带InjectionKey

代码语言:javascript
复制
import store, { key } from "./store";
createApp(App).use(store,  key).mount("#app");

composition api中使用

代码语言:javascript
复制
import { useStore } from "vuex";
import { key } from "../store";
const store = useStore(key);
const counter = computed(() => store.state.counter);

useStore(key)再次包装,减少key的导入

代码语言:javascript
复制
export function useStore () {
  return baseUseStore(key)
}

子模块的类型规范:

  1. 定义子模块:
代码语言:javascript
复制
import { State } from "./../index";
import { Module } from "vuex";
import { Todo } from "../../types";

const initialState = {
  data: [] as Todo[],
};

// 通过值来推断类型
export type TodoState = typeof initialState;

export default {
  namespaced: true,
  state: initialState,
  mutations: {
    initTodo(state, payload: Todo[]) {
      state.data = payload;
    },
    addTodo(state, payload: Todo) {
      state.data.push(payload);
    },
  },
  actions: {
    initTodo({ commit }) {
      setTimeout(() => {
        commit("initTodo", [
          {
            id: 1,
            name: "vuex",
          },
        ]);
      }, 500);
    },
  },
} as Module<TodoState, State>;

2. 挂载到index.ts

代码语言:javascript
复制
```typescript
import { InjectionKey } from "vue";
import { createStore, Store, useStore as baseUseStore } from "vuex";
import todos, { TodoState } from "./modules/todos";


export type State = {
  counter: number;
  todos?: TodoState;
};

export const key: InjectionKey<Store<State>> = Symbol();

export const store = createStore({
  state: {
    counter: 0,
  },
  modules: {
    todos,
  },
});

export function useStore() {
  return baseUseStore(key);
}

07. TS规范Vue-Router4的写法:

  1. 安装Vuex4+:yarn add vue-router@4 --save
  2. 扩展路由配置(交叉类型):
代码语言:javascript
复制
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

export type AppRouteRecordRaw = RouteRecordRaw & {
  hidden?: boolean;
};

export default createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      component: () => import("../view/Home.vue"),
      hidden: true,
    },
  ] as AppRouteRecordRaw[],
});

08. Ts规范Axios的写法:

1. 安装axios:`yarn add axios --save`

1. 构建基本结构:

代码语言:javascript
复制
import axios from "axios";

 const http = axios.create({
    baseURL: import.meta.env.VITI_BASE_URL,
    timeout: 5000,
})

export default http;
  1. 通过泛型规范结果的类型:
image.png
image.png
image.png
image.png

09. 支持环境变量的提示

新建环境变量配置文件.env.development

代码语言:javascript
复制
VITI_BASE_URL = /api

新建/修改env.d.ts,增加ImportMetaEnv配置:

代码语言:javascript
复制
interface ImportMetaEnv {
  VITI_BASE_URL: string;
}

使用时正常提示:

image.png
image.png

由于快捷键冲突,做开发这么多年才改了一下。。。

image.png
image.png
  1. 顺便增加一下接口代理:
代码语言:javascript
复制
export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "https://jsonplaceholder.typicode.com",
        changeOrigin: true,
        // 重写地址:最终地址不携带api
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

// 调用修改
http.get<Todo>("/todos/1");

总结:

以上内容整理自“Young村长”的B站视频,单单去学习Ts语法总是没有在实践中用用学的快,推荐你们多像Young村长学习呀,老铁们。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-10-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 00. 创建一个vue3+ts的基础工程:yarn create vite
  • 01. Ts规范data的类型(类型断言):
  • 02. Ts规范props的类型(PropType):
  • 03. Ts规范computed的写法(规范返回值类型):
  • 04. Ts规范methods的写法(规范形参和返回值类型):
  • 05. Ts规范composition api的写法:
  • 06. Ts规范Vuex4.+的写法:
  • 07. TS规范Vue-Router4的写法:
  • 09. 支持环境变量的提示
  • 总结:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档