Key-ValueペアはTypescriptで使用できますか?


130

キーと値のペアはtypescriptで利用できますか?はいの場合、それを行う方法。誰でもサンプルのリンク例を提供できますか?


はい、それはあなたの要件を指定できますか?
— Taha Naqvi

typescriptは(コンパイルではなく)javascriptにトランスパイルするため、javascriptのすべての機能をtypescriptで使用できます。たとえば、jsでコードを記述し、拡張子を.tsに変更すると、jsコードと同じように機能します。詳細については、:- typescriptlang.org/docsをご覧ください。
— アジャイ

回答:


172

Key-ValueペアはTypescriptで使用できますか?

はい。インデックス署名と呼ばれる:

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

ここにキーstringと値がありますBar。

もっと

あなたはES6を使用することができMap、適切な辞書、のためによりpolyfilledcore-js。


1
これは地図または辞書です。あなたがC#KeyValuePairと同等の何かをしたい場合は、回答を参照stackoverflow.com/questions/36467469/...
— ジャック・ミラー

4
また、知っておくと便利ですkey。呼び出す必要はありません。たとえば、次のように書くこともできます[countryCode: string]: string。読みやすさのために素晴らしい。
— Jeff Huijsmans、2018

1
これは更新されたリンクです:basarat.gitbook.io/typescript/type-system/index-signatures
— BornToCode

130

最も簡単な方法は次のようなものです。

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

使用法:

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

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

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

3
これは大いに役立った-説明する必要がないため、インターフェースアプローチよりもコードが少ないBar
— TheGeekZn

これの使用例はありますか?
— trebor74

1
indexedArray = {}; indexedArray ["one"] = 1; / *良い* / indexedArray ["two"] = "two"; /失敗* /
— Jaime

22

Key-ValueペアはTypescriptで使用できますか?

C#のKeyValuePair <string、string>を考えた場合、いいえ、ただし自分で簡単に定義できます。

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

使用法:

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

4
ややおかしい、すでに0の合計で6票。反対投票者はコメントを追加することを気にしますか?このソリューションの何が悪いのですか?
— ジャックミラー

7
私も知りたいです。反対票を投じた人は決してコメントを残しません。彼ら自身がより良い解決策を知らないため、私は時々思います。
— Ruan

私は反対投票しませんでしたが、このソリューションには追加、取得、削除などはありません
— DaNeSh

2
@DaNeShそうです。A KeyValuePairはリストではありませんが、リストのエントリである可能性があります。多分あなたは探していList<>ますか?stackoverflow.com/questions/23096260/…を
— ジャックミラー

キーを使用して値を取得する方法は?keyValuePair ["k"]のようですか?
— ハイゼンベルク

15

質問者のためではなく、興味のある他のすべてのために:参照:キーと値のペアのTypescript Mapを定義する方法。ここで、keyは数値で、valueはオブジェクトの配列です

したがって、解決策は次のとおりです。

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

乾杯!


どこがMap定義されていますか?Angular固有ですか?
— ジャックミラー、

1

1
yourVar [YourKeyType] = XXX。これはマップの要素を設定しません。プロパティを設定します。
— mcoolive

IEブラウザーはマップをサポートしていません。
— Rahul Upadhyay

12

別の簡単な方法はタプルを使うことです:

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

出力:

最初:こんにちは2番目:10


10

次のRecordように、の使用を検討することもできます。

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

または次のように書きます:

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

9

キーと値のペアの例は次のとおりです。

[key: string]: string

値として何でも入れることができます-タイプが異なるプログラムで値を設定している場合は、以下を入れることができます:

[key: string]: any

ただし、独自の裁量でany:)


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

バックエンドからのデータを入力しようとしている場合、これは役に立ちません。
— Mathijs Segers 2018

@MathijsSegersこのクラスは具象型であることを意図していません。このクラスを具象型への派生型として使用する
— GoldBishop

1

簡潔な方法は、タプルをキーと値のペアとして使用することです。

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

[key, value] タプルは、JS組み込みオブジェクトへの互換性も保証します。

KeyValuePair再利用可能なジェネリック型を作成できます。

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

TS 4.0:名前付きタプル

今後のTS 4.0は、より良いドキュメントとツールのサポートのために名前付き/ラベル付きタプルを提供します:

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

遊び場の例

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.