Prop Types with TypeScript

Illustrate the usage of TypeScript in Vue.js 3 for defining and validating the types of props.
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>

<script lang="ts">
  import { defineComponent, PropType } from 'vue';

  interface ArticleProps {
    title: string;
    description?: string;

  export default defineComponent({
    name: 'Article',
    props: {
      title: {
        type: String as PropType<ArticleProps['title']>,
        required: true
      description: {
        type: String as PropType<ArticleProps['description']>,
        default: ''

<style scoped>
h1 {
  color: #333;
p {
  color: #666;
A Vue 3 component 'Article' is defined using TypeScript. It has props for 'title' (required) and 'description' (optional with a default value) with their respective types declared. PropType is used to cast the types to be the correct Vue prop types. The template section includes a simple layout with a title and description.