vue3

20.vue3/project1/src/App.vue

@@ -3,7 +3,7 @@
     <h1>App</h1>
     <hr>
     <hr>
-    <Demo18 ></Demo18>
+    <Demo19></Demo19>
     <!-- <Demo17 ref="dom1"></Demo17> -->
     <!-- <button @click="changeMain">获取</button> -->
     <!-- <Demo16 v-if="isShow"></Demo16> -->
@@ -46,7 +46,7 @@
 // import Demo9 from './components/Demo9.vue'
 // import Demo16 from './components/Demo16.vue';
 // import Demo17 from './components/Demo17.vue';
-import Demo18 from './components/Demo18.vue';
+import Demo19 from './components/Demo19.vue';
 import { ref } from 'vue';
 let isShow = ref(true);
 let dom1 = ref();

20.vue3/project1/src/components/Demo19.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h1>Demo19</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+import { type person,type news } from "../types/demo19";
+let a:number = 23;
+interface aa  {
+    name: string,
+    age:number
+}
+
+type bb = aa[];
+let list:bb = reactive([{
+    name: '图图',
+    age: 3
+},{
+    name: '图图1',
+    age: 3
+},{
+    name: '图图1',
+    age: 3
+}])
+</script>
+
+<style lang="scss" scoped>
+</style>

20.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,13 +15,14 @@ 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 = '孙悟空';
+    // return 1;
 }
 </script>
 

20.vue3/project1/src/components/Demo3.vue

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

20.vue3/project1/src/components/Demo4.vue

@@ -11,15 +11,19 @@
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-let obj = ref({
+interface aa {
+  name: string,
+  age: number
+}
+let obj = ref<aa>({
     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

20.vue3/project1/src/types/demo19.ts

@@ -0,0 +1,8 @@
+export interface person {
+    name: string,
+    age: number
+}
+
+export type news = person[]
+
+// Array<number> / number[]