How can I describe type indexing using it's own keys in TypeScript?

Question

I'm new to TypeScript, sorry if my question is dumb. Is there a way to point out the indexing for this type so that it use it's own keys instead of just an object?

 export type TypeAbCreationModal = {
  [index: string]: object | TypeExperience;
  name: {
    title: string;
    placeholder: string;
  };
  server: {
    title: string;
    tooltip: string;
  };
  site: {
    title: string;
    placeholder: string;
    placeholderSearch: string;
  };
};

Edit: Object typed with TypeAbCreationModal looks like this :

const myObj = {
  name: {
      title: 'Some Title',
      placeholder: 'Some Placeholder',
    },
  server: {
      title: 'Some Title',
      tooltip: 'Some Tooltip',
    },
  site: {
      title: 'Some Title',
      placeholder: 'Some Placeholder',
      placeholderSearch: 'Some Placeholder',
    },
}

At some point I'll have to access it like this

myObj[someIndex].title

(someIndex is of the TypeExperience type) If I use an object as an index TS throws an error "title can not assign to object"

Could you clarify your question a bit? Are you trying to avoid the properties of a standard javascript object and only the ones you added? — Yeysides
– Yeysides, Commented Mar 31, 2021 at 14:20

Yeysides · Accepted Answer · 2021-03-31 19:02:52Z

[index: string]: object | TypeExperience; means TypeAbCreationModal can have any string key whose potential values are either TypeExperience or a primitive js object type, which don't have the properties you're trying to access. You probably want something like this instead of a primitive js object type:

interface MyObject {
      title: string,
      placeholder?: string,
      placeholderSearch?: string,
      tooltip?: string
}

Then update TypeAbCreationModal to use your new type, you don't need TypeExperience here:

[index: string]: MyObject;

BTW: I would change TypeAbCreationModal to not use type but rather interface (the type construct is usually used for creating union types or type aliases):

export interface TypeAbCreationModal {
 [index: string]: MyObject;
}

Note: The above setup will allow TypeAbCreationModal objects to have any string key so long as the value is of type MyObject, of which has optional properties. It's possible you don't want this but rather very specifically for it to only have a name, server, and site properties which can all have strict types of their own. This gives you more type safety (although much more verbose):

interface MyBaseObj { 
  title: string 
}

interface MyNameObj extends MyBaseObj {
  placeholder: string;
}

interface MyServerObj extends MyBaseObj {
  tooltip: string;
}

interface MySiteObj extends MyNameObj {
  placeholderSearch: string;
}

interface TypeAbCreationModal {
 name: MyNameObj,
 server: MyServerObj,
 site: MySiteObj
}

const myObj: TypeAbCreationModal = {
  name: {
      title: 'Some Title',
      placeholder: 'Some Placeholder',
    },
  server: {
      title: 'Some Title',
      tooltip: 'Some Tooltip',
    },
  site: {
      title: 'Some Title',
      placeholder: 'Some Placeholder',
      placeholderSearch: 'Some Placeholder',
    },
}

console.log(myObj["name"].title);
console.log(myObj["server"].tooltip);
console.log(myObj["site"].placeholder);

Collectives™ on Stack Overflow

How can I describe type indexing using it's own keys in TypeScript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related