TypeScript – Das Element hat implizit den Typ „any“, da der Ausdruck vom Typ „string“ nicht zum Indexieren des Typs verwendet werden kann [duplicate]

Ich habe diesen Code:

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

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

Der Fehler liegt vor color[e] ganz unten mit dem Fehler:

Das Element hat implizit den Typ „any“, da der Ausdruck vom Typ „string“ nicht zum Indexieren des Typs „{ red: null;“ verwendet werden kann. grün: null; blau: null; }’. Für den Typ „{ red: null;“ wurde keine Indexsignatur mit einem Parameter vom Typ „string“ gefunden. grün: null; blau: null; }’.

Ich habe versucht, überall in TypeScript-Dokumenten zu suchen, aber wie soll ich das tun? interface dies, damit es akzeptieren kann color[e]?

Sie können deklarieren colors als any um TypeScript zu sagen, dass es dir hier den Rücken kehren soll (auch bekannt als explizit irgendein):

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

Aber wenn möglich, ist starkes Tippen vorzuziehen:

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

Weitere Informationen zur Indizierung in TypeScript: Indexsignaturen

BEARBEITEN: In dieser Antwort auf eine ähnliche Frage schlägt der Autor die Verwendung von a vor Map<,> — wenn das zu Ihrem Anwendungsfall passt.

Das Problem, das Sie haben, ist nicht das color ist der falsche Typ, aber TypeScript leitet den Typ von ab ['red', 'green', 'blue'] sein string[]. Oft ist diese Art der Schlussfolgerung wünschenswert, da Sie (soweit der Compiler weiß) möglicherweise einen Push durchführen möchten 'purple' darauf. In diesem Fall möchten Sie jedoch, dass der Compiler weiß, dass die einzigen Mitglieder die drei String-Literale sind 'red', 'green'Und 'blue'. Das heißt, Sie benötigen einen Typ, der mindestens so spezifisch ist wie Array<'red'|'green'|'blue'>.

Vorausgesetzt, Sie verwenden TS3.4 oder höher, ist der einfachste Weg, diese Art von Typinferenz vom Compiler zu erhalten, die Verwendung von a const Behauptung:

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

Der as const veranlasst den Compiler, auf a zu schließen Tupel bestehend aus genau den drei String-Literalen im Array, in der genauen Reihenfolge, die Sie festgelegt haben. (Es ist sogar ein schreibgeschütztes Tupel). Das ist gut genug, um Ihren Fehler zu beheben:

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

Alles klar, ich hoffe, das hilft. Viel Glück!

Link zum Code

Ich weiß, dass es eine alte Frage ist, aber ich bin mit den anderen Antworten nicht zufrieden. Bitte vermeiden Sie das as Schlüsselwort so weit wie möglich!

Mal sehen, warum dieser Fehler auftritt und was wir damit tun können.

Grund: Weder die Konstante noch das String-Array haben einen Typ.

Wenn Sie einer Konstante keinen Typ zuweisen, leitet Typescript seinen Typ basierend auf ab Ursprünglicher Wert. Da ich das weiß, sagt der Fehler nur: „Hey, e könnte eine beliebige Zeichenfolge sein, auch Zeichenfolgen, die nicht Teil des abgeleiteten Typs Ihrer Konstante sind. Was wäre, wenn? e war gleich 'yellow' das ist in nicht bekannt color abgeleiteter Typ?

Ich kann Ihnen drei Möglichkeiten empfehlen, damit umzugehen:

1. Am einfachsten, aber nicht so“Typscript Spirit”-Lösung

Geben Sie einfach einen Typ an string zu den Schlüsseln Ihrer Konstante, wie folgt:

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

Hmmm… Das funktioniert, aber wir können es besser machen.

2. Auf dem Weg zu Typen…

Teilen Sie dem Typescript-Compiler mit, dass Sie den verwenden Schlüssel von die abgeleitete Art der die Konstante mit den Schlüsselwörtern: keyof typeof.

Im gegebenen Beispiel wäre das:

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

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

Können Sie sich noch ein wenig mehr anstrengen? Siehe nächster Punkt.

3. Hier ist es: Geben Sie Ihren Objekten Typen!

Erstellen Sie eine Schnittstelle (oder was auch immer Sie als Typ benötigen) und übergeben Sie sie Ihrer Konstante. Geben Sie dann den Typ des String-Arrays mit an keyof Stichwort :

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]);

Vielen Dank für all die tollen Antworten. Ich bin neu bei Typoskript und habe meine erste Hürde erfolgreich behoben.

  // 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;
  }, {})

Hier ist eine andere Lösung mit Record

const color: Record<string, null> = {
    red: null,
    green: null,
    blue: null
}