개발하자

TypeScript - 유형 'string' 표현식을 사용하여 유형을 인덱싱할 수 없으므로 요소에 암시적으로 'any' 유형이 있습니다.

Cuire 2022. 12. 20. 11:45
반응형

TypeScript - 유형 'string' 표현식을 사용하여 유형을 인덱싱할 수 없으므로 요소에 암시적으로 'any' 유형이 있습니다.

나는 다음 코드를 가지고 있습니다.

const color = {
    red: null,
    green: null,
    blue: null
};

const newColor = ['red', 'green', 'blue'].filter(e => color[e]);

오류는 아래쪽에 있으며 다음과 같은 오류가 있습니다.

형식 'string' 식을 사용하여 형식 '{red: null; green: null; blue: null; }'을(를) 인덱싱할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다. '{red: null; green: null; blue: null; }' 형식에서 매개 변수가 'string'인 인덱스 서명을 찾을 수 없습니다.

나는 TypeScript 문서에서 모든 곳을 찾아보았지만, 어떻게 해야 수락할 수 있습니까?



당신은 TypeScript에게 이것에 대해 등을 돌리지 말라고 선언할 수 있습니다.

const color : any = {
    red: null,
    green: null,
    blue: null
};

그러나 가능한 경우 강력한 타이핑이 선호됩니다.

const color : { [key: string]: any } = {
    red: null,
    green: null,
    blue: null
};

TypeScript 색인화에 대한 자세한 내용은 다음과 같습니다.

비슷한 질문에 대해 작성자는 사용 사례에 적합한 경우 a를 사용할 것을 제안합니다.



당신이 가지고 있는 문제는 그것이 잘못된 유형이 아니라, TypeScript가 의 유형을 추론하고 있다는 것이다. 종종 그러한 유형의 추론이 바람직한데, 왜냐하면 (컴파일러가 아는 모든 사람들이) 당신이 그것을 밀고 싶어할 수 있기 때문이다. 그러나 이 경우 컴파일러에서 유일한 구성원은 3개의 문자열 리터럴 , 및 .뿐임을 알 수 있습니다. 즉, 최소한 와 같은 유형이 필요합니다.

TS3.4 이상을 사용한다고 가정하면 컴파일러에서 이러한 종류의 유형 추론을 얻는 가장 쉬운 방법은 a를 사용하는 것이다.

const constAssertionTest = ["red", "green", "blue"] as const;
// const constAssertionTest: readonly ["red", "green", "blue"];

는 컴파일러가 배열에서 정확히 세 개의 문자열 리터럴로 구성된 a를 사용자가 설정한 정확한 순서대로 추론하도록 합니다. (심지어) 이 정도면 오류를 해결할 수 있습니다.

const newColor = (['red', 'green', 'blue'] as const).filter(e => color[e]); // okay

좋아, 그게 도움이 되길 바래. 행운을 빕니다.

코드 링크



좋은 답변 감사합니다. 타자 원고를 처음 접했고 첫 번째 장애물을 성공적으로 고쳤습니다.

  // in javascript world this is what I used to do.
  let values1 = products.reduce((acc, product) => {
      acc[product] = 1;
  //  ^  --> Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
  // No index signature with a parameter of type 'string' was found on type '{}'.  TS7053

      return acc;
  }, {})

  // in typescript world I needed an extract type specification for 'acc'
  let values2 = products.reduce((acc: { [key: string]: number}, product) => {
      acc[product] = 1; //No more error
      return acc;
  }, {})


나는 그것이 오래된 질문이라는 것을 알지만 나는 다른 대답들에 만족하지 않는다. 키워드는 가급적 피하세요!

이 오류가 발생하는 이유와 이 오류를 어떻게 처리해야 하는지 알아보겠습니다.

이유: const나 문자열 배열에 형식이 없습니다.

유형을 상수에 지정하지 않으면 Typescript는 를 기반으로 유형을 추론합니다. 오류는 "이봐요, 추정된 유형의 일부가 아닌 문자열이라도 상관없어요."라고 말합니다. 만약 그것이 추론된 유형에서 알려지지 않은 것과 같다면?

이를 처리하는 세 가지 방법을 추천할 수 있습니다.

1. 가장 간단하지만 "스크립트 스피릿" 솔루션은 아닙니다.

다음과 같이 const 키에 유형을 지정하십시오.

const color: {[key:string]:null} = {
  red: null,
  green: null,
  blue: null
};

음... 그것은 효과가 있지만, 우리는 더 잘할 수 있어요.

2. 타자 치는 길에...

Typescript 컴파일러에게 키워드와 함께 유추된 const를 사용하고 있다고 말합니다.

주어진 예에서, 그것은 다음과 같다:

const colorKeys: (keyof typeof color)[]  = ['red', 'green', 'blue'];

const newColor = colorKeys.filter((e) => color[e]);

그래도 조금 더 노력할 수 있겠어요? 다음 점을 보세요.

3. 여기 있습니다: 당신의 물건에 종류를 주세요!

인터페이스(또는 유형으로 필요한 모든 것)를 만들어 사용자의 상수에 제공합니다. 그런 다음 키워드를 사용하여 문자열 배열 유형을 지정합니다.

interface Color {
  red:number|null;
  green:number|null;
  blue:number|null;
}
const color: Color = {
  red: null,
  green: null,
  blue: null
};

const colorKeys: (keyof Color)[]  = ['red', 'green', 'blue'];

const newColor = colorKeys.filter((e) => color[e]);

반응형