feat: 补充 props 使用引入类型示例

pages/component-instance/props/props-composition.uvue

-<template>
-  <view class="page">
-    <array-literal :str="str" :num="num" :bool="bool" :obj="obj" :arr="arr" />
-    <object-type str="str" :num="num" :bool="bool" :obj="obj" :arr="arr" />
-    <same-name-prop-default-value />
-    <props-with-defaults />
-  </view>
-</template>
-
-<script setup lang="uts">
-import ArrayLiteral from './array-literal-composition.uvue'
-import ObjectType from "./object-type-composition.uvue";
-import SameNamePropDefaultValue from "./same-name-prop-default-value-composition.uvue";
-import PropsWithDefaults from "./props-with-defaults.uvue";
-
-const str = 'str'
-const num = 10
-const bool = true
-const obj = {age: 18}
-const arr = ['a','b','c']
-</script>
+<template>
+  <view class="page">
+    <array-literal :str="str" :num="num" :bool="bool" :obj="obj" :arr="arr" />
+    <object-type str="str" :num="num" :bool="bool" :obj="obj" :arr="arr" />
+    <same-name-prop-default-value />
+    <props-with-defaults />
+    <!-- #ifdef APP-ANDROID -->
+    <reference-types :list="[1,2,3]" />
+    <!-- #endif -->
+    <!-- #ifndef APP-ANDROID -->
+    <reference-types :list="['a','b','c']" />
+    <!-- #endif -->
+  </view>
+</template>
+
+<script setup lang="uts">
+  import ArrayLiteral from './array-literal-composition.uvue'
+  import ObjectType from "./object-type-composition.uvue";
+  import SameNamePropDefaultValue from "./same-name-prop-default-value-composition.uvue";
+  import PropsWithDefaults from "./props-with-defaults.uvue";
+  import ReferenceTypes from './reference-types-composition.uvue'
+
+  const str = 'str'
+  const num = 10
+  const bool = true
+  const obj = { age: 18 }
+  const arr = ['a', 'b', 'c']
+</script>
\ No newline at end of file

pages/component-instance/props/props-options.uvue

-<template>
-  <view class="page">
-    <array-literal :str="str" :num="num" :bool="bool" :obj="obj" :arr="arr" />
-    <object-type str="str" :num="num" :bool="bool" :obj="obj" :arr="arr" />
-    <same-name-prop-default-value />
-    <props-with-defaults />
-  </view>
-</template>
-
-<script lang="uts">
-import ArrayLiteral from './array-literal-options.uvue'
-import ObjectType from "./object-type-options.uvue";
-import SameNamePropDefaultValue from "./same-name-prop-default-value-options.uvue";
-import PropsWithDefaults from "./props-with-defaults.uvue";
-
-export default {
-  components: {
-    ArrayLiteral,
-    ObjectType,
-    SameNamePropDefaultValue,
-    PropsWithDefaults
-  },
-  data() {
-    return {
-      str: 'str',
-      num: 10,
-      bool: true,
-      obj: {age: 18},
-      arr: ['a','b','c']
-    }
-  },
-}
-</script>
+<template>
+  <view class="page">
+    <array-literal :str="str" :num="num" :bool="bool" :obj="obj" :arr="arr" />
+    <object-type str="str" :num="num" :bool="bool" :obj="obj" :arr="arr" />
+    <same-name-prop-default-value />
+    <props-with-defaults />
+    <!-- #ifdef APP-ANDROID -->
+    <reference-types :list="[1,2,3]" />
+    <!-- #endif -->
+    <!-- #ifndef APP-ANDROID -->
+    <reference-types :list="['a','b','c']" />
+    <!-- #endif -->
+  </view>
+</template>
+
+<script lang="uts">
+  import ArrayLiteral from './array-literal-options.uvue'
+  import ObjectType from "./object-type-options.uvue";
+  import SameNamePropDefaultValue from "./same-name-prop-default-value-options.uvue";
+  import PropsWithDefaults from "./props-with-defaults.uvue";
+  import ReferenceTypes from './reference-types-options.uvue'
+
+  export default {
+    components: {
+      ArrayLiteral,
+      ObjectType,
+      SameNamePropDefaultValue,
+      PropsWithDefaults,
+      ReferenceTypes
+    },
+    data() {
+      return {
+        str: 'str',
+        num: 10,
+        bool: true,
+        obj: { age: 18 },
+        arr: ['a', 'b', 'c']
+      }
+    },
+  }
+</script>
\ No newline at end of file

pages/component-instance/props/props.test.js

 const OPTIONS_PAGE_PATH = '/pages/component-instance/props/props-options'
 const COMPOSITION_PAGE_PATH = '/pages/component-instance/props/props-composition'
 
+const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
+const isAndroid = platformInfo.includes('android')
+
 describe('props', () => {
   let page
   const test = async (page) => {
     const arrayLiteralStr = await page.$('#array-literal-str')
     expect(await arrayLiteralStr.text()).toBe('str')
-    
+
     const arrayLiteralNum = await page.$('#array-literal-num')
     expect(await arrayLiteralNum.text()).toBe('10')
-    
+
     const arrayLiteralBool = await page.$('#array-literal-bool')
     expect(await arrayLiteralBool.text()).toBe('true')
-    
+
     const arrayLiteralObj = await page.$('#array-literal-obj')
     expect(await arrayLiteralObj.text()).toBe('{"age":18}')
-    
+
     const arrayLiteralArr = await page.$('#array-literal-arr')
     expect(await arrayLiteralArr.text()).toBe('["a","b","c"]')
-    
+
     const objectTypeStr = await page.$('#object-type-str')
     expect(await objectTypeStr.text()).toBe('str')
-    
+
     const objectTypeNum = await page.$('#object-type-num')
     expect(await objectTypeNum.text()).toBe('10')
-    
+
     const objectTypeBool = await page.$('#object-type-bool')
     expect(await objectTypeBool.text()).toBe('true')
-    
+
     const objectTypeObj = await page.$('#object-type-obj')
     expect(await objectTypeObj.text()).toBe('{"age":18}')
-    
+
     const objectTypeArr = await page.$('#object-type-arr')
     expect(await objectTypeArr.text()).toBe('["a","b","c"]')
-    
+
     const sameNamePropDefaultValueArr = await page.$('#same-name-prop-default-value-arr')
     expect(await sameNamePropDefaultValueArr.text()).toBe('[1,2,3]')
 
@@ -41,19 +44,22 @@ describe('props', () => {
     expect(await propMsg.text()).toBe('hello')
     const propLabels = await page.$('#prop-labels')
     expect(await propLabels.text()).toBe('["a","b"]')
+
+    const referenceTypeList = await page.$('#reference-type-list')
+    expect(await referenceTypeList.text()).toBe(isAndroid ? '[1,2,3]' : '["a","b","c"]')
   }
 
   it('props 选项式 API', async () => {
     page = await program.reLaunch(OPTIONS_PAGE_PATH)
     await page.waitFor('view')
-    
+
     await test(page)
   });
 
   it('props 组合式 API', async () => {
     page = await program.reLaunch(COMPOSITION_PAGE_PATH)
     await page.waitFor('view')
-    
+
     await test(page)
   })
 })
\ No newline at end of file

pages/component-instance/props/reference-types-composition.uvue

+<template>
+  <view>
+    <text class="mb-10 bold">reference types</text>
+    <text id="reference-type-list">{{ JSON.stringify(list) }}</text>
+  </view>
+</template>
+<script setup lang="uts">
+  import type { ReferenceTypesProps } from './types.uts'
+
+  const props = withDefaults(defineProps<ReferenceTypesProps>(), {
+    // #ifdef APP-ANDROID
+    list: [] as number[]
+    // #endif
+    // #ifndef APP-ANDROID
+    list: [] as string[]
+    // #endif
+  })
+  console.log('reference types props', props)
+</script>
\ No newline at end of file

pages/component-instance/props/reference-types-options.uvue

+<template>
+  <view>
+    <text class="mb-10 bold">reference types</text>
+    <text id="reference-type-list">{{ JSON.stringify(list) }}</text>
+  </view>
+</template>
+<script lang="uts">
+  export default {
+    props: {
+      list: {
+        // #ifdef APP-ANDROID
+        type: Array as PropType<number[]>,
+        default: [] as number[]
+        // #endif
+        // #ifndef APP-ANDROID
+        type: Array as PropType<string[]>,
+        default: [] as string[]
+        // #endif
+      }
+    },
+    onReady() {
+      console.log('reference types props', this.$props)
+    }
+  }
+</script>
\ No newline at end of file

pages/component-instance/props/types.uts

+export type ReferenceTypesProps = {
+	// #ifdef APP-ANDROID
+	list: number[]
+	// #endif
+	// #ifndef APP-ANDROID
+	list: string[]
+	// #endif
+}