vue3

vue3/project1/src/App.vue

@@ -1,12 +1,15 @@
 <template>
   <div>
     <h1>App</h1>
+    <Demo18></Demo18>
+    <hr>
+    <hr>
     <Demo16 ref="vase"></Demo16>
     <hr>
     <hr>
     <Demo15 v-if="isShow"></Demo15>
     <hr>
-    <hr>
+    <!-- <hr>
     <Demo11></Demo11>
     <hr>
     <hr>
@@ -37,7 +40,7 @@
     <Demo3></Demo3>
     <hr>
     <hr>
-    <Demo4></Demo4>
+    <Demo4></Demo4> -->
   </div>
 </template>
 
@@ -55,6 +58,8 @@
 // import Demo11 from './components/Demo11.vue'
 import Demo15 from './components/Demo15.vue'
 import Demo16 from './components/Demo16.vue'
+import Demo17 from './components/Demo17.vue'
+import Demo18 from './components/Demo18.vue'
 // import Demo12 from './components/Demo12.vue'
 import { onMounted, ref } from 'vue';
 let isShow = ref(true);

vue3/project1/src/components/Demo11.vue

@@ -9,18 +9,22 @@
 
 <script lang="ts" setup>
 import {ref,watch} from "vue" 
-let flower = ref({
+interface tips {
+  month: string,
+  city: string
+}
+let flower = ref<tips>({
   month: '六月',
   city: '哈尔滨'
 });
-function changeFlower() {
+function changeFlower():void {
     // flower.value--;
     flower.value = {
       month:"八月",
       city:"北京"
     }
 }
-function changeMonth() {
+function changeMonth():void {
   flower.value.month = '七月';
 }
 watch(flower,(newValue,oldValue) => {

vue3/project1/src/components/Demo17.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h1>Demo17</h1>
+    <h2>{{ name }}--{{ age }}</h2>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+// 1.传什么接什么
+// defineProps(['age','name'])
+
+// 2.规定类型
+// defineProps({
+//     age: Number,
+//     name: String
+// })
+// 3.是否是必传+类型+默认
+const aaa = withDefaults(defineProps<{name:string,age:number}>(),{
+    name:'喜羊羊',
+    age:10
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project1/src/components/Demo18.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <h1>Demo18</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+// import {type list,type info} from '../types/demo18'
+interface list {
+    id:number,
+    name: string,
+    age: number
+}
+ type info = list[];
+let newList:info = [{
+    id:10,
+    name:"tutu",
+    age:10
+},{
+    id:10,
+    name:"tutu",
+    age:10
+},{
+    id:10,
+    name:"tutu",
+    age:10
+}]
+// let a:any = 12
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project1/src/components/Demo2.vue

@@ -7,7 +7,7 @@
     <button @click="changeName">修改名字</button>
   </div>
 </template>
-<script setup>
+<script lang="ts" setup>
 import { ref } from 'vue';
 /**
  * setup函数返回对象上的内容 可以直接在模版使用
@@ -15,10 +15,10 @@ import { ref } from 'vue';
  */
 // ref定义基本数据类型
 // ref定义的变量是一个对象 通过.value访问和修改值
-let name = ref("图图");
+let name = ref<string>("图图");
 console.log(name);
 // console.log(this)
-function changeName() {
+function changeName():void {
     // name = '孙悟空';
     // name.value
     name.value = '孙悟空';

vue3/project1/src/components/Demo3.vue

@@ -9,28 +9,32 @@
   </div>
 </template>
 
-<script setup>
-import {reactive} from "vue" 
-let obj = reactive({
-    name:'图图',
-    age:18
-})
-console.log(obj,'obj');
-function changeName() {
-    obj.name = '孙悟空';
+<script lang="ts" setup>
+import { reactive } from "vue";
+interface Person {
+  name: string;
+  age: number;
 }
-function changePerson() {
-    // obj.name = '孙悟空';
-    // obj.age = 20;
-    Object.assign(obj,{
-        name:'孙悟空',
-        age:20
-    })
-    // obj = {
-    //     name:'猪八戒',
-    //     age:28
-    // }
-    // console.log(obj,'obj1')
+let obj = reactive<Person>({
+  name: "图图",
+  age: 18,
+});
+console.log(obj, "obj");
+function changeName():void {
+  obj.name = "孙悟空";
+}
+function changePerson():void {
+  // obj.name = '孙悟空';
+  // obj.age = 20;
+  Object.assign(obj, {
+    name: "孙悟空",
+    age: 20,
+  });
+  // obj = {
+  //     name:'猪八戒',
+  //     age:28
+  // }
+  // console.log(obj,'obj1')
 }
 </script>
 

vue3/project1/src/components/Demo4.vue

@@ -11,15 +11,19 @@
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-let obj = ref({
+interface Person {
+  name: string;
+  age: number;
+}
+let obj = ref<Person>({
     name:'图图',
     age:18
 })
 console.log(obj,'obj');
-function changeName() {
+function changeName():void {
     obj.value.name = '哪吒';
 }
-function changePerson() {
+function changePerson():void {
     obj.value = {
         name: '哪吒',
         age: 20

vue3/project1/src/components/Demo8.vue

@@ -20,13 +20,13 @@
 
 <script lang="ts" setup>
 import {ref, computed} from "vue" 
-let firstName = ref("胡");
-let lastName = ref("图图");
+let firstName = ref<string>("胡");
+let lastName = ref<string>("图图");
 
-const init = () => {
-    console.log("!")
-    return firstName.value + lastName.value
-}
+// const init = () => {
+//     console.log("!")
+//     return firstName.value + lastName.value
+// }
 
 // 获取
 // let fullName = computed(()=>{
@@ -34,16 +34,16 @@ const init = () => {
 // })
 
 let fullName = computed({
-    get() {
+    get():string {
         console.log("?")
         return firstName.value + lastName.value
     },
-    set(val) {
+    set(val):void {
         firstName.value = val.slice(0,1);
         lastName.value = val.substring(1,3);
     }
 })
-function changeName() {
+function changeName():void {
     fullName.value = '喜羊羊'
 }
 </script>

vue3/project1/src/types/demo18.ts

@@ -0,0 +1,8 @@
+export interface list {
+    id:number,
+    name: string,
+    age: number
+}
+
+export type info = list[];
+// string[]