Question

我正在尝试将Response数组映射到Model数组。

响应和模型是在Typescript中定义的类：

class Response {
  userId: number;
  userName: string;
}

class Model {
  id: number;
  name: string;
}

然后，我尝试按以下方式对其进行映射：

models = responses.map((response) => 
  new Model { id: response.userId, name: response.userName }
);

它没有编译，并且出现以下错误：

',' expected

我想念什么？

Answer 1

重要的是要记住，所有TypeScript的类型仅在编译时存在，而在运行时完全消失。我不熟悉C not，尽管从您尝试执行的操作来看，似乎并非如此。

没有关于您要完成的目标的进一步上下文，您可以使用几个选项。

一种选择是拥有适当的类，就像您在C♯中所熟悉的那样。

class Response {
    public userId: number;
    public userName: string;

    constructor(userId: number, userName: string) {
        this.userId = userId;
        this.userName = userName;
    }
}

class Model {
    public id: number;
    public name: string;

    constructor(id: number, name: string) {
        this.id = id;
        this.name = name;
    }
}

但是，您可以利用TypeScript的shorthand constructor，在构造函数中声明属性的位置。下面的行为与上面的示例完全相同。

class Response {
    constructor(
        public userId: number,
        public userName: string,
    ) {}
}

class Model {
    constructor(
        public id: number,
        public name: string,
    ) {}
}

使用这些方法中的任何一个，然后在映射时都需要构造该类。 JavaScript（因此是TypeScript）没有像C♯或Python中那样的命名参数，而只有位置参数。

models = responses.map((response: Response) =>
    new Model(response.userId, response.userName)
);

如果您希望使用类似于命名参数的内容，您可以利用parameter destructuring。

// Response omitted for brevity

class Model {
    public id: number;
    public name: string;

    // TS doesn't (yet) have a way to cleanly destructure with type annotations
    constructor({ id, name }: { id: number, id: string}) {
        Object.assign(this, { id, name });
    }
}

models = response.map((response: Response) => new Model(response));

最后一个选择是使用界面，其中不涉及类的构造，而是利用JavaScript对象的优势。重申一下，这些接口在编译时仅为，并且不会在运行时强制执行。

此选项与您已经拥有（并且可能熟悉）的选项最相似。

interface Response {
    userId: number;
    userName: string;
}

interface Model {
    id: number;
    name: string;
}

您的地图将与您已有的地图相似，只是没有类构造函数（因为实际上没有这样的类）。

models = responses.map((response: Response) => 
    ({ id: response.userId, name: response.userName })
);

希望这些不同的选项使您对可能的想法有所了解。如果您需要更多一般信息，我强烈建议您看看TypeScript's documentation；它很容易阅读，应该非常有用。如果有特定于此问题的内容，随时发表评论以澄清。

Answer 2

您需要（）

toggleBtns

在地图方法中初始化类

2 个答案: