TypeScript: как получить доступ к данным события onChange без ошибок?(Возможно, объект 'null')

Question

Пожалуйста, посмотрите этот минимальный пример ниже:

/** @jsx h */
import { h, FunctionalComponent } from 'preact';

const Test: FunctionalComponent = () => {
  return (
    <select
      value="1"
      onChange={(event) => {
        console.log(event.target.value);
      }}
    >
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  );
};

Как мне исправить ошибку, где написано Object is possibly 'null'?

Answer 1

Это «проверка безопасности TypeScript», информирующая вас о том, что event.target может быть нулевым, что приведет к доступу к event.target.value для выдачи ошибки во время выполнения.

Это предупреждение / ошибка можетзаставить замолчать, используя «ненулевое утверждение» :

<select value="1" onChange={(event) => {
    /* Add ! after target to state that "event.target!" is defined and 
       that value field can be safely accessed. This is a non-null 
       assertion */
    console.log(event.target!.value);
}}>

или проверив, что event.target определено перед доступом к нему:

<select value="1" onChange={(event) => {

    const { target } = event;
    if(target) {
        /* The ! is not needed seeing target is dedeuced as being defined */
        console.log(target.value);
    }
}}>