Question

我在打字稿中创建了一个类，其属性是ES6（ECMAscript 2016）Map，如下所示：

class Todo_Controller extends Base_Controller
{
    private $todos;

    public function __construct(TodoRepository $todos)
    {
        $this->todos = $todos;
    }

    public function action_list() {
        return View::make("list")
                ->with("todos", $this->todos->get_all_todos());
    }

    public function action_view($id) {
        return View::make("view")
                ->with("todo", $this->todos->get_todo($id));
    }

    public function action_delete($id) {
        $this->todos->delete_todo($id);
        return View::make("deleted");
    }

    public function action_new() {
        return View::make("add");
    }

    public function action_add() {
        $todo = $this->todos->create_todo(Input->get('title', 'description');
        return View::make("success");
    }
}

如何在打字稿中声明ES6地图类型？

Answer 1

编辑（2016年4月25日）：以下答案陈旧，不应被视为最佳答案。 TypeScript现在支持“原生”地图，因此它只允许在输出为ES6时使用ES6地图。对于ES5，它不提供polyfill;你需要自己嵌入它们。

有关详细信息，请参阅mohamed hegazy's answer below以获得更新的答案，或者this reddit comment获取简短版本。

从1.5.0测试版开始，TypeScript尚不支持Maps。它还不是roadmap的一部分。

当前最佳解决方案是具有键入键和值的对象（有时称为散列映射）。对于类型为string的键的对象，以及类型为number的值：

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

但有些警告：

键只能是string或number
您使用什么作为密钥类型并不重要，因为数字/字符串仍然可以互换地接受（仅强制执行该值）。

通过上面的例子：

// 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没有内置的pollyfill。这取决于你   决定使用哪种pollyfill，如果有的话。你可以用类似的东西   es6Collection，   es6-shims，   corejs ..等。所有的打字稿   编译器需求是您想要的ES6结构的声明   使用。你可以在this lib file中找到它们。

这是相关部分：
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");

Demo

Answer 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一样你可能有未定义的问题..而不是使用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

如何在打字稿中声明ES6地图类型？

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

Answer 6

最低限度：

tsconfig：

 "lib": [
      "es2015"
    ]

并安装一个polyfill，如https://github.com/zloirock/core-js，如果你想要IE＆lt; 11支持：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Answer 7

Typescript尚不支持Map。

ES6 Compatibility Table

Answer 8

使用lib config option，您可以将Map挑选到您的项目中。只需将es2015.collection添加到您的lib部分。如果没有lib配置，请添加the defaults，然后添加es2015.collection。

因此，当您拥有目标：es5时，请将tsconfig.json更改为：

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

Answer 9

不确定这是否正式，但这对我来说在打字稿2.7.1：

<select name="isHealthy" formControlName="isHealthy" class="form-control" required>
  <option *ngFor="let healthy of healthyOptionsArray" [ngValue]="healthy">
      {{healthy.state}}
   </option>
</select>

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

Answer 10

将"target": "ESNEXT"属性添加到tsconfig.json文件。

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

打字稿中的ES6地图

10 个答案: