Подтвердить что ты не робот

Карта ES6 в Typescript

Я создаю класс в typescript, у которого есть свойство, которое является ES6 (ECMAscript 2016). Например:

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

Как объявить тип карты ES6 в typescript?

4b9b3361

Ответ 1

РЕДАКТИРОВАТЬ (5 июня 2019 г.): Хотя идея о том, что "TypeScript изначально поддерживает Map ", все еще верна, поскольку версия 2.1 TypeScript поддерживает нечто, называемое Record.

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

К сожалению, первый универсальный параметр (тип ключа) все еще не полностью соблюдается: даже с string типом что-то вроде peopleA[0] (number) все еще допустимо.


РЕДАКТИРОВАТЬ (25 апреля 2016 г.): приведенный ниже ответ является старым и не должен рассматриваться как лучший ответ. TypeScript теперь действительно поддерживает карты "изначально", поэтому он просто позволяет использовать карты ES6, когда на выходе выводится ES6. Для ES5 он не предоставляет полифилы; Вы должны вставить их сами.

Для получения дополнительной информации, обратитесь к ответу Мохамеда Хегази ниже для более современного ответа, или даже к этому комментарию reddit для короткой версии.


Начиная с бета-версии 1.5.0, TypeScript еще не поддерживает Карты. Это еще не часть дорожной карты.

В настоящее время лучшим решением является объект с типизированным ключом и значением (иногда называемый hashmap). Для объекта с ключами типа 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

Ответ 2

Смотрите комментарий в: https://github.com/Microsoft/TypeScript/issues/3069#issuecomment-99964139

TypeScript не поставляется со встроенными pollyfills. это зависит от вас решите, какой pollyfill использовать, если таковой имеется. вы можете использовать что-то вроде es6Collection, es6-прокладки, corejs..etc. Все TypescriptТребования компилятора - это декларация для конструкций ES6, которые вы хотите использовать. вы можете найти их все в этой библиотеке файл.

вот соответствующая часть:

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;

Ответ 3

Вот пример:

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

демонстрация

Ответ 4

Да Карта теперь доступна в машинописи.. если вы посмотрите в 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), IDE, такой как Code, дает вам проблемы с возможной неопределенностью.. а не создавая переменную с определенной проверкой. просто введите тип (предполагая, что вы точно знаете, что карта имеет пару ключ-значение)

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

Ответ 8

С опцией lib config вы можете вставлять карту в свой проект. Просто добавьте es2015.collection в раздел lib. Если у вас нет lib config, добавьте один с настройками по умолчанию и добавьте es2015.collection.

Поэтому, когда у вас есть цель: es5, измените tsconfig.json на:

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

Ответ 9

Не уверен, что это официально, но это работало для меня в машинописи 2.7.1:

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

В простой Map<keyType, valueType>

Ответ 10

Добавить свойство "target": "ESNEXT" в файл tsconfig.json.

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