使用typescript获取` `string` `参数时出错

Question

我得到了这个错误：

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

当我尝试return一个数组时。下面是我的函数:我将barkingRoadProject作为参数传递

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

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

我不能理解这里的问题。有谁能帮我吗？

Answer 1

问题在于，为了提供类型安全，TypeScript (默认情况下)不支持使用带括号的未知字符串来查找对象的属性，因为这样会绕过类型检查。

您有几个选项：

缩小参数类型

您可以使参数的类型更窄，只接受已知为对象的有效属性的内容：

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

请注意，您只能使用在编译时已知的字符串调用SlideSupply，该字符串是slides属性的有效名称。所以SlideSupply("barkingRoadProject")可以工作，但是如果只知道someString是一个字符串，而不一定是"barkingRoadProject"，那么SlideSupply(someString)就不能工作。

类型断言函数

您可以通过类型assertion function向TypeScript保证，字符串类型的变量只有有效的已知值。该函数将如下所示：

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}"`);
}

那么SlideSupply就是：

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

Playground link

或者，您可以使SlideSupply只接受keyof typeof slides，并在调用它之前使用类型断言函数。

字符串索引签名

或者，您可以通过为sliders提供字符串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