当前位置：首页 > VUE

使用ts实现vue

2026-02-10 23:47:13VUE

使用 TypeScript 实现 Vue 的核心功能

Vue 是一个渐进式 JavaScript 框架，结合 TypeScript 可以提供更好的类型检查和开发体验。以下是使用 TypeScript 实现 Vue 核心功能的方法。

初始化项目

创建一个新的 TypeScript 项目并安装必要的依赖。使用 npm 或 yarn 初始化项目，安装 Vue 和 TypeScript 相关依赖。

npm init -y
npm install vue typescript @vue/compiler-sfc --save-dev

创建 tsconfig.json 文件配置 TypeScript 编译器选项。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

创建 Vue 组件

使用 TypeScript 编写 Vue 单文件组件（SFC）。创建一个 .vue 文件并定义组件逻辑。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    const message = 'Hello, Vue with TypeScript!';
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      message,
      count,
      increment,
    };
  },
});
</script>

挂载 Vue 应用

创建一个入口文件（如 main.ts）来挂载 Vue 应用。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

类型支持

为了在 .vue 文件中获得 TypeScript 支持，需要在项目中添加 shims-vue.d.ts 文件。

使用ts实现vue

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

响应式系统

Vue 的响应式系统可以通过 ref 和 reactive 实现。以下是使用 TypeScript 定义响应式数据的示例。

import { ref, reactive } from 'vue';

const count = ref<number>(0);
const state = reactive({
  name: 'Vue',
  version: 3,
});

计算属性和侦听器

使用 computed 和 watch 实现计算属性和侦听器。

import { computed, watch } from 'vue';

const doubleCount = computed(() => count.value * 2);

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

生命周期钩子

Vue 的生命周期钩子可以通过 onMounted、onUpdated 等函数实现。

使用ts实现vue

import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component mounted');
});

组件通信

父子组件通信可以通过 props 和 emit 实现。

// Parent.vue
<template>
  <Child :message="parentMessage" @update="handleUpdate" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import Child from './Child.vue';

export default defineComponent({
  components: { Child },
  setup() {
    const parentMessage = ref('Hello from parent');
    const handleUpdate = (newMessage: string) => {
      parentMessage.value = newMessage;
    };

    return {
      parentMessage,
      handleUpdate,
    };
  },
});
</script>

// Child.vue
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  emits: ['update'],
  setup(props, { emit }) {
    const updateMessage = () => {
      emit('update', 'Updated message from child');
    };

    return {
      updateMessage,
    };
  },
});
</script>

路由和状态管理

对于路由和状态管理，可以结合 Vue Router 和 Pinia（或 Vuex）。

npm install vue-router pinia

配置路由：

// router.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

配置状态管理：

// store.ts
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});