javascript - Typescript - 扩展接口(interface)(无构造函数)的类(带构造函数)

标签 javascript reactjs typescript

我的界面如下所示:

interface Person {
  id: number
  name: string
}

我有一个实现此接口(interface)的类:

class PersonClass implements Person {
  id: number = 123
  name: string = 'Kevin'
}

上面的代码工作正常,但是是硬编码的。相反,我希望在创建类时初始化这些值。例如:

class PersonClass implements Person {
  constructor(id, name) {
    this.id = id,
    this.name = name
  }
  id = this.id       // ERROR: Property 'id' is used before its initialization.
  name = this.name   // ERROR: Property 'name' is used before its initialization.
}

如上所示,我在尝试使用构造函数时遇到错误。

我想要的就是能够创建 PersonClass 的新实例并在那时初始化其值:

// Should be successful
new PersonClass(1, 'Sandra')  

// Should trigger an error
new PersonClass('McDonalds', 'Fries')

我做错了什么/遗漏了什么?

最佳答案

尝试

class PersonClass implements Person {
    id: number;
    name: string;
    constructor(id: number, name: string) {
        this.id = id;
        this.name = name;
    }
}

或者甚至:

class PersonClass implements Person {
    constructor(public id: number, public name: string) { }
}

关于javascript - Typescript - 扩展接口(interface)(无构造函数)的类(带构造函数),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60696983/

相关文章:

javascript - Angular Material 垫步进器 : How to use the same formgroup for multiple steps?

javascript - 迭代 CSS 类数组和点击切换类

javascript - 在 React 中设置超时

typescript - 返回类型与 TypeScript 中的输入类型相同

javascript - 有没有办法检查源是否被订阅?

javascript - 从 API 获取实时数据到路由

javascript - 使用 Javascript 客户端进行 REST 基本身份验证的安全缺陷是什么(如果有)?

javascript - 如何将 Drift bot JS 代码与静态 React NextJs 应用程序(登陆页面)集成?

javascript - 是否可以从 Mapbox 前端 map 创建静态 map ?

javascript - 如何迭代无限动画并在迭代之间有延迟