Skip to content

Instantly share code, notes, and snippets.

@mitchell-garcia
Created March 7, 2018 01:30
Show Gist options
  • Save mitchell-garcia/a5d3ec8ccf55dae76a988b95236d4247 to your computer and use it in GitHub Desktop.
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
<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>
@winuxue
Copy link

winuxue commented Mar 14, 2018

Hi. I've just copied your code into a new empty nuxt project.
But i'm having these errors:

file: 'file:///home/nuxt-test/components/ExampleFile.vue'
severity: 'Error'
message: 'Argument of type '{ props: { propExample: { type: () => ComplexObjectInterface; }; }; data(this: Vue): { dataExampl...' is not assignable to parameter of type 'ComponentOptions | FunctionalComponentOptions'.
Type '{ props: { propExample: { type: () => ComplexObjectInterface; }; }; data(this: Vue): { dataExampl...' is not assignable to type 'FunctionalComponentOptions'.
Property 'functional' is missing in type '{ props: { propExample: { type: () => ComplexObjectInterface; }; }; data(this: Vue): { dataExampl...'.'
at: '7,27'
source: ''
code: 'undefined'

file: 'file:///home/nuxt-test/components/ExampleFile.vue'
severity: 'Error'
message: 'Property 'dataExample' does not exist on type 'Vue'.'
at: '21,14'
source: ''
code: 'undefined'

file: 'file:///home/nuxt-test/components/ExampleFile.vue'
severity: 'Error'
message: 'Property 'propExample' does not exist on type 'Vue'.'
at: '22,14'
source: ''
code: 'undefined'

file: 'file:///home/nuxt-test/components/ExampleFile.vue'
severity: 'Error'
message: 'Property 'dataExample' does not exist on type 'Vue'.'
at: '29,12'
source: ''
code: 'undefined'

can you help say me what i'm doing wrong pls?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment