350

Is key-value pair available in TypeScript? If so, how do I do that? Can anyone provide sample, example, or links?

2
  • 1
    yes it is,can u specify your requirement ?
    – Taha Naqvi
    Apr 7, 2016 at 5:36
  • typescript transpiles(not compile) into javascript, so all feature of javascript is available in typescript. e.g. if you write your code in js and change its extension to .ts, it will work as fine as your js code. learn more about it on :- typescriptlang.org/docs.
    – Ajay
    Apr 7, 2016 at 7:51

14 Answers 14

506

Is key-value pair available in Typescript?

Yes. Called an index signature:

interface Foo {
   [key: string]: number;
}


let foo:Foo = {};
foo['hello'] = 123;
foo = {
  'leet': 1337
};
console.log(foo['leet']); // 1337

Here keys are string and values are number.

More

You can use an es6 Map for proper dictionaries, polyfilled by core-js.

8
246

The simplest way would be something like:

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

Usage:

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

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

let foo = indexedArray['myKey'];
let bar = indexedArray.myKey;
4
  • 5
    This helped a lot - Less code than the interface approach because it doesn't require describing Bar
    – TheGeekZn
    May 7, 2018 at 7:14
  • Have you got an example usage of this?
    – trebor74
    May 8, 2019 at 9:58
  • 2
    indexedArray = {}; indexedArray["one"] = 1; /* good */ indexedArray["two"] = "two"; / fails */
    – Jaime
    May 8, 2019 at 13:08
  • 1
    Best answer. Least confusing with simple data types
    – Leon
    Dec 31, 2020 at 10:25
61

You can also consider using Record, like this:

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

Or write something like this:

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

Is key-value pair available in Typescript?

If you think of a C# KeyValuePair<string, string>: No, but you can easily define one yourself:

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

Usage:

let foo: KeyValuePair = { key: "k", value: "val" };
6
  • 7
    Somewhat funny, already 6 votes with a sum of 0. Would the downvoters mind adding a comment what is bad about this solution? Aug 27, 2018 at 7:10
  • 16
    I too would like to know. Down voters never leave a comment, I sometimes think because they themselves don't know any better solution.
    – Ruan
    Sep 6, 2018 at 7:38
  • I didn't downvote but this solution doesn't have add, get, remove, etc.
    – DaNeSh
    Aug 8, 2019 at 17:05
  • 5
    @DaNeSh That is right. A KeyValuePair is not a list, but it could be an entry of a list. Maybe you are looking for a List<>? See stackoverflow.com/questions/23096260/… Aug 9, 2019 at 6:09
  • 4
    A KeyValuePair is not a list. There is just a single key and a single value within. Key: foo.key and value: foo.value. It seems your are looking for a List<> --> stackoverflow.com/questions/23096260/… Nov 22, 2019 at 5:36
19

Another simple way is to use a tuple:

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

Output:

First: hello Second: 10

18

Not for the questioner, but for all others, which are interested: See: How to define Typescript Map of key value pair. where key is a number and value is an array of objects

The solution is therefore:

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

Cheers!

6
13

an example of a key value pair is:

[key: string]: string

you can put anything as the value, of course

2
  • 1
    export default interface KeyValuePair { [key: string]: string | number | boolean; } Is slightly better, but is this weak typing? Does this defeat the purpose to some extent?
    – Arajay
    Sep 18, 2020 at 21:26
  • Yes but when you have array of those like newRows: { [key: string]: string; }[] then filter wont work this.newRows = this.newRows.filter(x=>x.length>0) Operator '>' cannot be applied to types 'string' and 'number'.ts(2365) x is an item of the array to supposed to be an array itself. Any ideas? Sep 2, 2022 at 17:15
12

A concise way is to use a tuple as key-value pair:

const keyVal: [string, string] =  ["key", "value"] // explicit type
const keyVal2 = ["key", "value"] as const // inferred type with const assertion
const [key, val] = ["key", "val"] // usage with array destructuring

You can create a generic KeyValuePair type for reusability:

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

TS 4.0

provides labeled tuple elements for better documentation and tooling support:

type KeyValuePairNamed = [key: string, value: string] // "key" and "value" labels

Compatibility

[key, value] tuples also ensure compatibility to JS built-in objects:

Playground

2
  • how do I use this KeyValuePairNamed?
    – JBarros35
    Jul 24, 2021 at 20:24
  • Just write const kvp: KeyValuePairNamed = ["mykey", "myval"]. The labels are a type-only construct for documentation purposes.
    – ford04
    Jul 25, 2021 at 12:21
4

One can also simple use Record

type Foo = Record<string, number>

Further usage in the docs

3
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());
2
  • This is not helpfull if you're trying to type data coming from the backend. Sep 18, 2018 at 10:34
  • @MathijsSegers This class is not meant to be a concrete type. Use this class as a derived type into your concrete type
    – GoldBishop
    Mar 3, 2020 at 13:31
1

KeyValue interface exists in angular library that uses typescript. So you have this generic interface to use if your project is angular. Or you can use its declaration to get a nice generic KeyValue interface if you are not using TS in angular.

enter image description here

export declare interface KeyValue<K, V> {
    key: K;
    value: V;
}
3
  • What about those who don't use Angular?
    – fdrobidoux
    Oct 21, 2022 at 18:55
  • 1
    @fdrobidoux generally for typescript you will see, eg, Record<string, number> (simply replace "KeyValue" with "Record". Aug 7 at 11:50
  • good one for angular. Instead of making custom class Oct 19 at 10:24
0

TypeScript has Map. You can use like:

public myMap = new Map<K,V>([
[k1, v1],
[k2, v2]
]);

myMap.get(key); // returns value
myMap.set(key, value); // import a new data
myMap.has(key); // check data

0
const YAHOO = 'YAHOO';
const GOOGLE = 'GOOGLE';
const google = 'google';
const yahoo = 'yahoo';

type DomainKeyType = typeof GMAIL | typeof GOOGLE;
type DomainValueType = typeof google | typeof yahoo;

type DomainType = Record<DomainKeyType , DomainValueType>

const domain: DomainType = {
  YAHOO: yahoo,
  GOOGLE: google,
}
-1

If you are trying to use below example

Example: { value1: "value1" }

And add conditionalData dynamically based on some condition, Try

let dataToWrite: any = {value1: "value1"};

if(conditionalData)
   dataToWrite["conditionalData"] = conditionalData

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.