Getting error on `string` param with typescript-CodePudding

I am getting this error:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ barkingRoadProject: string[]; }'. No index signature with a parameter of type 'string' was found on type '{ barkingRoadProject: string[]; }'.ts(7053) (parameter) slideName: string

when i try to return an array. here is my function: i am passing barkingRoadProject as a parameter

const slides = {
    "barkingRoadProject": ['boomerang-site1.jpg', 'boomerang-site2.jpg', 'boomerang-site3.jpg']
}

export const SlideSupply = (slideName: string): string[] => {
    return slides[slideName];
}

No able to understand the issue here. any one help me?

CodePudding user response：

The issue is that in order to provide type safety, TypeScript doesn't (by default) support using unknown strings with brackets notation to look up properties on objects, because that bypasses type checking.

You have a couple of options:

Narrow the parameter type

You can make the type of the parameter more narrow, only accepting something known to be a valid property of the object:

const slides = {
    "barkingRoadProject": ['boomerang-site1.jpg', 'boomerang-site2.jpg', 'boomerang-site3.jpg']
}

export const SlideSupply = (slideName: keyof typeof slides): string[] => {
//                                     ^^^^^^^^^^^^^^^^^^^
    return slides[slideName];
}

Playground link

Note that you'll only be able to call SlideSupply with a string known at compile-time to be a valid name for a slides property. So SlideSupply("barkingRoadProject") will work, but SlideSupply(someString) won't work if someString is only know to be a string, not necessarily "barkingRoadProject".

A type assertion function

You can reassure TypeScript that the string-typed variable only has valid known values via a type assertion function. The function would look like this:

function assertValidSlideName(slideName: string): asserts slideName is keyof typeof slides {
    switch (slideName) {
        case "barkingRoadProject":
        case "any-other-valid-name-here":
            break;
        default:
            throw new Error(`Invalid slide name "${slideName}"`);
}

Then SlideSupply is:

export const SlideSupply = (slideName: string): string[] => {
    assertValidSlideName(slideName); // ***
    return slides[slideName];
}

Playground link

Or you can make SlideSupply only accept keyof typeof slides and use the type assertion function prior to calling it.

String index signature

Alternatively, you could allow using any string by giving sliders a string index signature:

const slides: {[key: string]: string[]} = {
//          ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    "barkingRoadProject": ['boomerang-site1.jpg', 'boomerang-site2.jpg', 'boomerang-site3.jpg']
}

export const SlideSupply = (slideName: string): string[] => {
    return slides[slideName];
}

Playground link