Vue 3 + TypeScript 和 Vue 3 + JavaScript 的

---

1. 安装 TypeScript 和相关依赖

Vue 3 + JavaScript

在 Vue 3 + JavaScript 中，通常不需要安装 TypeScript 相关依赖，只需安装 Vue 相关包即可。

npm install vue

Vue 3 + TypeScript

对于 Vue 3 + TypeScript，你需要安装 TypeScript 和相关的 Vue 3 类型支持包。可以通过以下命令安装：

npm install --save-dev typescript @types/node @vue/compiler-sfc ts-loader vue-loader

同时你需要配置 tsconfig.json 文件，确保 TypeScript 能够正确识别和编译 Vue 文件。

tsconfig.json 配置示例：

{
  "compilerOptions": {
    "target": "esnext",        // 编译目标为 ESNext，支持最新的 JavaScript 特性
    "module": "esnext",        // 使用 ES 模块系统
    "moduleResolution": "node",  // Node 模块解析策略
    "strict": true,            // 启用严格模式，开启所有严格类型检查
    "jsx": "preserve",         // 保留 JSX 语法以便处理 Vue 文件
    "esModuleInterop": true,   // 允许默认导入非 ES6 模块
    "skipLibCheck": true,      // 跳过库文件类型检查，提升性能
    "lib": ["esnext", "dom"],  // 包括最新的 ES 和 DOM 库
    "allowJs": true            // 允许同时使用 .js 和 .ts 文件
  },
  "include": ["src/**/*.ts", "src/**/*.vue"],  // 包含 TypeScript 和 Vue 文件
  "exclude": ["node_modules"]                   // 排除 node_modules 文件夹
}

---

2. 定义 Vue 组件

Vue 3 + JavaScript

在 JavaScript 中，组件通常使用 export default 定义，采用 Options API 来组织组件的选项。

// MyComponent.vue
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue 3 with JavaScript!"
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
};
</script>

Vue 3 + TypeScript

在 TypeScript 中，使用 defineComponent 来定义组件。这样可以让 TypeScript 更好地推导类型并进行类型检查。

// MyComponent.vue
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

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

export default defineComponent({
  name: 'MyComponent',
  data() {
    return {
      message: "Hello, Vue 3 with TypeScript!"
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
});
</script>

区别：

• 在 TypeScript 中，组件的定义通过 defineComponent 进行，这有助于 TypeScript 进行类型推导和检查。
• JavaScript 仅依赖 Vue 的 Options API，不提供类型推导。

---

3. 定义 Props

Vue 3 + JavaScript

在 JavaScript 中，使用 props 选项来定义组件的 props。对于 prop 的类型没有类型检查，所以可能会有运行时错误。

// MyComponent.vue
<template>
  <div>
    <p>{{ name }} is {{ age }} years old</p>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    age: {
      type: Number,
      default: 30
    }
  }
};
</script>

Vue 3 + TypeScript

在 TypeScript 中，defineProps 可以用来声明 props 的类型，提供类型检查。TypeScript 会推导出 props 的类型。

// MyComponent.vue
<template>
  <div>
    <p>{{ name }} is {{ age }} years old</p>
  </div>
</template>

<script lang="ts" setup>
defineProps<{
  name: string;
  age: number;
}>();
</script>

区别：

• JavaScript 中 props 的类型是通过 type 属性声明的，但没有类型检查，容易产生运行时错误。
• TypeScript 中，通过 defineProps 显式声明类型，确保类型安全。

---

4. 使用 ref 和 reactive

Vue 3 + JavaScript

在 JavaScript 中使用 ref 或 reactive 时，不会有类型推导，容易导致类型错误，尤其是对于复杂数据结构。

// MyComponent.vue
<template>
  <div>
    <button @click="increment">Increment</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);  // ref 是一个响应式引用

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

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

Vue 3 + TypeScript

在 TypeScript 中，使用 ref 和 reactive 时，你可以显式指定类型，确保类型推导的准确性。

// MyComponent.vue
<template>
  <div>
    <button @click="increment">Increment</button>
    <p>{{ count }}</p>
  </div>
</template>

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

const count = ref<number>(0);  // 显式指定类型

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

区别：

• JavaScript 中，ref 默认推导为 any 类型，不提供类型检查。
• TypeScript 中，ref 的类型可以通过泛型显式指定，确保类型安全。

---

5. 计算属性和监听器

Vue 3 + JavaScript

在 JavaScript 中使用计算属性时，返回值没有类型推导，且容易漏掉类型检查。

// MyComponent.vue
<template>
  <div>
    <p>{{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);  // 计算属性

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

    return {
      count,
      doubleCount,
      increment
    };
  }
};
</script>

Vue 3 + TypeScript

在 TypeScript 中，计算属性的类型可以被自动推导，或者你可以手动指定类型。

// MyComponent.vue
<template>
  <div>
    <p>{{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

const count = ref<number>(0);
const doubleCount = computed<number>(() => count.value * 2);  // 显式指定返回类型

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

区别：

• JavaScript 中，计算属性没有类型推导，容易遗漏类型检查。
• TypeScript 中，计算属性的返回类型可以自动推导，也可以手动指定，避免类型错误。

---

6. Vuex 和 TypeScript 配合使用

Vue 3 + JavaScript

在 JavaScript 中，Vuex 的状态和 getter、mutation 等方法没有类型检查，可能会出现类型错误。

// store.js
import { createStore } from 'vuex';

export const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count(state) {
      return state.count;
    }
  }
});

Vue 3 + TypeScript

在 TypeScript 中，可以为 Vuex 的状态、mutations 和 getters 提供类型声明，从而确保类型安全。

// store.ts
import { createStore } from 'vuex';

interface State {
  count: number;
}

export const store = createStore<State>({
 

 state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count(state) {
      return state.count;
    }
  }
});

区别：

• JavaScript 中，Vuex 的状态没有类型检查，容易导致运行时错误。
• TypeScript 中，Vuex 状态和方法都能进行类型检查，确保代码的健壮性。

---

总结

特性	Vue 3 + JavaScript	Vue 3 + TypeScript
类型检查	无类型检查，易出错	类型推导和类型检查，安全性高
开发效率	快速开发，适合小型项目	适合中大型项目，减少潜在错误
维护性	难以维护大型项目	更易维护，自动推导类型
组件定义	直接使用 data, methods	使用 defineComponent 增强类型推导
Props 类型	无类型检查，运行时验证	显式指定类型，享受编译时验证
Vuex 状态管理	无类型安全	类型安全，状态和方法类型明确
可扩展性	不适合较大项目	高扩展性，适合团队开发

在开发过程中，JavaScript 适合快速开发和小型项目，但缺乏类型检查容易导致潜在错误。而 TypeScript 提供了更高的安全性和类型推导，适合较复杂的应用和团队开发，能有效减少错误并提高代码可维护性。