Comprendre les composants

1_AppButton.ts

/**
 * Ce composant Vue...
 */
export default Vue.extend({
  name: "AppButton",

  props: {
    icon: {
      type: String,
      default: null
    },
    radius: {
      type: String,
      default: "medium",
      validator(value) {
        return ["medium", "small", "large"].includes(value)
      }
    }
  }
});

2_AppButton.ts

/**
 * est équivalent à écrire ceci
 */
class AppButton {
  constructor (
    private icon: string | null = null,
    private radius: string = "medium"
  ) {
    if (!["medium", "small", "large"].includes(value)) {
      throw new Error("Invalid prop type")
    }
  }

  private sayHello() {
    console.log('coucou')
    console.log(this.icon)
  }
}

3_AppButton.tsx

<AppButton icon="activity" radius="small">Mon texte</AppButton>

// Est équivalent à :

new AppButton("activity", "small")