Giá trị thuộc tính không tồn tại trên loại HTMLElement

Một lỗi phổ biến xảy ra khi làm việc với DOM trong TypeScript là "thuộc tính 'tên thuộc tính' không tồn tại trên EventTarget". Lỗi này xảy ra khi bạn cố truy cập một thuộc tính trên mục tiêu sự kiện trong TypeScript

Property 'value' does not exist on type 'EventTarget'.

Đây là một ví dụ về đoạn mã gây ra lỗi này

function handleClick(event: Event) {
  const { target } = event
  console.log(target.value);
}

const button = document.querySelector('button');
if (button) {
  button.addEventListener('click', handleClick);
}

Kiểm tra mã này trên

Nếu bạn biên dịch đoạn mã trên, trình biên dịch sẽ phát ra hai lỗi

1. target có thể là null
2. Thuộc tính

   function handleClick(event: Event) {
     const { target } = event
     console.log(target.value);
   }
   
   const button = document.querySelector('button');
   if (button) {
     button.addEventListener('click', handleClick);
   }

   0 không tồn tại trên loại EventTarget

Lỗi đầu tiên xảy ra do loại của đối tượng target là

function handleClick(event: Event) {
  const { target } = event
  console.log(target.value);
}

const button = document.querySelector('button');
if (button) {
  button.addEventListener('click', handleClick);
}

function handleClick(event: Event) {
  const { target } = event
  console.log(target.value);
}

const button = document.querySelector('button');
if (button) {
  button.addEventListener('click', handleClick);
}

function handleClick(event: Event) {
  const { target } = event
  if (target) console.log(target.value);
}

Lỗi thứ hai xảy ra do loại của đối tượng target hiện là EventTarget và loại này chỉ có ba phương thức.

function handleClick(event: Event) {
  const { target } = event
  console.log(target.value);
}

const button = document.querySelector('button');
if (button) {
  button.addEventListener('click', handleClick);
}

function handleClick(event: Event) {
  const { target } = event
  console.log(target.value);
}

const button = document.querySelector('button');
if (button) {
  button.addEventListener('click', handleClick);
}

function handleClick(event: Event) {
  const { target } = event
  if (target) console.log(target.value);
}

Mã VS cung cấp tính năng tự động hoàn thành cho các thuộc tính hợp lệ trên EventTarget

Nhưng chúng tôi biết rằng phần tử target là một nút trong trường hợp này, vì vậy chúng tôi cần truyền thông tin đó tới TypeScript để nó có thể cho phép chúng tôi truy cập các thuộc tính hợp lệ cho

function handleClick(event: Event) {
  const { target } = event
  if (target) console.log(target.value);
}

Loại EventTarget không kế thừa từ

function handleClick(event: Event) {
  const { target } = event
  if (target) console.log(target.value);
}

Một cách để sửa lỗi này là gõ cast đối tượng target bằng từ khóa

function handleClick(event: Event) {
  const { target } = event
  if (target) console.log((target as HTMLButtonElement).value);
}

function handleClick(event: Event) {
  const { target } = event
  if (target) console.log((target as HTMLButtonElement).value);
}

Hoặc bạn có thể ép kiểu từ

function handleClick(event: Event) {
  const { target } = event
  if (target) console.log((target as HTMLButtonElement).value);
}

function handleClick(event: Event) {
  const { target } = event
  if (target) console.log(target.value);
}

function handleClick(event: Event) {
  const target = event.target as HTMLButtonElement;
  if (target) console.log(target.value);
}

Dù bằng cách nào, mã biên dịch bởi vì bạn đã yêu cầu trình biên dịch coi đối tượng target là một

function handleClick(event: Event) {
  const { target } = event
  if (target) console.log(target.value);
}

function handleClick(event: Event) {
  const { target } = event
  console.log(target.value);
}

const button = document.querySelector('button');
if (button) {
  button.addEventListener('click', handleClick);
}

Một cách khác là xác định loại của đối tượng target trong hàm gọi lại bằng cách sử dụng toán tử giao cắt loại

function handleClick(event: Event) {
  const { target } = event
  if (target) console.log((target as HTMLButtonElement).value);
}

function handleClick(event: Event & {
  target: HTMLButtonElement
}) {
  const { target } = event
  console.log(target.value);
}

Điều này có nghĩa là chúng ta không cần sử dụng loại bảo vệ vì loại của target không bao gồm null và loại của các thuộc tính khác trên đối tượng

function handleClick(event: Event) {
  const target = event.target as HTMLButtonElement;
  if (target) console.log(target.value);
}

Nếu bạn cần làm điều này thường xuyên, bạn có thể trừu tượng hóa mẫu này thành loại riêng của nó bằng cách mở rộng loại

function handleClick(event: Event) {
  const { target } = event
  if (target) console.log(target.value);
}

type HTMLElementEvent<T extends HTMLElement> = Event & {
  target: T;
}

function handleClick(event: HTMLElementEvent<HTMLButtonElement>) {
  const { target } = event
  console.log(target.value);
}

Bây giờ, nếu bạn cần truy cập mục tiêu sự kiện trong ngữ cảnh khác, tất cả những gì bạn cần làm là thay thế loại

function handleClick(event: Event) {
  const { target } = event
  if (target) console.log(target.value);
}

Làm cách nào để lấy giá trị của phần tử HTML trong TypeScript?

Làm cách nào để lấy giá trị HTML trong JS?

Làm cách nào để lấy phần tử HTML theo ID trong TypeScript?