'string | 类型的参数号码 | 字符串[] | 将 JavaScript 转换为 TypeScript 时，undefined' 不可分配给“字符串”类型的参数

Question

我正在尝试将以下 JavaScript function 转换为 TypeScript 并且我收到以下错误

 $("#checkoutSubmit").click(function () { var departureDate = $("#bookingDepartureDateInput").val(); localStorage.setItem("datevalue", departureDate); console.log(localStorage.getItem("datevalue")) });

我从来没有使用过 TypeScript 并且我似乎在努力转换它。 我可以了解如何在 TypeScript 中重写此代码吗？ 谢谢你。

Answer 1

JQuery val(); 方法可以返回String 、 Number或Array<string>这会导致错误，因为localStorage.setItem只接受字符串。

如果您确定$("#bookingDepartureDateInput").val(); 总是返回一个字符串，你可以用它as string告诉 typescript 它可以假设它是一个字符串：

$("#checkoutSubmit").click(function () {
  const departureDate = $("#bookingDepartureDateInput").val() as string;
  localStorage.setItem("datevalue", departureDate);
  console.log(localStorage.getItem("datevalue"))
});

JQuery .val()文档。

Answer 2

jQuery val方法返回string 、 string[] 、 number或undefined 。 但是您尝试将它与存储接口的setItem方法一起使用，该方法只接受字符串。 所以你得到一个错误，因为这可能是一个错误。

如果您知道来自val的值将是一个字符串，而您可以在其上执行as string ，那么问题在于您假设您没有检查：没有任何东西会提出该声明（一种类型断言）不真实。 相反，您可以使用类型断言 function 来保证 TypeScript并确保条件正确：

function assertIsString(value: any): asserts value is string {
    if (typeof value !== "string") {
        throw new Error(`String expected, got non-string instead`);
    }
}

代码将是：

$("#checkoutSubmit").click(function () {
    const departureDate = $("#bookingDepartureDateInput").val();
    assertIsString(departureDate);
    localStorage.setItem("datevalue", departureDate);
    console.log(localStorage.getItem("datevalue"))
});

这是有效的，因为在断言 function 调用之后， TypeScript 知道它有一个string 。