禁用按钮时“@typescript-eslint/no-non-null-assertion”的用途

Question

在这段代码中，.value! 和 @typescript-eslint/no-non-null-assertion 在做什么？ documentation 太抽象了，我无法连接到此按钮行为的上下文。

const submitButton = ref<HTMLButtonElement | null>(null);

  //Disable button
  /* eslint-disable  @typescript-eslint/no-non-null-assertion */
  submitButton.value!.disabled = true;

P.S。只有编程才能板着脸说“no-non-null”

Answer 1

! 是打字稿 non-null assertion。它告诉打字稿“我知道它看起来像 value 可能是空的，但相信我，它不是”。如果你知道一些 typescript 不知道的东西（在这种情况下，你大概知道 ref 将在这段代码运行之前被填充），这会很有用，但它实际上关闭了这一行的类型检查，因此可能会意外引入错误。

由于 non-null 断言是有风险的，所以有一个 lint 规则可以用来禁止它们的使用。启用 lint 规则后，会将此行标记为问题。典型的修复方法是编写代码来检查是否为 null，这样就不需要断言了。但是如果你愿意，你可以通过像 /* eslint-disable @typescript-eslint/no-non-null-assertion */.

这样的特殊注释告诉 eslint 不要检查这一行

所以总而言之，这些行是在说“嘿打字稿，不要检查这个。嘿 eslint，不要检查这个”。

禁用按钮时“@typescript-eslint/no-non-null-assertion”的用途

Purpose of '@typescript-eslint/no-non-null-assertion' when disabling a button

javascript

html

typescript

vue.js

eslint