Created
March 7, 2018 01:30
-
-
Save mitchell-garcia/a5d3ec8ccf55dae76a988b95236d4247 to your computer and use it in GitHub Desktop.
Example of how to type an Object with a Typescript interface in VueJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script lang="ts"> | |
import Vue from "vue" | |
type ComplexObjectInterface = { | |
testProp: string | |
modelName: number | |
} | |
export default Vue.extend({ | |
props: { | |
propExample: { | |
type: Object as () => ComplexObjectInterface | |
} | |
}, | |
data() { | |
return { | |
dataExample: "This Property Will Be Data" | |
} | |
}, | |
computed: { | |
computedExample(): string { | |
return ( | |
this.dataExample + | |
this.propExample.testProp + | |
"Computed Property Example" | |
) | |
} | |
}, | |
methods: { | |
methodExample() { | |
this.dataExample = "This is being done in a method" | |
} | |
} | |
}) | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi. I've just copied your code into a new empty nuxt project.
But i'm having these errors:
can you help say me what i'm doing wrong pls?