<template>
	<view>
    <text class="mb-10 bold">object type</text>
		<view class="mb-10 flex justify-between flex-row">
      <text>str: </text>
      <text id="object-type-str">{{ str }}</text>
    </view>
    <view class="mb-10 flex justify-between flex-row">
      <text>num: </text>
      <text id="object-type-num">{{ num }}</text>
    </view>
    <view class="mb-10 flex justify-between flex-row">
      <text>bool: </text>
      <text id="object-type-bool">{{ bool }}</text>
    </view>
    <view class="mb-10 flex justify-between flex-row">
      <text>obj: </text>
      <text id="object-type-obj">{{ JSON.stringify(obj) }}</text>
    </view>
    <view class="mb-10 flex justify-between flex-row">
      <text>obj.age: </text>
      <text id="object-type-obj-age">{{ obj.age }}</text>  
    </view>
    <view class="mb-10 flex justify-between flex-row">
      <text>obj.age: </text>
      <text id="object-type-obj-age">{{ obj.age }}</text>  
    </view>
    <view class="mb-10 flex justify-between flex-row">
      <text>arr: </text>
      <text id="object-type-arr">{{ JSON.stringify(arr) }}</text>
    </view>
	</view>
</template>

<script lang='uts'>
	export default {
		props: {
			nullableStr: {
				// 必须as PropType<string | null>，否则会影响类型的自动推导，导致setup函数内的ctx是any类型
				type: [String, null] as PropType<string | null>,
			},
			str: {
				type: String,
				default: 'default str'
			},
			num: {
				type: Number,
				default: 0
			},
			bool: {
				type: Boolean,
				default: false
			},
			obj: {
				type: UTSJSONObject,
				default: (): UTSJSONObject => ({})
			},
			arr: {
				type: Array as PropType<string[]>,
				default: () : Array<string> => {
					return []
				}
			}
		}
	}
</script>