Typescript 中的 ES6 Map

Question

我正在 typescript 中創建一個 class ，它具有一個 ES6 (ECMAscript 2016) Map 屬性，如下所示：

class Item {
  configs: ????;
  constructor () {
    this.configs = new Map();
  }
}

如何在 typescript 中聲明 ES6 Map 類型？

Answer 1

編輯（2019 年 6 月 5 日）：雖然“TypeScript 原生支持Map ”的想法仍然正確，因為 2.1 版 TypeScript 支持稱為Record的東西。

type MyMapLikeType = Record<string, IPerson>;
const peopleA: MyMapLikeType = {
    "a": { name: "joe" },
    "b": { name: "bart" },
};

不幸的是，第一個通用參數（鍵類型）仍然沒有被完全尊重：即使是string類型，像peopleA[0] （ number ）這樣的東西仍然有效。

---

編輯（2016 年 4 月 25 日）：下面的答案是舊的，不應被視為最佳答案。 TypeScript 現在確實“原生地”支持 Maps，因此它只允許在輸出為 ES6 時使用 ES6 Maps。 對於 ES5，它不提供 polyfill； 你需要自己嵌入它們。

有關更多信息，請參閱下面的 mohamed hegazy 的答案以獲得更現代的答案，或者甚至參考此 reddit 評論以獲得簡短版本。

---

從 1.5.0 beta 開始，TypeScript 還不支持Maps 。 它也不是路線圖的一部分。

當前的最佳解決方案是具有類型化鍵和值的對象（有時稱為哈希圖）。 對於具有string類型的鍵和number類型的值的對象：

var arr : { [key:string]:number; } = {};

然而，一些警告：

1. 鍵只能是string或number類型
2. 實際上，您使用什么作為鍵類型並不重要，因為數字/字符串仍然可以互換接受（僅強制執行值）。

用上面的例子：

// OK:
arr["name"] = 1; // String key is fine
arr[0] = 0; // Number key is fine too

// Not OK:
arr[{ a: "a" }] = 2; // Invalid key
arr[3] = "name"; // Invalid value

Answer 2

見評論： https ://github.com/Microsoft/TypeScript/issues/3069#issuecomment-99964139

TypeScript 沒有內置 pollyfills。 如果有的話，由你決定使用哪個 pollyfill。 你可以使用類似es6Collection 、 es6-shims 、 corejs ..等的東西。 Typescript 編譯器需要的只是一個你想要使用的 ES6 結構的聲明。 你可以在這個 lib 文件中找到它們。

這是相關部分：

 interface Map<K, V> { clear(): void; delete(key: K): boolean; entries(): IterableIterator<[K, V]>; forEach(callbackfn: (value: V, index: K, map: Map<K, V>) => void, thisArg?: any): void; get(key: K): V; has(key: K): boolean; keys(): IterableIterator<K>; set(key: K, value?: V): Map<K, V>; size: number; values(): IterableIterator<V>; [Symbol.iterator]():IterableIterator<[K,V]>; [Symbol.toStringTag]: string; } interface MapConstructor { new <K, V>(): Map<K, V>; new <K, V>(iterable: Iterable<[K, V]>): Map<K, V>; prototype: Map<any, any>; } declare var Map: MapConstructor;

Answer 3

這是一個例子：

this.configs = new Map<string, string>();
this.configs.set("key", "value");

演示

Answer 4

是的，Map 現在可以在 typescript 中使用了。如果您查看 lib.es6.d.ts，您將看到界面：

interface Map<K, V> {
  clear(): void;
  delete(key: K): boolean;
  forEach(callbackfn: (value: V, key: K, map: Map<K, V>) => void,thisArg?: any): void;
  get(key: K): V | undefined;
  has(key: K): boolean;
  set(key: K, value: V): this;
  readonly size: number;} 

它非常適合用作字符串、對象對的字典。唯一的煩惱是，如果您使用它通過Map.get(key)在其他地方分配值，則像 Code 這樣的 IDE 會給您帶來可能未定義的問題.. 而不是使用 is-defined 檢查創建變量.. 只需轉換類型（假設您確定地圖具有鍵值對）

class myclass {
   mymap:Map<string,object>
   ...
   mymap = new Map<string,object>()
   mymap.set("akey",AnObject)
   let objectref = <AnObject>mymap.get("akey")

Answer 5

如何在 typescript 中聲明 ES6 Map 類型？

您需要定位--module es6 。 這是不幸的，您可以在這里提出您的擔憂： https ://github.com/Microsoft/TypeScript/issues/2953#issuecomment-98514111

Answer 6

至少：

配置：

 "lib": [
      "es2015"
    ]

如果您想要 IE < 11 支持， 請安裝 polyfill，例如https://github.com/zloirock/core-js：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects /地圖

Answer 7

不確定這是否是官方的，但這在 typescript 2.7.1 中對我有用：

class Item {
   configs: Map<string, string>;
   constructor () {
     this.configs = new Map();
   }
}

在簡單的Map<keyType, valueType>

Answer 8

使用lib config 選項，您可以將 Map 選擇到您的項目中。 只需將es2015.collection添加到您的 lib 部分。 當您沒有 lib 配置時，添加一個默認值並添加es2015.collection 。

因此，當您有目標：es5 時，將 tsconfig.json 更改為：

"target": "es5",
"lib": [ "dom", "es5", "scripthost", "es2015.collection" ],

Answer 9

Typescript 還不支持Map 。

ES6 兼容性表

Answer 10

將"target": "ESNEXT"屬性添加到tsconfig.json文件中。

{
    "compilerOptions": {
        "target": "ESNEXT" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    }
}

Answer 11

您可以在 Typescript class 中創建一個 Map，如下所示

export class Shop {
  public locations: Map<number, string>;

  constructor() {
   // initialize an empty map
   this.locations= new Map<number,string>();
  }

   // get & set functions
   ........
}