'string'은 유형 '{}'을(를) 인덱싱하는 데 사용할 수 없습니다.

'string'은 유형 '{}'을(를) 인덱싱하는 데 사용할 수 없습니다.

오브젝트 배열에서HTML 테이블을 생성하는 React 컴포넌트는 다음과 같습니다.표시할 열은 를 통해 정의됩니다.tableColumns소유물.

루프 스루시items올바른 컬럼을 표시하고 있습니다.key로부터의 재산tableColumn오브젝트({item[column.key]}). 단, typescript에서 다음 오류가 발생합니다.

형식 'string' 식을 형식 '{}'을(를) 인덱싱하는 데 사용할 수 없으므로 요소에 암시적으로 '임의' 형식이 있습니다.유형 '{}'에서 매개 변수가 'string'인 인덱스 서명을 찾을 수 없습니다.

이 문제를 해결하려면 어떻게 해야 할까요?길을 잃었어요

컴포넌트 호출 방법:

<TableGridView
  items={[
    {
      id: 1,
      name: 'John Doe',
      email: 'john@doe.de'
    },
    {
      id: 2,
      name: 'Lorem ipsum',
      email: 'lorem@ipsum.com',
    }
  ]}
  tableColumns={[
    {
      key: 'id',
      label: 'ID',
    },
    {
      key: 'name',
      label: 'Name',
    }
  ]}
/>

마이 컴포넌트:

export type TableColumn = {
  key: string,
  label: string,
};

export type TableGridViewProps = {
  items: object[],
  tableColumns: TableColumn[]
};

const TableGridView: React.FC<TableGridViewProps> = ({ tableColumns, items }) => {
  return (
    <table>
      <tbody>
        {items.map(item => {
          return (
            <tr>
              {tableColumns.map((column, index) => {
                return (
                  <td
                    key={column.key}
                    className="lorem ipsum"
                  >
                    {item[column.key]} // error thrown here
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

  items: object[],

기술적으로는 JavaScript 오브젝트이지만 타입이 더 나을 수 있습니다.개체 속성에 액세스할 때 오류를 올바르게 식별하는 데 도움이 되는 유형 스크립트를 사용하려면 개체의 정확한 모양을 지정해야 합니다.라고 입력하면object, typescript는 도움이 되지 않습니다.대신 개체의 정확한 속성 및 데이터 유형을 알 수 있습니다.

  let assistance: { safe: string } = { safe: 1 /* typescript can now tell this is wrong */ };
  assistance.unknown; // typescript can tell this wont really work too

오브젝트에 임의의 종류의 키/값 쌍이 포함될 수 있는 경우 오브젝트인덱스 타입을 사용하여 적어도 값(및 키)의 타입을 알 수 있습니다.

 items: {
   [key: string]: number | string,
  }[]

그것이 주어진 경우의 정확한 유형입니다.

우선, 의 타입을 정의합니다.items일렬로objects타이프 스크립트의 목적에 어긋나기 때문에 좋지 않은 생각입니다.대신 어레이에 포함할 개체 유형을 정의합니다.저는 이렇게 하겠습니다.

type Item = {
  id: number,
  name: string,
  email: string,
}

export type TableGridViewProps = {
  items: Item[],
  tableColumns: TableColumn[]
};

그 후, 만약 당신이 정말로 확신한다면key존재하다item다음 작업을 수행하여 유효한 인덱스에 액세스하고 있음을 Typescript에 알릴 수 있습니다.

<td
  key={column.key}
  className="lorem ipsum"
>
  {item[column.key as keyof typeof Item]}
</td>

필드별로 유형 정의를 작성하는 것이 의미가 없고 클래스 정의로서 의미가 없는 현학적인 javascript 객체인 경우 다음과 같이 객체를 입력할 수 있습니다.any및 typescript를 사용하면 원하는 대로 인덱스를 작성할 수 있습니다.

예를 들어,

//obviously no one with two brain cells is going to type each field individually
let complicatedObject: any = {
    attr1: 0,
    attr2: 0,
    ...
    attr999: 0
}

Object.keys(complicatedObject).forEach(key => {
    complicatedObject[key] += 1;
}

제네릭 사용

// bad
const _getKeyValue = (key: string) => (obj: object) => obj[key];

// better
const _getKeyValue_ = (key: string) => (obj: Record<string, any>) => obj[key];

// best
const getKeyValue = <T extends object, U extends keyof T>(key: U) => (obj: T) =>
      obj[key];

Bad - 에러의 원인은objecttype은 기본적으로 빈 개체일 뿐입니다.그렇기 때문에 이 명령어를 사용할 수 없습니다.string색인화할 타이프{}.

Better - 오류가 사라지게 된 이유는 컴파일러에 다음 명령을 전달하기 때문입니다.obj인수는 문자열/값의 집합이 됩니다.(string/any의 쌍). '아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아.any더잘 、 도도록도도타 요세요요 。

- ★★★★★★★★★★★★★★」T을 사용하다 U를 T.그러므로U T을 사용법

다음으로 완전한 예를 제시하겠습니다.

.U extends keyof T보다 T extends object범용 순서는 중요하지 않으며 기능에 가장 적합한 순서를 선택해야 합니다.

const getKeyValue = <U extends keyof T, T extends object>(key: U) => (obj: T) =>
  obj[key];

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "John Smith",
  age: 20
};

const getUserName = getKeyValue<keyof User, User>("name")(user);

// => 'John Smith'

타입 any [ ]를 추가해 보겠습니다.

items:any[]

언급URL : https://stackoverflow.com/questions/57350092/string-cant-be-used-to-index-type