【问题标题】:Is key-value pair available in Typescript?Typescript 中是否提供键值对?
【发布时间】:2016-07-27 19:41:40
【问题描述】:

打字稿中是否提供键值对?如果是的话怎么做。谁能提供示例链接。

【问题讨论】:

  • 是的,你能指定你的要求吗?
  • typescript 转译(不编译)成 javascript,因此 javascript 的所有功能都可以在 typescript 中使用。例如如果您在 js 中编写代码并将其扩展名更改为 .ts,它将与您的 js 代码一样正常工作。了解更多信息:- typescriptlang.org/docs

标签: typescript


【解决方案1】:

Typescript 中是否提供键值对?

是的。致电an index signature

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


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

这里的键是string,值是number

更多

您可以将 es6 Map 用于正确的字典,polyfilled by core-js

【讨论】:

  • 这是地图或字典。如果您想要与 C# KeyValuePair 等效的东西,请参阅答案 stackoverflow.com/questions/36467469/…
  • 也很高兴知道,您无需将其称为key。例如,您也可以这样写:[countryCode: string]: string。很好的可读性。
  • 是的,这是一张地图。但每次我搜索“TypeScript Map”时,我得到的只是 es6 Map,这不是我想要的!所以我非常感谢这个答案在这里。
  • 你救了我
【解决方案2】:

KeyValue 接口存在于使用 typescript 的 Angular 库中。 因此,如果您的项目是有角度的,那么您可以使用这个通用接口。 或者,如果您没有在 Angular 中使用 TS,您可以使用它的声明来获得一个不错的通用 KeyValue 接口。

export declare interface KeyValue<K, V> {
    key: K;
    value: V;
}

【讨论】:

    【解决方案3】:

    一种简洁的方法是将tuple 用作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
    

    您可以创建一个通用的KeyValuePair 类型以实现可重用性:

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

    TS 4.0

    provideslabeled tuple elements 以获得更好的文档和工具支持:

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

    兼容性

    [key, value] 元组还保证了对 JS 内置对象的兼容性:

    Playground

    【讨论】:

    • 如何使用这个 KeyValuePairNamed?
    • 只写const kvp: KeyValuePairNamed = ["mykey", "myval"]。标签是用于文档目的的仅类型构造。
    【解决方案4】:

    TypeScript 有 Map。你可以像这样使用:

    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
    
    

    【讨论】:

      【解决方案5】:

      如果您尝试使用以下示例

      示例:{ 值1:“值1” }

      并根据某些条件动态添加conditionalData,试试

      let dataToWrite: any = {value1: "value1"};
      
      if(conditionalData)
         dataToWrite["conditionalData"] = conditionalData
      

      【讨论】:

        【解决方案6】:

        键值对的一个例子是:

        [key: string]: string

        当然,你可以把任何东西作为值

        【讨论】:

        • export default interface KeyValuePair { [key: string]: string | number | boolean; } 稍微好一点,但是这是弱打字吗?这是否在某种程度上违背了目的?
        【解决方案7】:

        最简单的方法是:

        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;
        

        【讨论】:

        • 这很有帮助 - 比接口方法更少的代码,因为它不需要描述 Bar
        • 你有这个用法的例子吗?
        • indexedArray = {}; indexedArray["one"] = 1; /* 好 */ indexedArray["two"] = "two"; / 失败 */
        • 最佳答案。与简单数据类型混淆程度最低
        【解决方案8】:

        你也可以考虑使用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】:
          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());
          

          【讨论】:

          • 如果您尝试输入来自后端的数据,这将无济于事。
          • @MathijsSegers 这个类并不是一个具体的类型。将此类用作具体类型的派生类型
          【解决方案10】:

          另一种简单的方法是使用tuple

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

          输出:

          第一个:你好第二个:10

          【讨论】:

            【解决方案11】:

            Typescript 中是否提供键值对?

            如果您想到一个 C# KeyValuePair<string, string>:不,但您可以轻松地自己定义一个:

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

            用法:

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

            【讨论】:

            • 有点好笑,已经 6 票,总和为 0。否决票的人会介意添加评论,这个解决方案有什么不好吗?
            • 我也想知道。反对者从不发表评论,我有时认为是因为他们自己不知道更好的解决方案。
            • 我没有投反对票,但这个解决方案没有添加、获取、删除等功能。
            • @DaNeSh 没错。 KeyValuePair 不是列表,但它可以是列表的条目。也许您正在寻找List&lt;&gt;?见stackoverflow.com/questions/23096260/…
            • KeyValuePair 不是列表。里面只有一个键和一个值。键:foo.key 和值:foo.value。看来您正在寻找List&lt;&gt; --> stackoverflow.com/questions/23096260/…
            【解决方案12】:

            不是针对提问者,而是针对所有其他感兴趣的人: 见:How to define Typescript Map of key value pair. where key is a number and value is an array of objects

            因此解决方案是:

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

            干杯!

            【讨论】:

            • Map 在哪里定义?它是 Angular 特定的吗?
            • yourVar[YourKeyType] = XXX。这不会在 Map 中设置元素。它确实设置了一个属性。
            • IE浏览器不支持地图,有什么办法吗?
            • @RahulUpadhyay 普通对象。
            猜你喜欢
            • 2014-07-28
            • 2013-08-26
            • 2020-10-07
            • 2020-08-18
            • 1970-01-01
            • 2020-05-31
            • 1970-01-01
            • 2012-12-28
            • 2021-12-25
            相关资源
            最近更新 更多