Is key-value pair available in TypeScript? If so, how do I do that? Can anyone provide sample, example, or links?
-
1yes it is,can u specify your requirement ?– Taha NaqviApr 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.– AjayApr 7, 2016 at 7:51
14 Answers
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
.
-
2This is a map or dictionary. If you want something equivalent to a C# KeyValuePair, see answer stackoverflow.com/questions/36467469/… May 31, 2018 at 9:53
-
21Also nice to know, you don't need to call it
key
. You can, for instance, also write this:[countryCode: string]: string
. Nice for readability. Dec 27, 2018 at 14:47 -
2This is the updated link: basarat.gitbook.io/typescript/type-system/index-signatures Feb 11, 2020 at 17:42
-
2Yes, this is a map. But every time I search for "TypeScript Map," all I get is es6 Map, which is not what I want! So I'm very thankful that this answer is here. Aug 28, 2020 at 4:26
-
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;
-
5This helped a lot - Less code than the interface approach because it doesn't require describing
Bar
May 7, 2018 at 7:14 -
-
2indexedArray = {}; indexedArray["one"] = 1; /* good */ indexedArray["two"] = "two"; / fails */– JaimeMay 8, 2019 at 13:08
-
1
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'}
];
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" };
-
7Somewhat 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
-
16I too would like to know. Down voters never leave a comment, I sometimes think because they themselves don't know any better solution.– RuanSep 6, 2018 at 7:38
-
I didn't downvote but this solution doesn't have add, get, remove, etc.– DaNeShAug 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 aList<>
? See stackoverflow.com/questions/23096260/… Aug 9, 2019 at 6:09 -
4A
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 aList<>
--> stackoverflow.com/questions/23096260/… Nov 22, 2019 at 5:36
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
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!
-
-
1@JackMiller Map is defined by ES6: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Aug 9, 2018 at 19:49
-
1yourVar[YourKeyType] = XXX. This does not set an element in the Map. It does set a property.– mcooliveJun 7, 2019 at 23:20
-
-
1
an example of a key value pair is:
[key: string]: string
you can put anything as the value, of course
-
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?– ArajaySep 18, 2020 at 21:26 -
Yes but when you have array of those like
newRows: { [key: string]: string; }[]
then filter wont workthis.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
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:
Object
, esp.Object.entries
,Object.fromEntries
Map
, esp.Map.prototype.entries
andnew Map()
constructorSet
, esp.Set.prototype.entries
-
-
Just write
const kvp: KeyValuePairNamed = ["mykey", "myval"]
. The labels are a type-only construct for documentation purposes.– ford04Jul 25, 2021 at 12:21
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());
-
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 Mar 3, 2020 at 13:31
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.
export declare interface KeyValue<K, V> {
key: K;
value: V;
}
-
-
1@fdrobidoux generally for typescript you will see, eg,
Record<string, number>
(simply replace "KeyValue" with "Record". Aug 7 at 11:50 -
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
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,
}
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