类型“IData”上不存在属性“替换”。缺什么？答案

【问题标题】：Property 'replace' does not exist on type 'IData'. What is missing?类型“IData”上不存在属性“替换”。缺什么？
【发布时间】：2021-08-04 19:04:12
【问题描述】：

我正在尝试创建一个转换函数，其中接收带有数字的字符串作为输入，但是当使用正则表达式函数“replace()”时它无法识别它。

有人知道我如何在 IData 类型中声明“replace()”吗？

interface IData{
    data:string | {
        replace: (()=>number),
    };
}

class Cast{

    castString(data:IData){
        return data.toString();
    }

    castNumber(data:IData){
        return data.replace(/\D+/g, '');
    }

}

export default new Cast;

【问题讨论】：

您能详细说明一下吗？您的输入和预期输出是什么？
如果您在输入中使用字符串类型，那么已经有一个字符串类型的内置替换功能。为什么需要创建一个自定义的？
castNumber 上的输入将是“34bbb5”，结果应该是 345。“数据”是字符串类型，但是当使用正则表达式“替换”时，它会抛出属性“替换”不存在在类型 'IData'.ts(2339)
通过声明字符串而不创建接口解决，但我还是很好奇如何在接口的属性中声明属性
在castNumber() 中，data 参数的类型为IData。该类型没有replace 成员；它只知道有一个data 成员。所以你需要data.data.replace() 才能在这里找到解决方案。但由于data.data 是string 或其他具有replace 方法且不需要参数并返回number 的类型，因此您需要在调用它之前进行进一步测试。我很困惑。请考虑修改代码以构成适合放入独立 IDE 的minimal reproducible example，例如The TypeScript Playground (link)。

标签： javascript reactjs regex typescript replace

【解决方案1】：

基于到目前为止的 cmets，我认为有必要简要解释一下 JS 中的类型（也可以转换为 TS）。

JavaScript 中的原始类型（例如 string、number 和 boolean）不是具有函数的对象，而只是值。您可以调用它们的函数（如replace 用于string）实际上来自所谓的Boxed types。它们是基元的对象对应物。它们可用于显式转换 (Number("123")) 或将原语包装在对象中 (newNumber(123))。

应该避免后者，因为这个 id 在需要时由 JS 自动完成。就像你的情况一样："34bbb5".replace(...) 在幕后更改为 new String("34bbb5").replace(...)

这些信息有什么帮助？

考虑到这一点，您的目标似乎是定义一个具有不同替换函数定义的字符串类型。新定义旨在改变Sting.replace 函数的行为。问题是，它只是一个定义。所以，它不会影响实际的String.replace 功能。

你有什么选择

TypeScript 接口只是在编译时存在的定义。因此，通过重载replace 函数定义，您不会获得任何代码更改。因此，以下接口定义应该适合您的情况。

interface IData {
  data:string
}

您的Cast 类似乎有任务将IData 转换为字符串或数字。第一个相当简单，因为它意味着简单地返回 data 属性的值。

您使用了填充IData 接口的对象的toString() 方法。这实际上调用了Object.toString() 函数，结果为"[object Object]"。

第二个转换方法应该返回一个数字。在这里，您已经提供了大部分代码，但是您错过了在 data 属性上调用它（正如 @jcalz 所指出的那样）。因此，您应该在 data 属性上调用它，并将其实际转换为一个数字。您可以为此使用+ 或Number() 或parseInt()。由于您只剩下字符串中的数字，因此行为没有区别。

结果如下：

interface IData{
    data:string;
}

class Cast{
    castString(data:IData){
        return data.data.toString();
    }
    castNumber(data:IData){
        return Number(data.data.replace(/\D+/g, ''));
    }
}

export default new Cast;

提示

如果你愿意，你也可以使用object destructuring

castString({data}: IData){
  return data.toString();
}

【讨论】：