在Vue 3中使用TypeScript一些高级用法示例

最新推荐文章于 2024-06-26 16:23:01 发布
最新推荐文章于 2024-06-26 16:23:01 发布
阅读量845 收藏 19
点赞数 10
分类专栏： TypeScript Vue.js(Vue 2/Vue 3) 文章标签： vue.js typescript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/WuLex/article/details/139910583
版权

在Vue 3中使用TypeScript可以提高代码的可读性和可维护性，避免一些常见的类型错误。以下是一些高级用法示例，展示如何结合Vue 3和TypeScript的强大功能。

1. 使用 defineComponent 和 类型注解

使用 defineComponent 可以帮助TypeScript更好地推断组件的类型。

import { defineComponent, PropType } from 'vue';

interface User {
  id: number;
  name: string;
}

export default defineComponent({
  name: 'UserProfile',
  props: {
    user: {
      type: Object as PropType<User>,
      required: true,
    },
  },
  setup(props) {
    // TypeScript 知道 props.user 的类型是 User
    console.log(props.user.name);
    return {};
  },
});

2. 使用 ref 和 reactive 的类型

当使用 ref 和 reactive 时，可以明确指定其类型以获得更好的类型检查和自动完成。

import { ref, reactive } from 'vue';

const count = ref<number>(0);
const user = reactive<{ id: number; name: string }>({ id: 1, name: 'John Doe' });

// 使用时，TypeScript 知道 count 是 number，user 是一个具有 id 和 name 的对象
count.value++;
console.log(user.name);

3. 类型安全的事件处理

定义事件处理函数的类型，以确保事件参数的类型安全。

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'CustomButton',
  emits: {
    click: (event: MouseEvent) => true,
  },
  setup(props, { emit }) {
    const handleClick = (event: MouseEvent) => {
      emit('click', event);
    };

    return { handleClick };
  },
});

4. 使用组合式 API 和类型

使用组合式 API 时，可以利用类型来明确定义返回的属性和方法。

import { ref, defineComponent } from 'vue';

function useCounter() {
  const count = ref(0);
  const increment = () => {
    count.value++;
  };

  return {
    count,
    increment,
  };
}

export default defineComponent({
  name: 'CounterComponent',
  setup() {
    const { count, increment } = useCounter();

    return { count, increment };
  },
});

5. 类型安全的依赖注入

使用 provide 和 inject 时，可以利用类型来确保注入的值类型安全。

import { provide, inject, defineComponent } from 'vue';

const UserSymbol = Symbol('User');

interface User {
  id: number;
  name: string;
}

export default defineComponent({
  name: 'ParentComponent',
  setup() {
    const user: User = { id: 1, name: 'John Doe' };
    provide(UserSymbol, user);

    return {};
  },
});

export default defineComponent({
  name: 'ChildComponent',
  setup() {
    const user = inject<User>(UserSymbol);
    if (user) {
      console.log(user.name);
    }

    return {};
  },
});

6. 高级类型注解

在组件中使用高级类型注解，例如使用泛型来定义更复杂的类型关系。

import { defineComponent, PropType } from 'vue';

interface ApiResponse<T> {
  data: T;
  error: string | null;
}

interface User {
  id: number;
  name: string;
}

export default defineComponent({
  name: 'UserFetcher',
  props: {
    response: {
      type: Object as PropType<ApiResponse<User>>,
      required: true,
    },
  },
  setup(props) {
    if (props.response.error) {
      console.error(props.response.error);
    } else {
      console.log(props.response.data.name);
    }
    return {};
  },
});

以上示例展示了在Vue 3中结合TypeScript的一些高级用法，帮助开发者编写更加安全和可维护的代码。通过使用类型注解、类型推断和组合式API，可以更好地利用TypeScript的优势，提高开发效率。

7. 自定义指令的类型

使用TypeScript定义自定义指令时，可以确保指令参数和值的类型安全。

import { DirectiveBinding, ObjectDirective } from 'vue';

const vFocus: ObjectDirective<HTMLElement> = {
  mounted(el: HTMLElement) {
    el.focus();
  },
};

export default vFocus;

8. 使用类型安全的 store

在使用Vuex时，结合TypeScript可以确保状态管理的类型安全。

import { createStore, Store } from 'vuex';
import { InjectionKey } from 'vue';

interface State {
  count: number;
}

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

export const store = createStore<State>({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
  },
  getters: {
    doubleCount(state): number {
      return state.count * 2;
    },
  },
});

// 在组件中使用
import { useStore } from 'vuex';

export default defineComponent({
  name: 'CounterComponent',
  setup() {
    const store = useStore(key);
    store.commit('increment');
    console.log(store.state.count);

    return {};
  },
});

9. 使用 tsconfig 进行项目配置

配置 tsconfig.json 文件，以便更好地支持TypeScript和Vue 3项目。

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

10. 使用泛型创建可复用的组件

通过泛型，可以创建更为通用和可复用的组件。

import { defineComponent, PropType } from 'vue';

interface ListItem {
  id: number;
  name: string;
}

export default defineComponent({
  name: 'GenericList',
  props: {
    items: {
      type: Array as PropType<ListItem[]>,
      required: true,
    },
    renderItem: {
      type: Function as PropType<(item: ListItem) => JSX.Element>,
      required: true,
    },
  },
  setup(props) {
    return () => (
      <ul>
        {props.items.map((item) => (
          <li key={item.id}>{props.renderItem(item)}</li>
        ))}
      </ul>
    );
  },
});

11. 使用类型安全的 Router 配置

在使用Vue Router时，通过类型注解确保路由配置的类型安全。

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

12. 类型安全的 provide 和 inject 的高级用法

通过类型注解和 Symbol，确保 provide 和 inject 的类型安全。

import { provide, inject, defineComponent, InjectionKey } from 'vue';

interface User {
  id: number;
  name: string;
}

const UserKey: InjectionKey<User> = Symbol('User');

export default defineComponent({
  name: 'ParentComponent',
  setup() {
    const user: User = { id: 1, name: 'John Doe' };
    provide(UserKey, user);

    return {};
  },
});

export default defineComponent({
  name: 'ChildComponent',
  setup() {
    const user = inject(UserKey);
    if (user) {
      console.log(user.name);
    }

    return {};
  },
});

13. 使用类型注解的组合式API

当使用组合式API时，可以通过类型注解确保类型安全和代码的可读性。

import { ref, defineComponent, Ref } from 'vue';

function useCounter() {
  const count: Ref<number> = ref(0);
  const increment = () => {
    count.value++;
  };

  return {
    count,
    increment,
  };
}

export default defineComponent({
  name: 'CounterComponent',
  setup() {
    const { count, increment } = useCounter();

    return { count, increment };
  },
});

14. 使用类型安全的 emit 事件

在使用组件的自定义事件时，可以通过类型注解确保事件参数的类型安全。

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'CustomInput',
  emits: {
    update: (value: string) => true,
  },
  setup(props, { emit }) {
    const inputValue = ref('');

    const updateValue = (event: Event) => {
      const target = event.target as HTMLInputElement;
      emit('update', target.value);
      inputValue.value = target.value;
    };

    return {
      inputValue,
      updateValue,
    };
  },
});

15. 使用类型安全的 slots

在组件中使用插槽时，可以通过类型注解确保插槽内容的类型安全。

import { defineComponent, h } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  setup(props, { slots }) {
    return () => (
      <div>
        {slots.header && slots.header()}
        <p>Content</p>
        {slots.footer && slots.footer()}
      </div>
    );
  },
});

16. 使用类型安全的混入

在Vue 3中虽然混入（mixin）不再是推荐的用法，但你仍然可以使用它们，并结合TypeScript确保类型安全。

import { defineComponent, mixins } from 'vue';

const MyMixin = defineComponent({
  data() {
    return {
      mixinData: 'This is from mixin',
    };
  },
  methods: {
    mixinMethod() {
      console.log('Method from mixin');
    },
  },
});

export default defineComponent({
  name: 'MyComponent',
  mixins: [MyMixin],
  mounted() {
    console.log(this.mixinData); // 类型安全
    this.mixinMethod(); // 类型安全
  },
});

17. 使用类型安全的 refs

在使用 ref 获取DOM元素时，可以通过类型注解确保元素类型的安全。

import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const inputRef = ref<HTMLInputElement | null>(null);

    onMounted(() => {
      if (inputRef.value) {
        inputRef.value.focus();
      }
    });

    return {
      inputRef,
    };
  },
  template: `<input ref="inputRef" />`,
});

18. 使用类型安全的组合式函数返回值

在定义组合式函数时，通过明确的类型注解返回值，可以提高类型安全性。

import { ref, computed, defineComponent, Ref } from 'vue';

function useUser() {
  const user: Ref<{ name: string; age: number } | null> = ref(null);

  const setUser = (newUser: { name: string; age: number }) => {
    user.value = newUser;
  };

  const userAge = computed(() => (user.value ? user.value.age : 0));

  return {
    user,
    setUser,
    userAge,
  };
}

export default defineComponent({
  name: 'UserComponent',
  setup() {
    const { user, setUser, userAge } = useUser();

    setUser({ name: 'John Doe', age: 30 });

    return {
      user,
      userAge,
    };
  },
});

19. 使用类型安全的异步操作

在处理异步操作时，通过类型注解可以确保返回值的类型安全。

import { ref, defineComponent, onMounted } from 'vue';

interface User {
  id: number;
  name: string;
}

export default defineComponent({
  name: 'AsyncComponent',
  setup() {
    const user = ref<User | null>(null);
    const loading = ref<boolean>(false);

    const fetchUser = async () => {
      loading.value = true;
      try {
        const response = await fetch('https://api.example.com/user');
        const data: User = await response.json();
        user.value = data;
      } catch (error) {
        console.error('Failed to fetch user', error);
      } finally {
        loading.value = false;
      }
    };

    onMounted(fetchUser);

    return {
      user,
      loading,
    };
  },
});

20. 使用类型安全的 watch

在使用 watch 时，通过类型注解确保监视的值和回调函数参数的类型安全。

import { ref, watch, defineComponent } from 'vue';

export default defineComponent({
  name: 'WatchComponent',
  setup() {
    const count = ref<number>(0);

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    return {
      count,
    };
  },
});

这些高级用法示例展示了如何在Vue 3项目中结合TypeScript，以确保代码的类型安全、可读性和可维护性。通过使用这些技术，你可以更好地利用TypeScript的强大功能，提高开发效率并减少错误。

vue3项目使用@antv/g6实现可视化流程功能
幽冥雪羽的博客
06-25 3506
G6实现可视化工作流
Vue 3 与 TypeScript 配合：类型安全与强类型应用设计
最新发布
mmc123125的博客
12-13 891
Vue 3 与 TypeScript 的结合，提供了更强的类型安全、自动补全、错误检测等优势，有助于提高开发效率并减少 bug。通过学习如何在 Vue 3 中使用 TypeScript，开发者可以构建更加稳定和高质量的应用。随着 TypeScript 越来越成为前端开发的标准，掌握它的使用将为你的 Vue 3 开发之旅提供强大的支持，并帮助你在实际项目中更加高效地工作。
【vue3】vue3中如何使用typescript
qq_2511276124的博客
05-14 7880
现在vue3和typescript搭配使用是一个较常见的方案，下面参考vue3官网总结下在vue项目中使用ts(TypeScript)的方法。
vue+typescript的基本语法
weixin_45630548的博客
11-19 549
1. 首先要在script标签中添加lang属性并且设置为ts // 1.从vue的扩充包中引入核心文件 Vue,Component import {Vue,Component} from "vue-property-decorator" //引入组件 import Two from "@/components/Two.vue" // 2.使用@Component装饰器 @Component({ //注册组件 components:{Two} }) // 3.暴露组件并继承vue基类 expo.
vue如何使用TypeScript语法
qq_39192395的博客
06-25 408
一、新建项目 vue create vue-ts-admin 按步骤开始安装，安装过程中选择TypeScript，vuex，路由router; 使用npm run serve启动项目 在vue中书写ts的必备插件！ vue-class-component 强化 Vue 组件，使用装饰器语法使 Vue 组件更好的跟TS结合使用。 vue-property-decorator在 vue-class-component 的基础上增加了更多与 Vue 相关的装饰器，使Vue组件更好的跟TS结合使用。 npm i
webstorm tslint配置
weixin_30609287的博客
07-22 832
webstorm设置 settings >> TypeScript >> TSLint, 勾选Enable,选取 tslint包路径...npm\node_modules\tslint，这里webstorm基本会自动读取 配置tslint.json { "rules": { // TS特性 "member...
Vue3+TypeScript源码学习
10-24
- **状态管理与路由管理**：在Vue3+TypeScript项目中，常用的状态管理工具有Vuex和Pinia，用于集中管理应用的状态。而Vue Router则是Vue.js官方的路由管理器，用于实现页面间的导航。 - **UI框架与组件库**：为了...
vue3 typescript gauge仪表盘效果示例
04-24
TypeScript开发，应用echarts 5.5.0，vue-echarts 6.7.0，开发echarts官网关于gauge（仪表盘）内容，主要包括以下范例的实现： * Gauge Basic Chart 基础仪表盘 * Simple Gauge 简单仪表盘 * Speed Gauge 速度仪表 *...
Coderwhy新Vue3与Typescript课程资源_ppt_文档_源码
12-30
同时，Vue3支持使用setup函数，该函数接受两个参数：props和context，这使得在TypeScript中使用setup语法更加自然，类型推断也能得到很好的支持。 Vue3的响应式系统进行了重构，采用新的Proxy对象代替了之前的...
在Vue.js中使用TypeScript的方法
10-15
在Vue.js中使用TypeScript的方法主要分为几个步骤，首先是在项目创建时进行配置，其次是介绍具体的代码实践，然后是对于未来Vue.js与TypeScript结合趋势的展望。 首先，创建项目时，可以使用Vue CLI工具进行配置。...
TypeScript快速上手语法+结合vue3用法
zhangxueyou2223的博客
02-25 5474
本篇内容不涉及TypeScript安装以及配置，具体安装及配置篇可以看下面目录，本篇只涉及TypeScript语法相关内容，及结合vue3的用法。不讲废话，简单直接直接开撸。
TypeScript 基础：接口、泛型和自定义类型在 Vue 3 中的应用
俎树振的博客
04-19 1595
介绍在 Vue 3 中应用 TypeScript 的核心特性：接口、泛型和自定义类型。通过示例展示了如何利用这些特性定义类型安全的组件属性，并创建可重用的函数和组件。通过完整的 Vue 3 组件示例，演示如何整合这些特性到实际的组件开发中，以提高代码质量和开发效率。
如何在 Vue 3 中使用 TypeScript？
有我更精彩的博客
05-29 1465
<ul></ul>
Vue3-03 快速认识TypeScript
qq_36360308的博客
06-26 934
TypeScript是一种由微软开发的开源编程语言，它是JavaScript的一个超集。TypeScript添加了静态类型检查功能，并且可以编译为纯JavaScript代码，使得开发者可以利用JavaScript的生态系统和工具。TypeScript的主要目标是增强JavaScript的可读性和可维护性，特别是在大型应用程序的开发过程中。静态类型：TypeScript引入了静态类型系统，开发者可以为变量、函数参数、返回值等添加类型注解，编译器可以检查这些类型的正确性。ECMAScript标准支持。
基于Vue3+TypeScript内置指令和封装6个常用的自定义指令
qq_42365152的博客
05-07 5524
Vue3+TypeScript自定义指令：v-copy复制、v-debounce防抖、v-draggable拖拽、v-longpress长按、v-throttle节流、v-waterMarker水印
TypeScript及TypeScript在vue3.0项目中的基本使用
热门推荐
Jeasu_0908的博客
10-08 1万+
一、 TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言，主要提供了类型系统和对 ES6的支持。它是JavaScript的一个超集，扩展了JavaScript的 语法，因此现有的 JavaScript 代码可与TypeScript 一起工作无需任何修改。 TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript可以运行在任何浏览器上。 TypeScript 是 Angular2、vue3的开发语言
vue+typeScript 自定义指令
m0_38125257的博客
01-13 334
vue+typeScript+自定义指令 以div拖住移动为例
vue3中defineComponent和defineAsyncComponent的区别及使用场景
weixin_43995143的博客
02-23 1万+
是 Vue 3 中的一个函数，用于定义一个组件。它是 Vue 3 的组合式 API 的一部分，提供了一种更加灵活和组织化的方式来定义组件。在 Vue 2 中，我们通常使用一个对象来定义组件，而在 Vue 3 中，函数提供了更多的类型支持和更好的集成。
vue3+typescript使用
u010707194的博客
04-17 1743
2. vscode开启takeover模式，使Volar和vscode内置ts扩展 使用一个 ts语言服务工作，具体步骤参考官网：https://cn.vuejs.org/guide/typescript/overview.html#volar-takeover-mode。4. 当使用时，组件属性使用defineProps定义，2.单文件组件中script标签，添加lang=”ts”属性，启用ts类型检查。）扩展，支持vue3，ts语法校验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值