时间戳

首页 > 解决方案 > 如何使用接口在打字稿中添加两个数字

javascript - 如何使用接口在打字稿中添加两个数字

问题描述

在这里，我尝试使用打字稿接口和箭头函数概念添加两个数字。当我运行编译的 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);

提前致谢

标签： javascripttypescriptinterfacefrontendtypescript2.0

解决方案

根本原因：没有类型注释

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

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)您需要更改签名......完全注释的函数本身可以描述为：

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函数处理更多的数字，你可以使用一个休息参数......像这样：

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

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

推荐阅读