bug: @Prop can't work with typescript's Type alias

[zhuxindaba]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

2.7.0

Current Behavior

Expected Behavior

can work correctly

Steps to Reproduce

none

Code Reproduction URL

none

Additional Information

No response

[rwaskiewicz]

Hey @zhuxindaba 👋

Can you please add a reproduction to GitHub so that we may take a closer look? This greatly helps speed up the time it takes to diagnose and triage issues. Thanks!

[zhuxindaba]

Sorry， this is demo reproduction： https://github.com/zhuxindaba/stencil-demo/tree/master/demo-test

[MarkChrisLevy]

It is not about type alias, it is because you use type that is private (only accessible within one file). If you want to make it work just define ButtonTypes in separate file, e.g. export type ButtonTypes = .....

[zhuxindaba]

It is not about type alias, it is because you use type that is private (only accessible within one file). If you want to make it work just define ButtonTypes in separate file, e.g. export type ButtonTypes = .....

Thx, I define the type in seperate file, it works. But, how can i use type alias privately?

[MarkChrisLevy]

Types used within Prop or Method cannot be private, as they are accessed outside of the component.

[rwaskiewicz]

Hey @zhuxindaba,

@MarkChrisLevy is correct here - it's difficult to declare a type that's used by a class member that's annotated with @Prop, because the type checker needs to know about it when you're passing props to it, at least in the context of a parent TSX component:

import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-parent',
  shadow: true,
})
export class MyParent {
  render() {
    // if we don't make the type of `first` public with `export`, how do we know it is
    // that 'primary' is allowed?
    return <my-component first={"primary"}></my-component>;
  }
}

However, I think this could be improved on the Stencil end in 2 ways:

1. This is not documented anywhere, and we should add it
2. The developer experience for using a component in HTML (like in your example) should be improved.

I'm going to label this issue to get it added to our backlog + for the team to discuss this further

[zhuxindaba]

Hey @zhuxindaba,

@MarkChrisLevy is correct here - it's difficult to declare a type that's used by a class member that's annotated with @Prop, because the type checker needs to know about it when you're passing props to it, at least in the context of a parent TSX component:

import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-parent',
  shadow: true,
})
export class MyParent {
  render() {
    // if we don't make the type of `first` public with `export`, how do we know it is
    // that 'primary' is allowed?
    return <my-component first={"primary"}></my-component>;
  }
}

However, I think this could be improved on the Stencil end in 2 ways:

1. This is not documented anywhere, and we should add it
2. The developer experience for using a component in HTML (like in your example) should be improved.

I'm going to label this issue to get it added to our backlog + for the team to discuss this further

thanks for your reply，i'm look forward stencil will solve the problem dynamically when compiling project.

[rwaskiewicz]

ionic-team/stencil-site#784 has been created to address the documentation gap