React报错之Property 'value' does not exist on type 'HTMLElement' - chuckQu
source link: https://www.cnblogs.com/chuckQu/p/16629318.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React报错之Property 'value' does not exist on type 'HTMLElement'
正文从这开始~
当我们试图访问一个类型为HTMLElement
的元素上的value
属性时,会产生"Property 'value' does not exist on type 'HTMLElement'"错误。为了解决该错误,在访问属性之前,使用类型断言将元素类型断言为HTMLInputElement
。
这里有个示例用来展示错误是如何发生的。
// App.tsx
import {useEffect} from 'react';
export default function App() {
useEffect(() => {
const input = document.getElementById('message');
// ⛔️ Property 'value' does not exist on type 'HTMLElement'.ts(2339)
console.log(input?.value);
}, []);
return (
<div>
<input id="message" defaultValue="Initial value" />
</div>
);
}
我们得到错误的原因是因为,document.getElementById方法返回的类型为HTMLElement | null
,并且value属性不存在于HTMLElement
类型上。
为了解决该错误,使用类型断言将元素类型断言为HTMLInputElement
(或者HTMLTextAreaElement
,如果你使用textarea
元素键入)。
import {useEffect} from 'react';
export default function App() {
useEffect(() => {
// ✅ type element as HTMLInputElement
const input = document.getElementById('message') as HTMLInputElement;
console.log(input?.value); // 👉️ "Initial value"
}, []);
return (
<div>
<input id="message" defaultValue="Initial value" />
</div>
);
}
你也可以在内联中使用一个类型断言,就在访问值属性之前。
// App.tsx
import {useEffect} from 'react';
export default function App() {
useEffect(() => {
// 👇️ inline type assertion
const value = (document.getElementById('message') as HTMLInputElement).value;
console.log(value);
}, []);
return (
<div>
<input id="message" defaultValue="Initial value" />
</div>
);
}
当我们拥有一个值的类型信息,但是TypeScript无从得知时,就会使用类型断言。
我们有效地告诉TypeScript,
input
变量存储了一个HTMLInputElement
,不用担心它。
如果你正在使用一个textarea
元素,你将使用HTMLTextAreaElement
类型来代替。
如果你想更精确地控制类型,你可以使用一个联合类型来设置类型为HTMLInputElement | null
。
// App.tsx
import {useEffect} from 'react';
export default function App() {
useEffect(() => {
// ✅ type element as HTMLInputElement | null
const input = document.getElementById('message') as HTMLInputElement | null;
console.log(input?.value); // 👉️ "Initial value"
}, []);
return (
<div>
<input id="message" defaultValue="Initial value" />
</div>
);
}
HTMLInputElement | null
类型是正确的,因为如果提供id的元素不存在于DOM中,document.getElementById()
方法就会返回一个null
值。
需要注意的是,我们使用了可选链(?.
)操作符来短路运算,如果引用是空值的话(null
或者undefined
)。
换句话说,如果input
变量存储了一个null
值,我们就不会试图访问null
的属性,而得到一个运行时错误。
你也可以使用一个简单的if
语句作为类型守卫,以确保input
变量不存储一个null
值。
// App.tsx
import {useEffect} from 'react';
export default function App() {
useEffect(() => {
const input = document.getElementById('message') as HTMLInputElement | null;
if (input != null) {
console.log(input.value); // 👉️ "Initial value"
}
}, []);
return (
<div>
<input id="message" defaultValue="Initial value" />
</div>
);
}
TypeScript知道
input
变量在if
块中的类型是HTMLInputElement
,并允许我们直接访问其value
属性。
在类型断言中包含null
总是一种最佳实践,因为如果没有找到所提供的id
的元素,getElementById
方法将返回null
。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK