打字稿错误：计算的属性名称必须是“字符串”、“数字”、“符号”或“任何”类型

Question

这是我当前的代码：

interface sizes {
  [key: string]: Partial<CSSStyleDeclaration>[];
}

export const useStyleBlocks = (
  resolution = 'large',
  blocks = [{}]
): Partial<CSSStyleDeclaration>[] => {
  const starterBlock = [] as Partial<CSSStyleDeclaration>[];
  const handleBlocks = (key: sizes): Partial<CSSStyleDeclaration>[] => {
    for (let i = 0; i < blocks.length; i++) {
      // the error comes from this line exactly on [key]
      // A computed property name must be of type 'string', 'number', 'symbol', or 'any'
      starterBlock.push({ [key]: blocks });
    }

    return starterBlock;
  };

  switch (resolution) {
    case 'small':
      // then here i get another error
      // Argument of type 'string' is not assignable to parameter of type 'sizes'
      handleBlocks('small');
      break;
    default:
      handleBlocks({});
      break;
  }

  return starterBlock;
};

关于错误的解释在上面的代码中进行了注释^

有任何想法吗？

更新：

如果我将函数handleBlocks更改为：

  const handleBlocks = (key: string): Partial<CSSStyleDeclaration>[] => {
    for (let i = 0; i < blocks.length; i++) {
/* HERE I GET A NEW ERROR:
Argument of type '{ [x: string]: {}[]; }' is not assignable to parameter of type 'Partial<CSSStyleDeclaration>'.
  Index signatures are incompatible.
    Type '{}[]' is not assignable to type 'string'.ts(2345) */
      starterBlock.push({ [key]: blocks });
    }

    return starterBlock;
  };

有了这个改变， switch语句上的错误就消失了。

Answer 1

这一行：

const handleBlocks = (key: sizes): Partial<CSSStyleDeclaration>[] => {

是说， handleBlocks想要类型的参数sizes ，这是一个对象的接口，但是当你调用handleBlocks ，你传递一个字符串（“小”）。

然后，它抱怨您试图将对象类型用于计算属性名称，因为key的类型是sizes ，它是一个对象。