如何使用接口在typescript中添加两个数字

Question

这里我试图使用typescript接口和箭头函数概念添加两个数字。当我运行编译的js代码时，它调用add（）方法，它显示NaN。

下面是ts代码： -     var add =（Num）=＆gt; console.log（Num.num1 + Num.num2）;

interface Num {
num1: number;
num2: number;
}

this.add(1,2);

下面是js代码： -

var add = function (Num) { return console.log(Num.num1 + Num.num2); };
this.add(1, 2);

提前致谢

Answer 1

根本原因：无类型注释

虽然其他答案解决了这个症状，但我不相信他们已经解决了代码中的潜在问题，这就是：

var add = function (Num) { return console.log(Num.num1 + Num.num2); };

此处的参数是，名为 Num，并且没有类型。我相信你的意图是：

//                   name: type
const add = function (num: Num) { return console.log(num.num1 + num.num2); };

调用添加

您的代码不在特定的上下文中，所以让我们暂停this一秒钟并查看对add函数的调用：

// ERROR: Expected 1 arguments, but got 2.
// const add: (num: Num) => void
add(1, 2);

TypeScript现在可以帮助您查看通话中的错误。在不解决根本原因的情况下解决对add的调用可以解决症状，但不会解决根本问题。

您现在可以将通话更新为：

add({ num1: 1, num2: 2 });

它会起作用 - 但所有未来的电话也会如此;因为您的add函数现在有类型信息。

演示

将以下内容放入TypeScript文件或TypeScript Playground中，以查看此操作：

interface Num {
    num1: number;
    num2: number;
}

const add = function (num: Num) { return console.log(num.num1 + num.num2); };

add(1, 2);

add({ num1: 1, num2: 2 });

添加（1,2）

如果你想要一个允许签名add(1, 2)的add方法，你需要更改签名......完全注释的函数本身可以描述为：

const add = function (a: number, b: number): number {
    return a + b
};

如果您想查看界面的外观，请参见以下内容：

interface Adder {
    (num1: number, num2: number): number;
}

const add: Adder = function (a, b) {
    return a + b;
};

超级添加

如果您希望add函数处理更多数字，可以使用rest参数......如下所示：

const add = function (...numbers: number[]) {
    if (!numbers || !numbers.length) {
        return 0;
    }    

    return numbers
        .reduce(function (acc, val) {
            return acc + val;
        });
};

console.log(add());

console.log(add(1, 2));

console.log(add(1, 2, 3, 4));

这将处理任意数量的参数。

Answer 2

您定义了一个接受Num类型参数的函数add()，但您实际上传递了两个数字，而不是Num。 所以只需将您的电话改为

即可

add({num1: 1, num2: 2});

这是一个你想要的道具的对象。 希望它有所帮助

Answer 3

this.add({ num1: 1, num2: 2 }); - 这就是重点。

在你的代码中传递两个参数（1和2），函数只需要一个（Num）。所以你必须将值作为Num对象传递。