feat: detect ts as expression and Vue's PropType

Author: farnabaz

src/types.d.ts

@@ -1,5 +1,6 @@
 export interface ComponentPropType {
   type: string
+  elementType?: string
 }
 
 export interface ComponentProp {

src/utils/parseSetupScript.ts

@@ -19,6 +19,10 @@ export function parseSetupScript (id: string, descriptor: SFCDescriptor) {
       return prop.name
     }
 
+    if (prop.type === 'TSAsExpression') {
+      return getType(prop.typeAnnotation)
+    }
+
     if (prop.type === 'ObjectExpression') {
       return prop.properties.reduce((acc, prop) => {
         acc[prop.key.name] = getValue(prop.value)
@@ -27,7 +31,7 @@ export function parseSetupScript (id: string, descriptor: SFCDescriptor) {
     }
   }
   function getType (tsProperty) {
-    const { type, typeName, elementType } = tsProperty.typeAnnotation?.typeAnnotation || tsProperty
+    const { type, typeName, elementType, typeParameters } = tsProperty.typeAnnotation?.typeAnnotation || tsProperty
     switch (type) {
       case 'TSStringKeyword':
         return 'String'
@@ -38,6 +42,15 @@ export function parseSetupScript (id: string, descriptor: SFCDescriptor) {
       case 'TSObjectKeyword':
         return 'Object'
       case 'TSTypeReference':
+        if (typeParameters?.params) {
+          if (typeName.name === 'PropType') {
+            return getType(typeParameters.params[0])
+          }
+          return {
+            type: typeName.name,
+            elementType: typeParameters.params.map(type => getType(type))
+          }
+        }
         return typeName.name
       case 'TSArrayType':
         return {

test/basic-component.test.ts

@@ -1,6 +1,7 @@
 import fsp from 'fs/promises'
 import { fileURLToPath } from 'url'
 import { test, describe, expect } from 'vitest'
+import { ComponentPropType } from '../src/types'
 import { parseComponent } from '../src/utils/parseComponent'
 
 describe('Basic Component', async () => {
@@ -52,6 +53,12 @@ describe('Basic Component', async () => {
 
     expect(arrayProps.length).toBe(1)
     expect(arrayProps[0].name).toBe('arrayProp')
+
+    const typedArrayProps = props.filter(p => (p.type as ComponentPropType)?.type === 'Array')
+
+    expect(typedArrayProps.length).toBe(1)
+    expect(typedArrayProps[0].name).toBe('typedArrayProps')
+    expect((typedArrayProps[0].type as ComponentPropType).elementType).toBe('String')
   })
 
   test('Object', () => {

test/fixtures/basic/components/BasicComponent.vue

@@ -9,7 +9,9 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
 const props = defineProps({
   stringProp: {
     type: String,
@@ -27,6 +29,11 @@ const props = defineProps({
     type: Array,
     default: () => []
   },
+  typedArrayProps: {
+    type: Array as PropType<string[]>,
+    default: () => ([]),
+    required: false
+  },
   objectProp: {
     type: Object,
     default: () => ({})