Element implicitly has an ‘any‘ type because expression of type ‘string‘ can‘t be used to index type

报错：Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘ILineColor’.No index signature with a parameter of type ‘string’ was found on type ‘ILineColor’.

翻译过来：元素隐式具有 “any” 类型，因为类型为 “string” 的表达式不能用于索引类型 “ILineColor”。在类型 “ILineColor” 上找不到具有类型为 “string” 的参数的索引签名。

一、对象

先看看以下示例，我定义了一个colorList，以及一个currentIndex代表当前的一个状态，根据这个状态获取到对应的值。此时此刻就会出现以上的报错。

import { reactive, toRefs, onMounted } from 'vue';

export interface IAsset {
    currentIndex: string;
}
export interface ILineColor {
    [key: string]: any;
    important: string;
    other: string;
}
export interface IAreaColor {
    important: Array<string>;
    other: Array<string>;
}
export interface IColor {
    area: IAreaColor;
    line: ILineColor;
}
export default {
    name: 'AssetBusiness',
    setup() {
        const asset: IAsset = reactive({
            currentIndex: 'important',
        });
        const colorList: IColor = {
            area: {
                important: ['rgba(52, 223, 248, 0.2)', 'rgba(52, 223, 248, 0.5)'],
                other: ['rgba(255, 203, 121, 0.2)', 'rgba(255, 203, 121, 0.5)'],
            },
            line: {
                important: 'rgba(52, 223, 248, 1)',
                other: 'rgba(255, 203, 121, 1)',
            },
        };

        onMounted(() => {
            console.log(colorList.line[asset.currentIndex]);
        });
        return {
            ...toRefs(asset),
        };
    },
};

那么现在我们来讲一讲解决的办法。可以将ILineColor声明为any，这样就可以简单的解决。

export interface IColor {
    area: IAreaColor;
    line: any;
}

当然最好还是使用强类型，也可以如下这样写：

export interface ILineColor {
    [key: string]: string;
    important: string;
    other: string;
}

这要根据currentIndex的值来应对，如果它是number类型，可能就需要这样写（因为类型string的属性important不能赋给string索引类型number）：

export interface ILineColor {
    [key: string]: any;
    important: string;
    other: string;
}

当然，我们还可以断言asset.currentIndex 的值是对象 colorList.line的 key

colorList.line[asset.currentIndex as keyof ILineColor]

二、数组

还有一种情况，也会出现这种错误，如下我定义了一个color以及list，我想要筛选返回有值的一个新数组。

const color = {
    red: 'red',
    green: null,
    blue: null,
};
const list = ['red', 'green', 'blue'];
const newColor = list.filter((item) => color[item]);

那么我们可以如何解决呢？假设您使用的是TS3.4或更高版本，从编译器获得这种类型推断的最简单方法是使用常量断言。如下可以使用as const，as const使编译器按照您设置的确切顺序推断出一个元组，该元组恰好由数组中的三个字符串文字组成（它甚至是一个只读元组）。

const color = {
    red: 'red',
    green: null,
    blue: null,
};
const list = ['red', 'green', 'blue'] as const;
const newColor = list.filter((item) => color[item]);