024;尚硅谷回顾ts中的接口和自定义类型泛型,学习示例

src/App.vue

@@ -1,9 +1,7 @@
 <template>
     <div class="app">
         <h1>Hello World,你好呀!</h1>
-        <h2 ref="title2">我是一个Vue3的项目</h2>
+
-        <button @click="changeCity">点击改变</button>
-        <Person ref="ren"/>
     </div>
 
 
@@ -11,13 +9,7 @@
     </template>
 
     <script setup lang="ts">
-        import { ref } from 'vue';
+
-        const title2 = ref('');//定义一个变量
-        const ren = ref('');//定义一个变量
-        import Person from './components/Person.vue';
-        function changeCity(){
-            console.log(ren.value)//获取标签
-        }
         
     </script>
 

src/components/Person.vue

@@ -1,8 +1,7 @@
 <template>
 <div class="person">
 <h1>ref属性标签示例</h1>
-<h2 ref="title2">北京</h2>
+
-<button @click="changeCity">点击改变</button>
 
 
 
@@ -14,27 +13,15 @@
     
     <script setup lang="ts">
     
-    import { ref, defineExpose } from 'vue'
+    import {type PersonInter, type Persons } from '@/types'
-    const title2 = ref('')//ref属性标签示例
-    let a = ref('吃饭')//定义一个变量
-    let b = ref('睡觉')//定义一个变量
-    let c = ref('打豆豆')//定义一个变量
-    let d = ref('完善')//定义一个变量
-    defineExpose({//暴露变量
-        a,
-        b,
-        c,
-        d
-
-    })
-
-    function changeCity(){
-        console.log(title2.value)//获取标签
-    }
-
 
 
+    let person:PersonInter = {name:'张三',age:20,id:'asyud7asfd01'}
     
+    let personList:Persons = [{name:'张三',age:20,id:'asyud7asfd01'},
+                                        {name:'李四',age:21,id:'asyud7asfd02'},
+                                        {name:'王五',age:22,id:'asyud7asfd03'}
+                    ]
 
     </script>
 

src/types/index.ts

@@ -0,0 +1,11 @@
+
+// 定义一个接口，用于描述一个人的信息
+export interface PersonInter {
+    name: string;
+    age: number;
+    id: string;
+
+}
+
+// 定义一个类型，用于描述一个人的数组
+export type Persons = PersonInter[];