在 Map 上使用 .map()<k, v> () 在 TypeScript</k,>

Question

我想在我的 react TypeScript 應用程序中擴展 TypeScript Map類型，以允許我使用.map() ，就像您使用Array一樣。

我發現這篇文章描述了幾種方法，但對我來說最自然的 TypeScript 是Jeremy Lachkar的回答，盡管它不是很受歡迎。 這意味着我不必在客戶端代碼中引入任何笨拙的語法，只需擴展Map object。

他的代碼如下所示：

export {}

declare global {
    interface Map<K, V> {
        map<T>(predicate: (key: K, value: V) => T): Map<V, T>
    }
}

Map.prototype.map = function<K, V, T>(predicate: (value: V, key: K) => T): Map<K, T> {
    let map: Map<K, T> = new Map()

    this.forEach((value: V, key: K) => {
        map.set(key, predicate(value, key))
    })
    return map
}

我對此進行了擴充，以使其對我來說看起來更自然（我認為界面中的Map<V, T>在任何情況下都可能是錯誤的）：

export {}

declare global {
  interface Map<K, V> {
    map<T>(predicate: (key: K, value: V) => T): Map<K, T>;
  }
}

Map.prototype.map = function<K, V, T>(predicate: (key: K, value: V) => T): Map<K, T> {
  let map: Map<K, T> = new Map();

  this.forEach((key: K, value: V) => {
    map.set(key, predicate(key, value));
  });

  return map;
}

這很好用。 我現在可以用 map 代替我的Map並生成一個新的。 但是，現在我無法使用Map上的其他方法，例如.set() ，並且我的代碼會拋出錯誤。 這些現在是undefined 。

知道如何處理這個嗎？ 我在腦海中想象這可能是某種tsconfig.json問題，但我不知道。

Answer 1

class Map2<K, V> extends Map<K, V> {
  map<T>(mapper: (value: V, key: K, map: this) => T): Map2<K, T> {
    let m = new Map2<K, T>;
    for (let [k, v] of this.entries()) {
      m.set(k, mapper(v, k, this))
    }
    return m;
  }
}

let m = new Map2([[1, 2], [3, 4]])
console.log(m)

let m2 = m.map(e => e + 10)
console.log(m2)

創建一個子類通常比更改原型更好（如果你是唯一一個更改原型的人，那效果很好）

declare global {
  interface Map<K, V> {
    map1<T>(mapper: (value: V, key: K, map: this) => T): Map2<K, T>
  }
}

Map.prototype.map1 = Map2.prototype.map

export {}

Answer 2

好的，事實證明是我的客戶端代碼出錯了，這就是為什么.set()等未定義的原因。 所以我在頂部引用的原始帖子確實有效。

我原以為這是因為重新定義接口已經刪除了其他方法。 不是這樣。 傻我。

和你一樣。