Ist das Schlüssel-Wert-Paar in Typescript verfügbar?


126

Ist das Schlüssel-Wert-Paar im Typoskript verfügbar? Wenn ja, wie geht das? Kann jemand Beispiel-Beispiellinks bereitstellen.


Ja, können Sie Ihre Anforderungen angeben?
Taha Naqvi

Typoskript transpiliert (nicht kompiliert) in Javascript, sodass alle Funktionen von Javascript in Typoskript verfügbar sind. Wenn Sie beispielsweise Ihren Code in js schreiben und seine Erweiterung in .ts ändern, funktioniert er genauso gut wie Ihr js-Code. Weitere Informationen finden Sie unter: - typescriptlang.org/docs .
Ajay

Antworten:


167

Ist das Schlüssel-Wert-Paar in Typescript verfügbar?

Ja. Genannt ein Index Unterschrift :

interface Foo {
   [key: string]: Bar;
} 
let foo:Foo = {};

Hier sind Schlüssel stringund Werte Bar.

Mehr

Sie können ein es6 Mapfür richtige Wörterbücher verwenden, die voncore-js polyfilled sind .


1
Dies ist eine Karte oder ein Wörterbuch. Wenn Sie etwas möchten, das einem C # KeyValuePair entspricht, lesen
Jack Miller,

4
Auch schön zu wissen, dass Sie es nicht nennen müssen key. Sie können zum Beispiel auch Folgendes schreiben : [countryCode: string]: string. Schön für die Lesbarkeit.
Jeff Huijsmans


128

Der einfachste Weg wäre so etwas wie:

var indexedArray: {[key: string]: number}

Verwendung:

var indexedArray: {[key: string]: number} = {
    foo: 2118,
    bar: 2118
}

indexedArray['foo'] = 2118;
indexedArray.foo= 2118;

let foo = indexedArray['myKey'];
let bar = indexedArray.myKey;

3
Dies hat viel geholfen - weniger Code als der Schnittstellenansatz, da er nicht beschrieben werden mussBar
TheGeekZn

Haben Sie ein Beispiel für die Verwendung?
trebor74

1
indexedArray = {}; indexedArray ["one"] = 1; / * good * / indexedArray ["zwei"] = "zwei"; / scheitert * /
Jaime

21

Ist das Schlüssel-Wert-Paar in Typescript verfügbar?

Wenn Sie an ein C # KeyValuePair <string, string> denken : Nein, aber Sie können eines einfach selbst definieren:

interface KeyValuePair {
    key: string;
    value: string;
}

Verwendung:

let foo: KeyValuePair = { key: "k", value: "val" };

4
Etwas lustig, schon 6 Stimmen mit einer Summe von 0. Würde es den Downvotern etwas ausmachen, einen Kommentar hinzuzufügen, was an dieser Lösung schlecht ist?
Jack Miller

7
Ich würde auch gerne wissen. Abwärtswähler hinterlassen nie einen Kommentar, denke ich manchmal, weil sie selbst keine bessere Lösung kennen.
Ruan

Ich habe nicht abgelehnt, aber diese Lösung hat nicht Hinzufügen,
Abrufen

2
@ DaNeSh Das ist richtig. A KeyValuePairist keine Liste, aber es könnte ein Eintrag einer Liste sein. Vielleicht suchen Sie eine List<>? Siehe stackoverflow.com/questions/23096260/…
Jack Miller

Wie verwende ich den Schlüssel, um den Wert zu erhalten? ist es wie: keyValuePair ["k"]?
Heisenberg

15

Nicht für den Fragesteller, sondern für alle anderen Interessierten: Siehe: Definieren der Typoskript-Zuordnung des Schlüsselwertpaars. Dabei ist der Schlüssel eine Zahl und der Wert ein Array von Objekten

Die Lösung lautet daher:

let yourVar: Map<YourKeyType, YourValueType>;
// now you can use it:
yourVar = new Map<YourKeyType, YourValueType>();
yourVar[YourKeyType] = <YourValueType> yourValue;

Prost!


Wo ist Mapdefiniert? Ist es winkelspezifisch?
Jack Miller

1

1
yourVar [YourKeyType] = XXX. Dadurch wird kein Element in der Karte festgelegt. Es wird eine Eigenschaft festgelegt.
mcoolive

IE-Browser unterstützt Map nicht, eine Alternative?
Rahul Upadhyay

12

Eine andere einfache Möglichkeit ist die Verwendung eines Tupels :

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10];
// Access elements
console.log("First: " + x["0"] + " Second: " + x["1"]);

Ausgabe:

Erstens: Hallo Zweitens: 10


10

Sie können auch Folgendes in Betracht ziehen Record:

const someArray: Record<string, string>[] = [
    {'first': 'one'},
    {'second': 'two'}
];

Oder schreibe so etwas:

const someArray: {key: string, value: string}[] = [
    {key: 'first', value: 'one'},
    {key: 'second', value: 'two'}
];

9

Ein Beispiel für ein Schlüsselwertpaar ist:

[key: string]: string

Sie können alles als Wert angeben. Wenn Sie programmgesteuert Werte ausgefüllt haben, deren Typen variieren, können Sie Folgendes eingeben:

[key: string]: any

aber fahren Sie nach eigenem Ermessen mit any:) fort


1
class Pair<T1, T2> {
    private key: T1;
    private value: T2;

    constructor(key: T1, value: T2) {
        this.key = key;
        this.value = value;
    }

    getKey() {
        return this.key;
    }

    getValue() {
        return this.value;
    }
}
const myPair = new Pair<string, number>('test', 123);
console.log(myPair.getKey(), myPair.getValue());

Dies ist nicht hilfreich, wenn Sie versuchen, Daten aus dem Backend einzugeben.
Mathijs Segers

@MathijsSegers Diese Klasse ist nicht als konkreter Typ gedacht. Verwenden Sie diese Klasse als abgeleiteten Typ für Ihren konkreten Typ
GoldBishop

1

Eine prägnante Möglichkeit besteht darin, ein Tupel als Schlüssel-Wert-Paar zu verwenden :

const keyVal: [string, string] =  ["key", "value"] // explicit type
// or
const keyVal2 = ["key", "value"] as const // inferred type with const assertion

[key, value] Tupel stellen auch die Kompatibilität mit integrierten JS-Objekten sicher:

Sie können einen generischen KeyValuePairTyp für die Wiederverwendbarkeit erstellen :

type KeyValuePair<K extends string | number, V = unknown> = [K, V]
const kv: KeyValuePair<string, string> = ["key", "value"]

TS 4.0: Benannte Tupel

Das kommende TS 4.0 bietet benannte / beschriftete Tupel für eine bessere Dokumentation und Werkzeugunterstützung:

type KeyValuePairNamed = [key: string, value: string] // add `key` and `value` labels
const [key, val]: KeyValuePairNamed = ["key", "val"] // array destructuring for convenience

Beispiel für einen funktionierenden Spielplatz

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.