Vue 3 Typescript 如何正确比较字符串以使其正常工作？

Posted 2023-02-22

【中文标题】Vue 3 Typescript 如何正确比较字符串以使其正常工作？

【英文标题】：Vue 3 Typescript How to compare string correctly so that it would work?

【发布时间】：2021-11-25 07:08:46

【问题描述】：

我正在使用 TS + Vue 做一个项目，我开始从 API 返回的数组中选择值。有必要在循环内比较 2 个字符串值，我使用 === 并且即使使用相同的值也总是得到 false。我试图对字符串进行显式强制转换，但也没有给出任何结果。

const signers: string[] = (transaction.detailedExecutionInfo as MultiSigExecutionDetails).signers;

  console.dir(signers);
  console.dir(confirmations[0].signer);
  console.log('<--->');
  signers.forEach((signer: string) => 
    const signerConfirm = confirmations.filter((confirm: MultiSigConfirmations) => 
      const address1: string = signer as string;
      const address2: string = confirm.signer as string;
      console.dir(address1);
      console.dir(address2);
      console.dir(address1 === address2);
      return signer === confirm.signer;
    );
    console.dir(signerConfirm.length);
  );

我什至直接通过比较两个具有相同值的字符串进行检查，仍然得到 False

console.log(signers[0] === confirmations[0].signer);

如何正确比较TS中的字符串原语？

我附上console的截图。

提前谢谢大家的回答）

更新：

检查的地址对象：

 console.dir(isRef(address1)); // false

address1 不是 ref 对象。

决赛：

据我了解，字符串可以只是 literal 或 objectvalue: "literal"。因此，我建议将它们 100% 带到字面上，例如这样：

interface Istr 
  value: string;

function convertStringObject(obj: string): string 
  return typeof obj === 'object' ? (obj as Istr).value : obj;

convertStringObject 正确处理strings 和object-strings，返回literal string

【参考方案1】：

我尝试对字符串进行显式强制转换，但也没有给出任何结果。

如果您指的是使用as string，则不会将数据类型更改为字符串；它向 TypeScript 断言该值已经是一个字符串。但是，事实并非如此：从您的屏幕截图看来，signer 和 confirm.signer 是具有单个属性 value 的对象；鉴于您使用 Vue，他们很可能是Refs。在 javascript 和 TypeScript 中，对象相等性将基于身份，而不是值。

如果是这样，您正在寻找比较 address1.value === address2.value，它将正确且成功地比较字符串。您还需要import Ref from 'vue' 才能获得Ref<T> 类型，这样您就可以正确地转换signer as Ref<string> 和confirm.signer as Ref<string>。

【参考方案2】：

有问题的比较是：

console.log(address1 === address2)

但是，根据console.log 的屏幕截图，这些似乎是refs。

要正确比较这些refs，请使用每个ref 的value 属性：

console.log(address1.value === address2.value)