vue3：TS和JS的区别

Vue 3 引入了许多新特性，并且在API和工具链方面有了显著的改进。其中最主要的变化之一是使用TypeScript作为首选的JSX 或模板语言。

TypeScript 和 JavaScript 的主要区别：

1. 类型系统：TypeScript 是 JavaScript 的一个超集，添加了静态类型检查。这使得在编译时能够发现许多潜在的运行时错误。
2. 类和模块：TypeScript 支持使用类和模块来组织代码，这使得代码更易于维护和扩展。
3. 接口：TypeScript 中的接口有助于定义对象的结构和行为。
4. 类型注释：TypeScript 要求你为变量指定类型，这有助于文档化代码并提高代码的自说明性。
5. 编译时类型检查：TypeScript 在编译时进行类型检查，而不是在运行时。
6. 可选链和不确定性处理：TypeScript 引入了可选链和非空断言操作符，这有助于处理可能未定义的对象属性。
7. 装饰器：TypeScript 提供了装饰器，这是一个提供元编程能力的特性。
8. 泛型：TypeScript 使用泛型来创建可复用的组件，这些组件可以对不同类型的对象进行操作。

Vue 3 和 TypeScript 的基本设置示例：

首先，确保安装了Node.js和npm。

1. 创建一个新的Vue 3项目使用Vue CLI：

npm install -g @vue/cli
vue create my-vue3-project

2. 在项目中添加TypeScript支持：

cd my-vue3-project
vue add typescript

3. 修改tsconfig.json文件以满足你的项目需求。
4. 在.vue文件中使用TypeScript：

<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'MyComponent',
  props: {
    // 使用接口定义prop的结构
    message: String
  },
  setup(props) {
    // setup函数中可以访问props
    console.log(props.message);
  }
});
</script>

5. 在main.ts中使用TypeScript：

import { createApp } from 'vue';
import App from './App.vue';
 
createApp(App).mount('#app');

6. 在shims-vue-define.d.ts中添加TypeScript类型声明：

import Vue from 'vue';
 
declare module 'vue' {
  export interface ComponentCustomProperties {
    // 在这里定义全局属性
  }
}

以上是一个基本的Vue 3和TypeScript集成示例。在实际项目中，你可能还需要配置更多的TypeScript特性，比如编译选项、类型声明文件或类型保护。