'HTMLElement'类型上不存在点值属性[重复]答案

【问题标题】：dot value property does not exist on type 'HTMLElement' [duplicate]'HTMLElement'类型上不存在点值属性[重复]
【发布时间】：2021-10-23 05:53:32
【问题描述】：

我在做一个个人项目，但在使用 firebase 完成注册和登录表单时遇到了一些问题。我正在使用 Vuejs 和 TS，它向我抛出了这个错误。电子邮件另存为 txtEmail.value 和 txtPassword.value 的部分可以解决该错误。这是一个sn-p：

const txtEmail = document.getElementById('email');
const txtPassword = document.getElementById('psw');
const btnLogin = document.getElementById('login');
const btnSignUp = document.getElementById('register');
const btnLogout = document.getElementById('logout');


btnLogin.addEventListener('click', e => {
    const email = txtEmail.value;
    const pass = txtPassword.value;
    const auth = firebase.auth();
    //Sign in
    const promise = auth.signInWithEmailAndPassword(email, pass);
    promise.catch(e => console.log(e.message));
});

【问题讨论】：

你检查过this answer吗？它也是一个 Vue CLI 应用程序，还是通过使用 <script> 添加它来使用 VueJS 而不是 CDN？

标签： typescript firebase

【解决方案1】：

您需要使用type assertions 将元素的返回类型转换为HTMLInputElement。

提醒：因为类型断言在编译时被删除，所以没有与类型断言关联的运行时检查。类型断言错误不会产生异常或null。

// Using `as`:
const txtEmail = document.getElementById('email') as HTMLInputElement;
const txtPassword = document.getElementById('psw') as HTMLInputElement;

// Using  angle-brackets:
const txtEmail = <HTMLInputElement>document.getElementById('email');
const txtPassword = <HTMLInputElement>document.getElementById('psw');

【讨论】：