Please add an example of using an array of string objects to initialize a component.

[KingsGithub]

I"m new to this game so please reserve the flames and ire for another day.

I'm trying to initialize a menu component with an array consisting of objects containing the following:
routeName : string,
menuIconClass : string,
menuOption : string

Component skeleton:

import Vue from 'vue'
import { Component } from 'vue-property-decorator';

interface GeneralMenuItem{
  routename: string; 
  menuiconclass:string; 
  menuoption:string
}
@Component{(
  props: {
   pmenuitems: []  // how to declare this to make it acceptable to Typescript??
  }
) }
export default class GeneralMenuComponent extends Vue {
 pmenuitems: Array;  // Typescript doesn't like an empty array here, i think. How to declare this????
  menuitems : GeneralMenuItem[] ;  // tried various options here without success
  mounted(){
     this.menuitems = pmenuitems;  //THIS is where the problem lies - Typescript rejects assigning an 
   unknown type to a declared type.
  }

[ktsn]

You can just declare pmenuitems as GeneralMenuItem[]. In addition, you are passing wrong value in props option.

import Vue from 'vue'
import { Component } from 'vue-property-decorator';

interface GeneralMenuItem {
  routename: string; 
  menuiconclass:string; 
  menuoption:string
}

@Component({
  props: {
    pmenuitems: Array  
  }
})
export default class GeneralMenuComponent extends Vue {
  pmenuitems: GeneralMenuItem[];  
  menuitems: GeneralMenuItem[];

  mounted() {
    this.menuitems = pmenuitems;  
  }

[KingsGithub]

Thanks for the reply but it just doesn't work for me.
As for using the wrong value in props option, perhaps you should clarify that with a specific example.
I have in fact named the contents of the objects to be the same in all cases.
Perhaps you should try running the code and see what you get. If it actually works then sorry, my mistake. However, I think you might find it a problem.
Just to elaborate, I'm using a template created by Microsoft :
dotnet new --install Microsoft.AspNetCore.SpaTemplates::* and then
mkdir new-project
cd new-project
dotnet new vue

I see in their fetchdata.ts they use " (response => response.json() as Promise<WeatherForecast[]>)"
which neatly gets around the issue of having the wrong type. However, I don't want to hard-code separate fetches and components for each menu - that would defeat the whole object of having components. This is why I'm asking about passing in a array property as parameter. So far I've not come across ANY example that actually shows how to do this. All the examples I've seen use simple values or hard-coded values inside the class.

My main issue is not understanding how to declare or cast the incoming array property to the required type ( in my case GeneralMenuItem ) in Typescript, whether using JSON or not.

Any help would be appreciated.

[KingsGithub]

ANSWER: for anyone having the same issue, one answer is to export the interface, i.e. the type you to want use elsewhere like this:

// In generalmenu.ts
export interface GeneralMenuItem{
       routename: string; 
       menuiconclass:string;
       menuoption: string;
   }

Then you can use it where you want to pass the property to your component by importing this interface like this:

// In file app.ts
import { GeneralMenuItem } from 'your-component-location' 
import GeneralMenuComponent from 'your-component-location'
// I'm using visual studio and it actually helps out with this!

//Then you can use it as expected:
.
.
.
export default class AppComponent extends Vue {
    // Now you have type checking available at this point and no more compilation errors
    gmenuitems: GeneralMenuItem[] = [{...},{...}, etc];
  }

I hope this helps. Might not be the ideal solution but definitely works for me.
Maybe declare the type in a general place if it's going to be used a lot of times????
I'm new at both Typescript AND Vue so I'm just crawling around in the dark at this moment.