Question

class Test {
  state = {
    elements: {
      container: null
    }
  };

  constructor(container: HTMLElement | null, options: {}) {
    //permet de prendre les options du user ainsi que de set des variables
    if (!container) {
      throw new Error("No container element was provided");
      return;
    }

    if (typeof container === "string") {
      const containerElement: any = document.querySelector(container);

      this.state.elements.container = containerElement;
    }
  }

  init() {
    if (this.state.elements.container != null) {
      this.state.elements.container.querySelectorAll(".box")[0];
    }
  }
}

export default Test;

我在此行上不断出错：this.state.elements.container.querySelectorAll(".box")[0];

我无法弄清楚该怎么做，因此它不会输出该错误，而其他开发人员也曾问过这个问题，但是我发现的唯一解决方法是将其包装在！= null中，这是行不通的。 / p>

感谢您的帮助！

Answer 1

如果我们在不给对象设置类型的情况下将其属性设置为null，并且如果启用了strictNullChecks，则编译器将假定该属性的类型为 null 。这是example of that in the playground。

let case1 = null;

// Type '"nope1"' is not assignable to type 'null'.
case1 = 'nope1';

let case2 = {
    prop: null,
}

// Type '"nope2"' is not assignable to type 'null'.
case2.prop = 'nope2';

无需使用所有React样板，就可以声明组件的状态类型like this。

type TestState = {
    elements: {
        container: HTMLElement | null
    }
}

export default class Test {

    state: Readonly<TestState> = {
        elements: {
            container: null
        }
    };

    constructor(container: HTMLElement | null, options: {}) {

        if (!container) {
            throw new Error("No container element was provided");
        }

        if (typeof container === "string") {
            const containerElement: any = document.querySelector(container);
            this.state.elements.container = containerElement;
        }
    }

    init() {
        if (this.state.elements.container) {
            this.state.elements.container.querySelectorAll(".box")[0];
        }
    }
}

使用querySelectorAll时，打字稿对象可能为'null'.ts（2531）

1 个答案: