类型“HtmleElement”[duplicate]上不存在点值属性

Question

我在做一个个人项目，在完成firebase的注册和登录表单时遇到了一些问题。我使用的是Vuejs和TS，它给我带来了这个错误。将电子邮件另存为txtEmail的部分。值和txtPassword。值将删除错误。以下是一个片段：

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));
});

Answer 1

您需要使用类型断言将元素的返回类型强制转换为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');