fix: support more cases

vuejs · Dec 1, 2023 · 3522d6f · 3522d6f
1 parent 8a8a0b6
commit 3522d6f
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 68 deletions.
diff --git a/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts b/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
@@ -347,46 +347,6 @@ describe('resolveType', () => {
  })
  })
 
- test('generic type', () => {
- expect(
- resolve(`
- type Foo = { foo: string; }
- type Bar = { bar: number; }
- type Props<T,U> = T & U & { baz: boolean }
- defineProps<Props<Foo, Bar>>()
- `).props
- ).toStrictEqual({
- foo: ['String'],
- bar: ['Number'],
- baz: ['Boolean']
- })
- })
-
- test('generic type /w generic type alias', () => {
- expect(
- resolve(`
- type Aliased<T> = Readonly<Partial<T>>
- type Props<T> = Aliased<T>
- type Foo = { foo: string; }
- defineProps<Props<Foo>>()
- `).props
- ).toStrictEqual({
- foo: ['String']
- })
- })
-
- test('generic type /w simple type alias', () => {
- expect(
- resolve(`
- type Aliased<T> = T
- type Foo = { foo: string; }
- defineProps<Aliased<Foo>>()
- `).props
- ).toStrictEqual({
- foo: ['String']
- })
- })
-
  test('namespace merging', () => {
  expect(
  resolve(`
@@ -495,6 +455,88 @@ describe('resolveType', () => {
  })
  })
 
+ describe('generics', () => {
+ test('generic with type literal', () => {
+ expect(
+ resolve(`
+ type Props<T> = T
+ defineProps<Props<{ foo: string }>>()
+ `).props
+ ).toStrictEqual({
+ foo: ['String']
+ })
+ })
+
+ test('generic used in intersection', () => {
+ expect(
+ resolve(`
+ type Foo = { foo: string; }
+ type Bar = { bar: number; }
+ type Props<T,U> = T & U & { baz: boolean }
+ defineProps<Props<Foo, Bar>>()
+ `).props
+ ).toStrictEqual({
+ foo: ['String'],
+ bar: ['Number'],
+ baz: ['Boolean']
+ })
+ })
+
+ test('generic type /w generic type alias', () => {
+ expect(
+ resolve(`
+ type Aliased<T> = Readonly<Partial<T>>
+ type Props<T> = Aliased<T>
+ type Foo = { foo: string; }
+ defineProps<Props<Foo>>()
+ `).props
+ ).toStrictEqual({
+ foo: ['String']
+ })
+ })
+
+ test('generic type /w aliased type literal', () => {
+ expect(
+ resolve(`
+ type Aliased<T> = { foo: T }
+ defineProps<Aliased<string>>()
+ `).props
+ ).toStrictEqual({
+ foo: ['String']
+ })
+ })
+
+ test('generic type /w interface', () => {
+ expect(
+ resolve(`
+ interface Props<T> {
+ foo: T
+ }
+ type Foo = string
+ defineProps<Props<Foo>>()
+ `).props
+ ).toStrictEqual({
+ foo: ['String']
+ })
+ })
+
+ test('generic from external-file', () => {
+ const files = {
+ '/foo.ts': 'export type P<T> = { foo: T }'
+ }
+ const { props } = resolve(
+ `
+ import { P } from './foo'
+ defineProps<P<string>>()
+ `,
+ files
+ )
+ expect(props).toStrictEqual({
+ foo: ['String']
+ })
+ })
+ })
+
  describe('external type imports', () => {
  test('relative ts', () => {
  const files = {

diff --git a/packages/compiler-sfc/src/script/resolveType.ts b/packages/compiler-sfc/src/script/resolveType.ts
@@ -140,9 +140,9 @@ function innerResolveTypeElements(
 ): ResolvedElements {
  switch (node.type) {
  case 'TSTypeLiteral':
- return typeElementsToMap(ctx, node.members, scope)
+ return typeElementsToMap(ctx, node.members, scope, typeParameters)
  case 'TSInterfaceDeclaration':
- return resolveInterfaceMembers(ctx, node, scope)
+ return resolveInterfaceMembers(ctx, node, scope, typeParameters)
  case 'TSTypeAliasDeclaration':
  case 'TSParenthesizedType':
  return resolveTypeElements(
@@ -156,20 +156,8 @@ function innerResolveTypeElements(
  }
  case 'TSUnionType':
  case 'TSIntersectionType':
- const types = typeParameters
- ? node.types.map(t => {
- if (
- t.type === 'TSTypeReference' &&
- t.typeName.type === 'Identifier' &&
- typeParameters[t.typeName.name]
- ) {
- return typeParameters[t.typeName.name]
- }
- return t
- })
- : node.types
  return mergeElements(
- types.map(t => resolveTypeElements(ctx, t, scope)),
+ node.types.map(t => resolveTypeElements(ctx, t, scope, typeParameters)),
  node.type
  )
  case 'TSMappedType':
@@ -191,15 +179,21 @@ function innerResolveTypeElements(
  scope.imports[typeName]?.source === 'vue'
  ) {
  return resolveExtractPropTypes(
- resolveTypeElements(ctx, node.typeParameters.params[0], scope),
+ resolveTypeElements(
+ ctx,
+ node.typeParameters.params[0],
+ scope,
+ typeParameters
+ ),
  scope
  )
  }
  const resolved = resolveTypeReference(ctx, node, scope)
  if (resolved) {
  const typeParams: Record<string, Node> = Object.create(null)
  if (
- resolved.type === 'TSTypeAliasDeclaration' &&
+ (resolved.type === 'TSTypeAliasDeclaration' ||
+ resolved.type === 'TSInterfaceDeclaration') &&
  resolved.typeParameters &&
  node.typeParameters
  ) {
@@ -294,11 +288,17 @@ function innerResolveTypeElements(
 function typeElementsToMap(
  ctx: TypeResolveContext,
  elements: TSTypeElement[],
- scope = ctxToScope(ctx)
+ scope = ctxToScope(ctx),
+ typeParameters?: Record<string, Node>
 ): ResolvedElements {
  const res: ResolvedElements = { props: {} }
  for (const e of elements) {
  if (e.type === 'TSPropertySignature' || e.type === 'TSMethodSignature') {
+ // capture generic parameters on node's scope
+ if (typeParameters) {
+ scope = createChildScope(scope)
+ Object.assign(scope.types, typeParameters)
+ }
  ;(e as MaybeWithScope)._ownerScope = scope
  const name = getId(e.key)
  if (name && !e.computed) {
@@ -374,9 +374,15 @@ function createProperty(
 function resolveInterfaceMembers(
  ctx: TypeResolveContext,
  node: TSInterfaceDeclaration & MaybeWithScope,
- scope: TypeScope
+ scope: TypeScope,
+ typeParameters?: Record<string, Node>
 ): ResolvedElements {
- const base = typeElementsToMap(ctx, node.body.body, node._ownerScope)
+ const base = typeElementsToMap(
+ ctx,
+ node.body.body,
+ node._ownerScope,
+ typeParameters
+ )
  if (node.extends) {
  for (const ext of node.extends) {
  if (
@@ -1160,14 +1166,7 @@ function moduleDeclToScope(
  return node._resolvedChildScope
  }
 
- const scope = new TypeScope(
- parentScope.filename,
- parentScope.source,
- parentScope.offset,
- Object.create(parentScope.imports),
- Object.create(parentScope.types),
- Object.create(parentScope.declares)
- )
+ const scope = createChildScope(parentScope)
 
  if (node.body.type === 'TSModuleDeclaration') {
  const decl = node.body as TSModuleDeclaration & WithScope
@@ -1181,6 +1180,17 @@ function moduleDeclToScope(
  return (node._resolvedChildScope = scope)
 }
 
+function createChildScope(parentScope: TypeScope) {
+ return new TypeScope(
+ parentScope.filename,
+ parentScope.source,
+ parentScope.offset,
+ Object.create(parentScope.imports),
+ Object.create(parentScope.types),
+ Object.create(parentScope.declares)
+ )
+}
+
 const importExportRE = /^Import|^Export/
 
 function recordTypes(