typescript - 在泛型类中定义嵌套对象的正确方法是什么？

Question

我想在我的SidenavOptions类中定义嵌套对象。

export class SidenavOptions {
    autoWidth: boolean;
    container: {
        styles: {
            width: string,
            height: string,
            backgroundColor: string,
        }
    };
}

并在我的组件中使用，例如：

bindOptions(): SidenavOptions {
    this.hasOptions = new SidenavOptions();
    this.hasOptions.container.styles.backgroundColor = "black";
    debugger
    return this.hasOptions;
  }

它在浏览器控制台中显示错误：

我在这里做错了什么？

标签： typescript

Answer 1

我猜strictPropertyInitialization你true的tsconfig.json. 如果已设置，您应该会看到此类型错误：

属性“容器”没有初始值设定项，也没有在构造函数中明确分配。(2564)

在这个打字稿操场上查看错误

您所做的只是设置类属性的类型，但实际上并没有设置值。所以当你打电话时this.hasOptions.container.styles，container是未定义的，所以你会崩溃。

您需要使用值实际初始化您的类。如果您添加一个类似于以下内容的构造函数：

    constructor() {
      this.autoWidth = true
      this.container = {
        styles: {
          width: '100px',
          height: '100px',
          backgroundColor: 'red'
        }
      }
    }

然后它应该像你期望的那样工作：

const options = new SidenavOptions()
options.container.styles.backgroundColor = 'black'
// works!

打字稿操场上的工作示例