fix(v-bind): 修复类型错误

pages/directive/v-bind/Foo-composition.uvue

@@ -10,15 +10,13 @@
     </view>
     <view class="flex justify-between flex-row mb-10">
       <text>props obj['name']:</text>
-      <text id="foo-props-obj-name">{{ obj['name'] }}</text>
+      <text id="foo-props-obj-name">{{ obj.name }}</text>
     </view>
   </view>
 </template>
 
 <script setup lang="uts">
-  export type FooPropsObj = {
-    name : string
-  }
+  import { FooPropsObj } from './type.uts'
 
   defineProps({
     title: {
@@ -34,8 +32,8 @@
       default: false
     },
     obj: {
-      type: FooPropsObj,
-      required: true
+      type: Object as PropType<FooPropsObj>,
+      default: {name: 'default name'} as FooPropsObj
     }
   })
 </script>
\ No newline at end of file

pages/directive/v-bind/Foo-options.uvue

@@ -10,16 +10,14 @@
     </view>
     <view class="flex justify-between flex-row mb-10">
       <text>props obj['name']:</text>
-      <text id='foo-props-obj-name'>{{ obj['name'] }}</text>
+      <text id='foo-props-obj-name'>{{ obj.name }}</text>
     </view>
   </view>
 </template>
 
-<script lang="uts">
-  export type FooPropsObj = {
-    name : string
-  }
-  
+<script lang="uts">
+  import { FooPropsObj } from './type.uts'
+
   export default {
     props: {
       title: {
@@ -29,14 +27,14 @@
       num: {
         type: Number,
         default: 0
-      },
-      checked: {
-        type: Boolean,
-        default: false
+      },
+      checked: {
+        type: Boolean,
+        default: false
       },
       obj: {
-        type: FooPropsObj,
-        required: true
+        type: Object as PropType<FooPropsObj>,
+        default: {name: 'default name'} as FooPropsObj
       }
     }
   }

pages/directive/v-bind/type.uts

+export type FooPropsObj = {
+  name : string
+}
+export type FooProps = {
+  title : string
+  num : number
+  obj : FooPropsObj
+}
\ No newline at end of file

pages/directive/v-bind/v-bind-composition.uvue

-<template>
-  <view class="page">
-    <!-- v-bind attribute -->
-    <button id="disabled-btn" class="mb-10" :disabled="true">
-      :disabled true
-    </button>
-    <button id="v-bind-disabled-btn" class="mb-10" v-bind:disabled="false">
-      v-bind:disabled false
-    </button>
-
-    <!-- v-bind style -->
-    <view class="flex justify-between flex-row mb-10">
-      <text>bind object style fontSize:</text>
-      <text id="bind-object-style" :style="{ fontSize: dataInfo.fontSize }">
-        {{ dataInfo.fontSize }}
-      </text>
-    </view>
-    <view
-      id="bind-array-style"
-      class="mb-10 p-10"
-      :style="[dataInfo.backgroundColor, dataInfo.border]">
-      <view>bind arr style</view>
-      <view class="my-10">{{ dataInfo.backgroundColor }}</view>
-      <view>{{ dataInfo.border }}</view>
-    </view>
-
-    <!-- v-bind props -->
-    <Foo
-      :title="dataInfo.fooProps.title"
-      :num="dataInfo.fooProps.num"
-      :obj="dataInfo.fooProps.obj" />
-
-    <!-- v-bind props -->
-    <Foo checked />
-
-    <!-- v-bind in style -->
-    <!-- #ifdef WEB -->
-    <view class="mb-10 v-bind-css"></view>
-    <!-- #endif -->
-  </view>
-</template>
-
-<script setup lang="uts">
-import Foo from './Foo-composition.uvue'
-import {type FooPropsObj} from './Foo-composition.uvue'
-
-type FooProps = {
-  title : string
-  num : number
-  obj : FooPropsObj
-}
-type DataInfo = {
-  fontSize : string
-  backgroundColor : string
-  border : string
-  fooProps : FooProps
-  vBindClassBackgroundColor : string,
-  vBindClassRpxHeight : string,
-}
-
-const dataInfo = reactive({
-  fontSize: '20px',
-  backgroundColor: 'background-color: green',
-  border: 'border: 2px solid red',
-  fooProps: {
-    title: 'foo title',
-    num: 1,
-    obj: {
-      name: 'foo obj name',
-    } as FooPropsObj
-  },
-  vBindClassBackgroundColor: 'red',
-  vBindClassRpxHeight: '300rpx'
-} as DataInfo)
-
-defineExpose({
-  dataInfo
-})
-</script>
-
-<style>
-/* #ifdef WEB */
-.v-bind-css {
-  background-color: v-bind(dataInfo.vBindClassBackgroundColor);
-  height: v-bind(dataInfo.vBindClassRpxHeight);
-}
-/* #endif */
-</style>
+<template>
+  <view class="page">
+    <!-- v-bind attribute -->
+    <button id="disabled-btn" class="mb-10" :disabled="true">
+      :disabled true
+    </button>
+    <button id="v-bind-disabled-btn" class="mb-10" v-bind:disabled="false">
+      v-bind:disabled false
+    </button>
+
+    <!-- v-bind style -->
+    <view class="flex justify-between flex-row mb-10">
+      <text>bind object style fontSize:</text>
+      <text id="bind-object-style" :style="{ fontSize: dataInfo.fontSize }">
+        {{ dataInfo.fontSize }}
+      </text>
+    </view>
+    <view id="bind-array-style" class="mb-10 p-10" :style="[dataInfo.backgroundColor, dataInfo.border]">
+      <view>bind arr style</view>
+      <view class="my-10">{{ dataInfo.backgroundColor }}</view>
+      <view>{{ dataInfo.border }}</view>
+    </view>
+
+    <!-- v-bind props -->
+    <Foo :title="dataInfo.fooProps.title" :num="dataInfo.fooProps.num" :obj="dataInfo.fooProps.obj" />
+
+    <!-- v-bind props -->
+    <Foo checked />
+
+    <!-- v-bind in style -->
+    <!-- #ifdef WEB -->
+    <view class="mb-10 v-bind-css"></view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script setup lang="uts">
+  import Foo from './Foo-composition.uvue'
+  import { FooProps, FooPropsObj } from './type.uts'
+
+  type DataInfo = {
+    fontSize : string
+    backgroundColor : string
+    border : string
+    fooProps : FooProps
+    vBindClassBackgroundColor : string,
+    vBindClassRpxHeight : string,
+  }
+
+  const dataInfo = reactive({
+    fontSize: '20px',
+    backgroundColor: 'background-color: green',
+    border: 'border: 2px solid red',
+    fooProps: {
+      title: 'foo title',
+      num: 1,
+      obj: {
+        name: 'foo obj name',
+      } as FooPropsObj
+    },
+    vBindClassBackgroundColor: 'red',
+    vBindClassRpxHeight: '300rpx'
+  } as DataInfo)
+
+  defineExpose({
+    dataInfo
+  })
+</script>
+
+<style>
+  /* #ifdef WEB */
+  .v-bind-css {
+    background-color: v-bind(dataInfo.vBindClassBackgroundColor);
+    height: v-bind(dataInfo.vBindClassRpxHeight);
+  }
+
+  /* #endif */
+</style>
\ No newline at end of file

pages/directive/v-bind/v-bind-options.uvue

-<template>
-  <view class="page">
-    <!-- v-bind attribute -->
-    <button id="disabled-btn" class="mb-10" :disabled="true">:disabled true</button>
-    <button id="v-bind-disabled-btn" class="mb-10" v-bind:disabled="false">v-bind:disabled false</button>
-
-    <!-- v-bind style -->
-    <view class="flex justify-between flex-row mb-10">
-      <text>bind object style fontSize:</text>
-      <text id="bind-object-style" :style="{ fontSize: dataInfo.fontSize }">
-        {{ dataInfo.fontSize }}
-      </text>
-    </view>
-    <view id="bind-array-style" class="mb-10 p-10" :style="[dataInfo.backgroundColor, dataInfo.border]">
-      <view>bind arr style</view>
-      <view class="my-10">{{ dataInfo.backgroundColor }}</view>
-      <view>{{ dataInfo.border }}</view>
-    </view>
-
-    <!-- v-bind props -->
-    <Foo :title="dataInfo.fooProps.title" :num="dataInfo.fooProps.num" :obj="dataInfo.fooProps.obj" />
-
-    <!-- v-bind props -->
-    <Foo checked />
-
-    <!-- v-bind in style -->
-    <!-- #ifdef WEB -->
-    <view class="mb-10 v-bind-css"></view>
-    <!-- #endif -->
-  </view>
-</template>
-
-<script lang="uts">
-import Foo from './Foo-options.uvue'
-import {type FooPropsObj} from './Foo-options.uvue'
-
-type FooProps = {
-  title: string
-  num: number
-  obj: FooPropsObj
-}
-type DataInfo = {
-  fontSize: string
-  backgroundColor: string
-  border: string
-  fooProps: FooProps
-  vBindClassBackgroundColor: string
-  vBindClassRpxHeight: string
-}
-
-export default {
-  components: { Foo },
-  data() {
-    return {
-      dataInfo: {
-        fontSize: '20px',
-        backgroundColor: 'background-color: green',
-        border: 'border: 2px solid red',
-        fooProps: {
-          title: 'foo title',
-          num: 1,
-          obj: {
-            name: 'foo obj name'
-          } as FooPropsObj
-        },
-        vBindClassBackgroundColor: 'red',
-        vBindClassRpxHeight: '300rpx'
-      } as DataInfo
-    }
-  }
-}
-</script>
-
-<style>
-/* #ifdef WEB */
-.v-bind-css {
-  background-color: v-bind(dataInfo.vBindClassBackgroundColor);
-  height: v-bind(dataInfo.vBindClassRpxHeight);
-}
-/* #endif */
-</style>
+<template>
+  <view class="page">
+    <!-- v-bind attribute -->
+    <button id="disabled-btn" class="mb-10" :disabled="true">:disabled true</button>
+    <button id="v-bind-disabled-btn" class="mb-10" v-bind:disabled="false">v-bind:disabled false</button>
+
+    <!-- v-bind style -->
+    <view class="flex justify-between flex-row mb-10">
+      <text>bind object style fontSize:</text>
+      <text id="bind-object-style" :style="{ fontSize: dataInfo.fontSize }">
+        {{ dataInfo.fontSize }}
+      </text>
+    </view>
+    <view id="bind-array-style" class="mb-10 p-10" :style="[dataInfo.backgroundColor, dataInfo.border]">
+      <view>bind arr style</view>
+      <view class="my-10">{{ dataInfo.backgroundColor }}</view>
+      <view>{{ dataInfo.border }}</view>
+    </view>
+
+    <!-- v-bind props -->
+    <Foo :title="dataInfo.fooProps.title" :num="dataInfo.fooProps.num" :obj="dataInfo.fooProps.obj" />
+
+    <!-- v-bind props -->
+    <Foo checked />
+
+    <!-- v-bind in style -->
+    <!-- #ifdef WEB -->
+    <view class="mb-10 v-bind-css"></view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script lang="uts">
+  import Foo from './Foo-options.uvue'
+  import { FooProps, FooPropsObj } from './type.uts'
+
+  type DataInfo = {
+    fontSize : string
+    backgroundColor : string
+    border : string
+    fooProps : FooProps
+    vBindClassBackgroundColor : string
+    vBindClassRpxHeight : string
+  }
+
+  export default {
+    components: { Foo },
+    data() {
+      return {
+        dataInfo: {
+          fontSize: '20px',
+          backgroundColor: 'background-color: green',
+          border: 'border: 2px solid red',
+          fooProps: {
+            title: 'foo title',
+            num: 1,
+            obj: {
+              name: 'foo obj name'
+            } as FooPropsObj
+          },
+          vBindClassBackgroundColor: 'red',
+          vBindClassRpxHeight: '300rpx'
+        } as DataInfo
+      }
+    }
+  }
+</script>
+
+<style>
+  /* #ifdef WEB */
+  .v-bind-css {
+    background-color: v-bind(dataInfo.vBindClassBackgroundColor);
+    height: v-bind(dataInfo.vBindClassRpxHeight);
+  }
+
+  /* #endif */
+</style>
\ No newline at end of file