Объект Typescript, возможно, имеет значение «null».ts(2531) при использовании querySelectorAll
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, и это не работает.
Любая помощь приветствуется, спасибо!
Ответы 1
Если мы установим для свойства объекта значение null, не указывая объекту тип, и если мы включили strictNullChecks, компилятор предположит, что тип свойства является равен нулю. Вот пример на детской площадке.
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, вы можете объявить тип состояния вашего компонента так.
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];
}
}
}
@Stephen, я добавил способ обойти это.
Я не хочу усложнять, но можно ли не добавлять весь реагирующий материал, я делаю чистый проект Typscript. Как я могу добавить TestState в свой тестовый класс?
@Stephen Спасибо, что оценили дополнительную работу ... Я обновил ответ, чтобы избежать шаблонного кода React.
Достаточно справедливо, но как я могу это исправить, чтобы Typescript не выдавал ошибку. Есть ли лучший способ закодировать это? Структура в порядке?