TYPO3 Core

There are some type assertions that cover up that a value might be null on run-time as actually no element is found.

Current implementation¶

this.clearableElements = document.querySelectorAll('.t3js-clearable') as NodeListOf<HTMLInputElement>;

const targetElement = parentElement.querySelector('button[data-bits="' + bits + '"]') as HTMLButtonElement;

<HTMLInputElement>document.querySelector('input[name="' + e.data.fieldName + '"]');

Implementation with null¶

IMO the type assertion should not remove the null possibility - and could look like this:

this.clearableElements = document.querySelectorAll('.t3js-clearable') as NodeListOf<HTMLInputElement|null>;

const targetElement = parentElement.querySelector('button[data-bits="' + bits + '"]') as HTMLButtonElement|null;

<HTMLInputElement|null>document.querySelector('input[name="' + e.data.fieldName + '"]');

Improved implementation with null¶

To further improve use the following type assertion for find/closest/querySelector/querySelectorAll, as this will give the proper type including the null-possibility:

this.clearableElements = document.querySelectorAll<HTMLInputElement>('.t3js-clearable');

const targetElement = parentElement.querySelector<HTMLButtonElement>('button[data-bits="' + bits + '"]');

const field = document.querySelector<HTMLInputElement>('input[name="' + e.data.fieldName + '"]');