includes method with array of strings

[thorny oriole]

Hi Team,

I'm declaring an array of strings like below and trying to use the includes method to check if a string exists in the array. However the editor throws error saying string is not assignable to the array. Any help in this would be highly appreciated.

  acceptedFileTypes: Array<".jpg" | ".jpeg" | ".png" | ".doc" | ".xlsx" | "csv." | "xls">;
areFilesValid = acceptedFileTypes.includes(fileExtWithPeriod)

[hallow fox]

can not replicate your issue :

let acceptedFileTypes: Array<".jpg" | ".jpeg" | ".png" | ".doc" | ".xlsx" | "csv." | "xls"> = ['.doc', '.jpg'];
let areFilesValid = acceptedFileTypes.includes('.doc')

works fine

[thorny oriole]

@hallow fox I'm actually making an interface and applying the interface on props

@hallow fox Here is the mode elaborate code

interface FileUploadPropsInterface {
  acceptedFileTypes: Array<".jpg" | ".jpeg" | ".png" | ".doc" | ".xlsx" | "csv." | "xls">;
}

export function WithoutMulter2({ acceptedFileTypes}: FileUploadPropsInterface) {

....
let areFilesValid = acceptedFileTypes.includes('.doc')
}

[dusky wagon]

!:includes

[unborn sun]

retsam19#0

`!retsam19:includes`:

The type of Array.prototype.includes assumes that you're using the string to check something about the array. If you're trying to do the reverse, a modified type signature is useful:

function includes<S extends string>(haystack: readonly S[], needle: string): needle is S {
    const _haystack: readonly string[] = haystack;
    return _haystack.includes(needle)
}

declare const x: string;
if(includes(["a", "b", "c"], x)) {
    // x is "a" | "b" | "c"
}

[hallow fox]

i'm not able to reproduce this error using this code :

interface FileUploadPropsInterface {
  acceptedFileTypes: Array<".jpg" | ".jpeg" | ".png" | ".doc" | ".xlsx" | "csv." | "xls">;
}

export function WithoutMulter2({ acceptedFileTypes}: FileUploadPropsInterface) {
    let areFilesValid = acceptedFileTypes.includes('.doc')
    return areFilesValid
}

WithoutMulter2({
    acceptedFileTypes: ['.doc', '.jpeg']
})

mayeb restart the language server using F1 > Typescript: Restart TS Server

[thorny oriole]

here is the whole error message

Argument of type 'string' is not assignable to parameter of type '".jpg" | ".jpeg" | ".png" | ".doc" | ".xlsx" | "csv." | "xls"'.ts(2345)
let fileExtWithPeriod: string
No quick fixes available

[dusky wagon]

See this.

[thorny oriole]

I'm not trying to modify. Just checking if a given string exists in the array

[dusky wagon]

Your problem is exactly what the snippet is talking about.

You are using the array to check the string.

[thorny oriole]

Yes. It should return a true or false

[hallow fox]

i don't think he has a problem with type assertion, he just get a type error using the .include function

[hallow fox]

did you tried restarting ts lang server ?

[thorny oriole]

@hallow fox Yes, I restarted the server. Still the error persists

[dusky wagon]

Your code isn’t producing the error because it’s not the same as theirs, they have an array with specific elements and checking a broader target.

[thorny oriole]

in the component I'm assigning the prop to a state variable like this. Does this cause an issue?

[dusky wagon]

declare const arr: ('foo' | 'bar')[]
arr.includes('baz')

!ts

[unborn sun]

declare const arr: ('foo' | 'bar')[]
arr.includes('baz')
//           ^^^^^
// Argument of type '"baz"' is not assignable to parameter of type '"foo" | "bar"'.

[dusky wagon]

But anyways, this is the solution.

[hallow fox]

right

[thorny oriole]

Here is more details of the code. Should I also type annotate the state here?

interface FileUploadPropsInterface {
  acceptedFileTypes: Array<".jpg" | ".jpeg" | ".png" | ".doc" | ".xlsx" | "csv." | "xls">;
  maxFileSize: number;
}



export function WithoutMulter2({ acceptedFileTypes, maxFileSize }: FileUploadPropsInterface) {

  const [acceptedFileFormats, setAcceptedFileFormats] = useState(acceptedFileTypes);


}

[hallow fox]

btw you can resolve type error by type casting for example :

type T = ".jpg" | ".jpeg" | ".png" | ".doc" | ".xlsx" | "csv." | "xls";
let areFilesValid = acceptedFileTypes.includes(fileExtWithPeriod as T)

but be aware that type casting is frowned upon

[dusky wagon]

Or just use the snippet I've given and do includes(acceptedFileTypes, fileExtWithPeriod).

The snippet gives both an explanation of the problem and a solution, so please read it. If you don't understand what the snippet meant, I can explain it further.