Currently tackling a typescript-related issue within a class-based component and seeking guidance on a persistent error.
Below is the code snippet for my component:
<template>
<b-message :type="statusToBuefyClass">
<p>PLACEHOLDER</p>
</b-message>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
components: {},
props: {
status: {
type: String,
required: false
}
}
})
export default class Foo extends Vue {
// explicitly type status
status!: string
get statusToBuefyClass(): string {
const statusHash: {
init: string
active: string
inactive: string
archived: string
} = {
init: 'is-warning',
active: 'is-success',
inactive: '',
archived: 'is-danger'
}
return Object(statusHash)[this.status]
}
bar = this.status
mounted() {}
}
</script>
The code runs smoothly without any compilation errors. However, removing the explicit typing of status - status!: string - triggers the following error:
Property 'status' does not exist on type 'Foo'.
I have explored various resources but haven't found a solution that fits my scenario perfectly. In my tsconfig.json, I've set the following options as suggested in some discussions:
"strict": true,
"noImplicitThis": true,
Any insights or suggestions? Is there an alternative approach to avoid the redundancy of defining props and then typing them again within
export default class Foo extends Vue {...