javascript - 如何使用接口(interface)在 typescript 中添加两个数字

Question

这里我尝试使用 typescript 接口(interface)和箭头函数概念添加两个数字。当我运行编译后的 js 代码时，它正在调用 add() 方法，并且显示 NaN。

下面是 ts 代码:- var add = (Num) => 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 });

它会起作用 - 但所有 future 的调用也会起作用；因为您的 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;
};

super 添加

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

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));

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