[SOLVED] Property 'sandwiches' does not exist on type 'string'

Issue

I want to have an object that can contain strings or an array of strings. All with a string key. This is a config object that will be used in an app.

This object will be dynamic (user defined state values) so I have no way of specifying types based on the specific key name. Which is why I’m using index signatures as I don’t know what the keys will be. I will be adding arrays from one part of my app, and strings from another part.

I’m getting errors as seen below:

TS PLAYGROUND

type FiltersStateType = {
  filters: { [key: string]: Array<string> | string }
}

const example: FiltersStateType = {
  filters: {
    sandwiches: ['ham', 'cheese'],
    milkshakes: ['choc', 'banana'],
    randomString: 'hello',
  },
}

example.filters.sandwiches.filter(item => item !== 'ham')
// ❌ Property 'filter' does not exist on type 'string | string[]'.
// ❌ Property 'filter' does not exist on type 'string'

// do I need to type narrow every time to discern between string and string[]?
if (Array.isArray(example.filters.sandwiches)) {
  example.filters.sandwiches.filter(item => item !== 'ham')
}

I presume this is because TS doesn’t know if its a string or an Array. Do I need to type narrow every time to discern between string and string[]?

if (Array.isArray(example.filters.sandwiches)) {
  example.filters.sandwiches.filter(item => item !== 'ham')
}

Solution

I can recommend you to use this example. The line [key: string]: Array<string> | string; is for future properties which can be added in future. After I listed need properties and their types. The main problem is you can not combine several types and then access to property which is not included in both of types. For example I didn’t list the randomString property but I can easily access to its n-th element because both of array and string has this property

type FiltersStateType = {
  filters: {
    [key: string]: Array<string> | string;
    sandwiches: string[];
    milkshakes: string[];
  }
}

const example: FiltersStateType = {
  filters: {
    sandwiches: ['ham', 'cheese'],
    milkshakes: ['choc', 'banana'],
    randomString: 'hello',
  },
}

example.filters.sandwiches = example.filters.sandwiches.filter(item => item !== 'ham')

console.log(example.filters.sandwiches);
console.log(example.filters.randomString[1]);

Or you can use as keyword:

type FiltersStateType = {
  filters: {
    [key: string]: Array<string> | string;
  }
}

const example: FiltersStateType = {
  filters: {
    sandwiches: ['ham', 'cheese'],
    milkshakes: ['choc', 'banana'],
    randomString: 'hello',
  },
}

example.filters.sandwiches = (example.filters.sandwiches as string[]).filter(item => item !== 'ham')

console.log(example.filters.sandwiches);
console.log(example.filters.randomString[1]);

Sorry in SO Code Snippet I can’t run because of as string[]

Answered By – EzioMercer

Answer Checked By – Jay B. (BugsFixing Admin)