一、vite项目中<script setup lang="ts"> : lang="ts" 是表明支持ts校验（ts 全称typescript,是es6语法，是javascript的超集强类型编程语言，类似java，定义变量类型后，赋值类型不一致，会提示，但是可以运行

国内网址：TypeScript中文网 · TypeScript——JavaScript的超集）

如果声明类型和设置值类型不一致会有提示，如图

不能将类型“string”分配给类型“number”。ts(2322),

二、使用接口声明数据类型 interface，ps：interface关键字要<script setup lang="ts"> 加上lang="ts"不然会报错

例子如下：

//http://tslang.cn/docs/handbook/interfaces.htmlinterface User {//接口名称首字母大写id:number;name:string;}const user2:User=reactive({id:true,name:'小龙'})

完整例子如下：

<script setup lang="ts"> //lang="ts" 是表明支持ts校验/*** vue3+typescript语法* 上面要加 lang="ts" 下面写的代码都是基于ts强类型*/import {reactive} from 'vue';//默认会推导得到对应的数据类型：{id:number,name:string}const state = reactive({id: 123,name: '李四'});//不能将类型“string”分配给类型“number”。ts(2322),//state.id='345';//使用接口声明数据类型 interface//http://tslang.cn/docs/handbook/interfaces.htmlinterface User {//接口名称首字母大写id:number;name:string;}const user2:User=reactive({id:234,name:'小龙'})//user2.id=trueuser2.id=4556
</script><template><div>{{ state.id }}</div>
</template><style scoped></style>

小知识：

es3 的时候，声明变量例如

var i=1; 修改变量值i='1232' ，可以随时变

let b=true;修改变量值 b='sss',也可随时变

es6

声明常量 const i=1,修改变量值 i='sss',值不会改变