Props and Events in Vue.js and TypeScript

Vue.js is a popular JavaScript framework for building user interfaces, and TypeScript is a statically-typed superset of JavaScript that adds optional static typing and other features to the language. In this tutorial, we'll explore how to use props and events in Vue.js with TypeScript.

Props in Vue.js with TypeScript

Props are a way to pass data from a parent component to a child component in Vue.js. To define props in a Vue.js component with TypeScript, we need to declare an interface for the props in the component's props property. For example, let's say we have a HelloWorld component that takes in a message prop:

interface Props {
  message: string
}

@Component({
  props: {
    message: {
      type: String,
      required: true
    }
  }
})
export default class HelloWorld extends Vue<Props> {
  // ...
}

In this example, we declare an interface called Props that has a message property of type string. We then define the props property in the @Component decorator, where we specify the type of the message prop as String and set the required option to true.

To use the message prop in the HelloWorld component, we can access it through the this.$props object:

<template>
  <div>{{ $props.message }}</div>
</template>

In this example, we display the message prop in the component's template using the {{ $props.message }} syntax.

Events in Vue.js with TypeScript

Events are a way for child components to communicate with their parent components in Vue.js. To emit events in a Vue.js component with TypeScript, we can define a custom event type using the Vue.extend method. For example, let's say we have a Counter component that emits a count-up event when a button is clicked:

interface Events {
  'count-up': number
}

const Counter = Vue.extend<{}, {}, {}, Events>({
  methods: {
    handleClick() {
      this.$emit('count-up', 1)
    }
  }
})

In this example, we declare an interface called Events that has a 'count-up' property of type number. We then define a new component using the Vue.extend method, where we specify the methods property with a handleClick method that emits the count-up event with a value of 1.

To listen for the count-up event in the parent component, we can use the @ symbol followed by the name of the event:

<template>
  <div>
    <Counter @count-up="handleCountUp"></Counter>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({})
export default class ParentComponent extends Vue {
  count = 0

  handleCountUp(count: number) {
    this.count += count
  }
}
</script>

In this example, we listen for the count-up event in the parent component using the @count-up syntax and call the handleCountUp method when the event is emitted. In the handleCountUp method, we update the count property with the value of the count-up event.

Conclusion

In this tutorial, we learned how to use props and events in Vue.js with TypeScript. Props are a way to pass data from a parent component to a child component, while events are a way for child components to communicate with their parent components. By defining interfaces for props and events, we can add type safety and ensure that our components are using the correct data types.

Overall, Vue.js with TypeScript offers a great developer experience, as it provides type checking, autocompletion, and documentation for our components. By using props and events, we can create reusable and composable components that can be easily integrated into our applications.