我一直有一个类似的问题(TS警告在JS文件:“属性X不存在的类型X”:它是可能写更干净的JavaScript?)

虽然标记帮助删除了typescript文件中的警告，但在编译后，JavaScript文件中仍然会出现警告。

那么，我如何编写代码，这是干净的，并允许我操作。value ?

这花了我不少时间，但我用另一种方法找到了解决方法:

HTML代码:

<form id="my-form" 
   action="index.html"
   method="get"
   onsubmit="return showValue();">
    <input type="text" name="username">
    <input type="text" name="full-name">
    <input type="password" name="password">
    <button type="button" onclick="showValue();">Show value</button>
</form>

Javascript代码:

function showValue() {
    const myForm = document.forms.my-form;
    console.log(myForm?.username.value);
    return 1;
}

document.forms.x有一个属性“value”，它可以删除typescript文件和生成的JavaScript中的警告。

有一种方法可以在不使用类型断言的情况下实现这一点，即使用泛型，泛型通常使用起来更好、更安全。

不幸的是，getElementById不是通用的，但querySelector是:

const inputValue = document.querySelector<HTMLInputElement>('#greet')!.value;

类似地，你可以使用querySelectorAll来选择多个元素，并使用泛型，这样TS就可以理解所有选择的元素都是特定类型的:

const inputs = document.querySelectorAll<HTMLInputElement>('.my-input');

这将产生一个NodeListOf<HTMLInputElement>。

一个快速的修复方法是使用[]来选择属性。

function greet(elementId) {
    var inputValue = document.getElementById(elementId)["value"];
    if(inputValue.trim() == "") {
        inputValue = "World";
    }
    document.getElementById("greet").innerText = greeter(inputValue);
}

我尝试了几种方法，找出了这个解， 我不知道你原来的剧本有什么问题。

你可以参考Tomasz Nurkiewicz的文章。

对于那些可能还在挣扎的人，另一种替代方法是使用(document.getElementById(elementId) as HTMLInputElement)。Value = "。源。

如果你仍然面临问题，然后尝试将其提取为如下函数:

function myInput() {
   (document.getElementById(elementId) as HTMLInputElement).value = ''
}

同样对于任何人使用属性，如Props或Refs没有你的“DocgetId’s”，那么你可以:

("" as HTMLInputElement).value;

这里的倒引号是你的props值，所以一个例子是这样的:

var val = (this.refs.newText as HTMLInputElement).value;
alert("Saving this:" + val);

const a = document.getElementById("a")
if (a instanceof HTMLInputElement) {
    // a.value is valid here
    console.log(a.value)
}

更安全的方法

上面的代码片段是答案的要点;继续阅读推理。

大多数现有的答案推荐Type断言(类型转换)，它可以完成这项工作，但有点像使用any -它禁用类型检查。有更好更安全的方法。

类型断言就像告诉TypeScript假装变量是我们所说的类型。因此，TypeScript将对该类型执行类型检查。如果我们犯了一个错误，告诉它错误的类型，我们将得到一种错误的安全感，因为不会有编译警告，但在运行时将会有错误。让我们来看一个例子:

// <input id="a" value="1">
// <div   id="b" value="2"></div>

const a = document.getElementById("a") as HTMLInputElement
const b = document.getElementById("b") as HTMLInputElement

console.log(a.value) // 1
console.log(b.value) // undefined

我们已经告诉TypeScript a和b是HTMLInputElement类型，它也会这样对待它们。然而，由于b是HTMLDivElement类型，没有value属性，b.value返回undefined。

使用类型保护的类型缩小

更好的方法是使用类型保护，它允许更大的控制。

类型保护是在运行时确定变量类型的一种方法。虽然类型断言只是说:“变量x是T类型的”，但类型守卫说:“变量x是T类型的，如果它具有这些属性”。让我们快速看看类型守卫是什么样子的:

const a = document.getElementById("a")
if (a instanceof HTMLInputElement) {
    // a == input element
} else {
    // a != input element
}

这个类型保护只是检查a是否是HTMLInputElement的实例。如果是，TypeScript会识别出来，并将If块中的a视为该类型——它将允许访问输入元素的所有属性。这称为类型窄化。

为什么应该使用类型保护而不是类型断言?与处理错误的原因相同。虽然类型保护仍然不会在编译时输出警告，但它们使您处于控制之中。你(和TypeScript)不能保证value属性是否存在，但是有了类型断言，你可以决定在它不存在的情况下做什么。类型断言就像忽略错误，而类型保护就像处理错误。

如何使用类型保护

我们将展示三种修复“属性不存在”错误的方法。每个示例都使用相同的HTML，但每个示例都单独包含，因此更容易阅读。

类型的断言

// <input id="a" value="1">
// <div   id="b" value="2">

const a = document.getElementById("a") as HTMLInputElement // correct type assertion
const b = document.getElementById("b") as HTMLInputElement // incorrect type assertion
const c = document.getElementById("c") as HTMLInputElement // element doesn't exist

console.log(a.value) // 1
console.log(b.value) // undefined
console.log(c.value) // Uncaught TypeError: Cannot read property 'value' of null

内联类型保护

// <input id="a" value="1">
// <div   id="b" value="2">

const a = document.getElementById("a")
const b = document.getElementById("b")
const c = document.getElementById("c")

if (a instanceof HTMLInputElement) {
    console.log(a.value) // 1
}
if (b instanceof HTMLInputElement) {
    console.log(b.value)
}
if (c instanceof HTMLInputElement) {
    console.log(c.value)
}

B和c没有记录任何东西，因为它们不是输入元素。请注意，在“类型断言”示例中，我们没有得到任何意想不到的行为。

请注意，这是一个虚构的示例，通常您将处理类型不是您所期望的类型的情况。如果类型不匹配，我经常抛出，如下所示:

if (!(b instanceof HTMLInputElement)) {
    throw new Error("b is not an input element")
}
// b == input element (for the rest of this block)

函数类型保护

这个例子稍微高级一些，对于这个用例来说有点不必要。但是，它展示了函数类型保护和更“灵活”的类型保护。

函数类型保护是确定给定值是否为特定类型的函数。它们通过返回bool值来实现。为了让TypeScript能够理解你在创建一个类型保护，你必须使用一个类型谓词(参见下面示例中的注释)。

// <input id="a" value="1">
// <div   id="b" value="2">

const a = document.getElementById("a")
const b = document.getElementById("b")
const c = document.getElementById("c")

if (hasValueProperty(a)) {
    console.log(a.value) // 1
}
if (hasValueProperty(b)) {
    console.log(b.value)
}
if (hasValueProperty(c)) {
    console.log(c.value)
}

const d = {
    "value": "d",
}
if (hasValueProperty(d)) {
    console.log(d.value) // d
}

type WithValue = {
    value: string
}

// hasValueProperty is a type guard function the determines whether x is of type
// WithValue.
//
// "x is WithValue" is a type predicate that tells TypeScript that this is a
// type guard.
function hasValueProperty(x: unknown): x is WithValue {
    return typeof x === "object" && x !== null && typeof (x as WithValue).value === "string"
}

请注意，由于我们的类型保护只检查“value”属性的存在，它也可以用于任何其他对象(不仅仅是元素)。