vue3

13.Vue3/project2/src/App.vue

@@ -15,6 +15,7 @@
     <Demo12/>
     <Demo13 v-if='show'/>
     <Demo14 ref="flower" />
+    <Demo15/>
   </div>
 </template>
 
@@ -39,6 +40,7 @@ import Demo11 from './components/Demo11.vue'
 import Demo12 from './components/Demo12.vue'
 import Demo13 from './components/Demo13.vue'
 import Demo14 from './components/Demo14.vue'
+import Demo15 from './components/Demo15.vue'
 // vue2 选项式API => Option API
 // Vue3 组合式API => component API
 // export default {

13.Vue3/project2/src/components/Demo15.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h1>TS</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import  {happy,partOne,aa} from '../types/demo15'
+import { ref, reactive} from 'vue'
+let a = ref(10)
+// 函数 泛型继承接口
+function fn1<T extends happy>(a:T):T {
+    return a;
+}
+let newList:partOne = reactive([
+    {
+        id:1,
+        name:"孙悟空",
+        age:10
+    }
+])
+console.log(aa);
+console.log(fn1({jump:"0"}))
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project2/src/components/Demo4.vue

@@ -14,9 +14,11 @@ import { ref, reactive} from 'vue'
  * 1.基本数据类型
  * 2.引用数据类型
  * RefImpl
+ * 浅层次的数据类型
  * reactive
  * 1.引用数据类型
  * Proxy
+ * 深层次的数据类型
  */
 let obj = reactive({
     name:"小花",
@@ -26,6 +28,13 @@ let obj1 = ref({
     name:"小花1",
     age:101
 })
+let a = {
+    b:{
+        c:{
+            d:0
+        }
+    }
+}
 console.log(obj,'obj')
 console.log(obj1,'obj1')
 function changeMain() {

13.Vue3/project2/src/types/demo15.ts

@@ -0,0 +1,23 @@
+// 抛出
+// export default 
+// export function
+// export const 
+
+export enum Sex {
+    man,
+    woman
+}
+
+export interface happy {
+    jump:string;
+}
+
+export const aa:number = 10;
+
+export interface list {
+    id:number,
+    name:string,
+    age:number
+}
+
+export type partOne = list[]