TypeScript Error 2304 when using interface-CodePudding

Working on an angular project and I created an interface file where I do two things:

Define an interface:

export interface tableHeader {
    roundNumber: string;
    eighteenHoleScore: string;
    nineHoleScore: string;
    courseRating: string;
    slopeRating: string;
    scoreDifferential: string;
}

Create a variable to hold an array of strings:

export const roundHeader = [
    roundNumber: 'Round Number',
    eighteenHoleScore: '18 Hole Score',
    nineHoleScore: '9 Hole Score',
    courseRating: 'Course Rating',
    slopeRating: 'Slope Rating',
    scoreDifferential: 'Score Differential'
]

I am getting the above 2304 error for each of my variables created in the roundHeader const. I looked through the site and didn't see anything to answer this and I found on google a lot of things relating to 'require' but in this circumstance it has nothing to do with require.

I am just trying to create an interface to define each variable type, then create static text in the same file so that I can export this static text to multiple pages of my app.

Any help is much appreciated

CodePudding user response：

You need to define roundHeader type.
Array will only contain values, not key-vales.

If you want to use the interface with array, use array of objects:

interface tableHeader {
  roundNumber: string;
  eighteenHoleScore: string;
  nineHoleScore: string;
  courseRating: string;
  slopeRating: string;
  scoreDifferential: string;
}

const roundHeader: tableHeader[] = [
  {
    roundNumber: "Round Number",
    eighteenHoleScore: "18 Hole Score",
    nineHoleScore: "9 Hole Score",
    courseRating: "Course Rating",
    slopeRating: "Slope Rating",
    scoreDifferential: "Score Differential",
  },
];

Playground Link

Alternative to your answer:

if you want static texts, why not use enum?:

enum TableHeader{
    roundNumber= "Round Number",
    eighteenHoleScore= "18 Hole Score",
    nineHoleScore= "9 Hole Score",
    courseRating= "Course Rating",
    slopeRating= "Slope Rating",
    scoreDifferential= "Score Differential",
   }

   const somewhereNeedsRoundNumber = TableHeader.roundNumber

CodePudding user response：

Maybe your case is what our friend Jastria Rahmat showed. However, just to clarify some things here:

When you declared your interface, everything was fine, but when created your const, you didn't explicitly say what type was that const, what could be done by doing export const roundHeader: tableHeader (prefer starting type/interface names with capital letters).

Another problem is that your roundHeader is an array and your tried to add key-value pairs to it, while the correct would be creating an JS object instead of that array, becoming like this:

export const roundHeader: TableHeader = {
    roundNumber: 'Round Number',
    eighteenHoleScore: '18 Hole Score',
    nineHoleScore: '9 Hole Score',
    courseRating: 'Course Rating',
    slopeRating: 'Slope Rating',
    scoreDifferential: 'Score Differential'
};

In case you really want an array of objects that contain those fields, just follow the answer from Jastria, getting something similar to:

export const roundHeader: TableHeader[] = [
    {
        roundNumber: "Round Number",
        eighteenHoleScore: "18 Hole Score",
        nineHoleScore: "9 Hole Score",
        courseRating: "Course Rating",
        slopeRating: "Slope Rating",
        scoreDifferential: "Score Differential",
    },
    // ...
    // other objects with the same fields
]