正文从这开始~
总览
当我们试图访问一个类型为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
。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。