TS+VUE3 初学 简单了解

Vue 3 是 Vue.js 的一个新版本，它引入了许多新特性和改进。TypeScript 是 JavaScript 的一个超集，它提供了类型系统来增强代码的可维护性和可预测性。

要在 Vue 3 中使用 TypeScript，你需要做以下几步：

1. 创建一个新的 Vue 3 项目并启用 TypeScript：

# 使用 Vue CLI 创建项目
vue create my-vue3-project
 
# 在提示选择预设时，选择 "Manually select features"
# 然后选择 "TypeScript" 和其他你需要的特性
# 最后，确保选择了 Vue 3 作为版本

2. 在你的 Vue 组件中使用 TypeScript：

<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'MyComponent',
  setup() {
    // 这里可以写 TypeScript 代码
  }
});
</script>

3. 配置 TypeScript 编译选项（可能需要在 tsconfig.json 中调整）。
4. 添加类型声明文件，如 .d.ts 文件，以扩展 TypeScript 对 Vue 3 的理解。

这是一个简单的 Vue 3 组件示例，使用 TypeScript 编写：

<template>
  <div>{{ message }}</div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello, Vue 3 + TypeScript!'
    };
  }
});
</script>

以上代码创建了一个简单的 Vue 3 组件，它在页面上显示一条欢迎消息。这只是 Vue 3 和 TypeScript 结合使用的一个基本示例，实际项目中会涉及更复杂的类型声明和工程配置。