vue3

17.Vue3/project/src/App.vue

@@ -28,6 +28,12 @@ export default {
 <template>
   <div>
     <h1>首页</h1>
+    <Demo16></Demo16>
+    <hr>
+    <hr>
+    <Demo15></Demo15>
+    <hr>
+    <hr>
     <Demo14></Demo14>
     <hr>
     <hr>
@@ -87,6 +93,8 @@ 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';
+import Demo16 from './components/Demo16.vue';
 // export default {
 //   // components:{
 //   //   Demo1

17.Vue3/project/src/components/Demo15.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h1>TS1.0</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue";
+import {type list,type personMsg} from '../types/15.ts';
+interface happy {
+    jump:string
+}
+let newList:personMsg = reactive([{
+    id:1,
+    name:"图图",
+    age:3,
+    address:"翻斗花园"
+},{
+    id:2,
+    name:"图图",
+    age:3,
+    address:"翻斗花园"
+},{
+    id:3,
+    name:"图图",
+    age:3,
+    address:"翻斗花园"
+}])
+function fn1<T extends happy>(x:T):T {
+    return x;
+}
+fn1({jump:"12"});
+</script>
+
+<style lang="scss" scoped>
+</style>

17.Vue3/project/src/components/Demo16.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h1>TS2.0</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+let aa = ref(12);
+// aa.value = '12';
+let bb = ref<number | string>(21);
+interface dd {
+    id:number,
+    name:string
+}
+let cc = ref<Array<dd>>([{
+    id:1,
+    name:'图图'
+}])
+interface ff {id:number,name:string,age:number}
+let ee = reactive<ff>({
+    id:32,
+    name:'明明',
+    age:21
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

17.Vue3/project/src/types/15.ts

@@ -0,0 +1,14 @@
+// export default
+// export function 
+// export const aa
+
+export interface list {
+    id: number,
+    name: string,
+    age: number,
+    address: string 
+}
+// [{}]
+// let a = string[]
+//  = list[]
+export type personMsg = list[];