ImisDevelopers / 1_011_a_infektionsfall_uebermittellung

This repository is deprecated and has not been maintained for months!
https://imis-prototyp.de/
MIT License
22 stars 6 forks source link

Change vue templates to be typesafe #215

Open jonathangpk opened 4 years ago

jonathangpk commented 4 years ago

I was looking into methods to get type checks for HTML markup. The best thing I found was using jsx (tsx). It works also in combination with other component styles so it is possible to just use it in some components and enables a step by step migration.

If you find a better alternative I am happy to hear about it :)

Example Component:

export default Vue.extend({
  name: 'HelloWorld',
  data() {
     return {
      greeting: 'Hello',
      name: 'World',
    }
  },
  methods: {
    doSomething() {
      alert('something')
    }
  },
  render() {
    return (
      <div>
        <input v-model={this.name} />
        <p>{this.greeting} {this.name}</p>
        <button onClick={this.doSomething}>Do something</button>
      </div>
    )
  },
})

Vue jsx docs Let me know what you think about it. This would also enable us to generate forms automatically and typesafe.

jabrandes commented 4 years ago

So this issue is about ensuring type safety within the prop and event bindings (:<prop> / @<event>) of subcomponents? Did I understand that correctly?