Zod and Angular template types

[ivan-janssens-de-varebeke-lemon]

I have encountered an issue.
I use Zod in combination with angular (12).
My code was not compiling due to an incorrect type.
Here is a small simplified example of the used code:

@Component({...})
export class test {
  tests: testObject[] = [];
}

const testObject = z.enum(['test-1', 'test-2', 'test-3']);
type testObject = z.infer<typeof testObject>

In the template I use an *ngFor loop. In this loop the type is not correctly passed on as can be seen in following screenshots.

When changing the testObject to:

const testObject = z.literal('test-1')
  .or(z.literal('test-2'))
  .or(z.literal('test-3'))

the type is correctly handled in the template.

Can somebody explain why this is happening?

[scotttrinh]

Seems to work as expected on the TypeScript playground. What version of TypeScript are you using?

[ivan-janssens-de-varebeke-lemon]

The issue is specifically in combination with the angular template and *ngFor loop.
This is probably related to angular, but I was hoping somebody here might know the reason