如何使用 Typescript 指向函数

2020-06-17 08:00:00 · 飞浪

介绍在TypeScript中编写函数是描述如何做某事的一项基本任务。根据上下文，有时需要引用或指向函数。在本指南中，您将学习两种指向函数的方法：首先，通过声明一个具有类型的变量。

介绍

在 TypeScript 中编写函数是描述如何做某事的一项基本任务。根据上下文，有时需要引用或指向函数。在本指南中，您将学习两种指向函数的方法：

首先，通过声明一个具有类型的变量。
其次，通过引入一个接口来描述变量的函数类型。当您需要声明具有与函数相同签名的新变量并在特定上下文或域中使用它时，这很有用。

我们将处理一个金融交易的代码示例。

方法 1：无接口

假设printTransactionDetails()是一个接受三个参数的函数：string类型的transactionType、number类型的amount和string类型的category。根据transactionType的值，它决定交易是贷记还是借记，并为其分配Spent或Earned的值。最后，它生成一个字符串并在返回之前打印在控制台上。

      function printTransactionDetails(transactionType: string, amount: number, category: string): string {
    let creditOrDebit: string = (transactionType === "debit") ? 'Spent' : 'Earned';
    let result: string = creditOrDebit + " $" + amount + " in " + category;
    console.log(result);
    return result;
}
    

现在，假设您需要一个变量printFoodTransaction来打印食品交易的详细信息。它具有函数类型，其签名与printTransactionDetails()函数匹配。

您按如下方式声明。

      let printFoodTransaction: (transactionType: string, amount: number, category: string) => string;
    

如何将printFoodTransaction指向printTransactionDetails()函数？您可以通过将printTransactionDetails分配给printFoodTransaction
来实现。

      printFoodTransaction = printTransactionDetails;

要打印食品交易，请调用printFoodTransaction函数并传递transactionType、amount和category的值。

      printFoodTransaction("debit", 100, "Food")
    

确保您的代码看起来像这样。

      function printTransactionDetails(transactionType: string, amount: number, category: string): string {
    let creditOrDebit: string = (transactionType === "debit") ? 'Spent' : 'Earned';
    let result: string = creditOrDebit + " $" + amount + " in " + category;
    console.log(result);
    return result;
}

let printFoodTransaction: (transactionType: string, amount: number, category: string) => string;
printFoodTransaction = printTransactionDetails;
printFoodTransaction("debit", 100, "Food")
    

当您在编辑器或命令行中运行代码时，您应该看到下面的输出。

      Spent $100 in Food

如果您需要另一个变量（例如printUtilityTransaction）来打印实用程序类别的交易详细信息，则需要再次声明其类型，通过分配值将其指向printTransactionDetails函数，然后使用三个参数调用printUtilityTransaction函数。

      let printUtilityTransaction: (transactionType: string, amount: number, category: string) => string;
printUtilityTransaction = printTransactionDetails;
printUtilityTransaction("credit", 80, "Utilities");
    

这次，当您运行代码时，您应该看到下面的输出。

      Spent $100 in Food
Earned $80 in Utilities
    

这是在 TypeScript 中将变量指向函数的一种方法。这种方法没错，但是您在描述每个变量的类型时（printFoodTransaction、printUtilityTransaction）会发现存在代码重复。

第二种方法将解决这个问题并使您的代码可重用。

方法 2：使用接口

您可以使用 TypeScript 接口，而不必重复定义类型。这里，transactionPrinter是一个描述函数类型的接口。这就像声明一个带有参数列表和返回类型的函数。

每个参数都需要一个名称和其对应的类型，这有助于定义与代码的契约。

      interface transactionPrinter {
    (transactionType: string, amount: number, category: string): void;
}
    

定义接口后，printFoodTransaction和printUtilityTransaction这两个变量现在可以使用此函数类型。printFoodTransaction和printUtilityTransaction都是transactionPrinter类型。您可以在声明时为它们分配一个函数值printTransactionDetails（相同类型）。它使您的代码简洁、可重用且易于阅读。

      let printFoodTransaction: transactionPrinter = printTransactionDetails;
printFoodTransaction("debit", 100, "Food");

let printUtilityTransaction: transactionPrinter = printTransactionDetails;
printUtilityTransaction("credit", 80, "Utilities")
    

确保重构后的代码如下所示：

      function printTransactionDetails(transactionType: string, amount: number, category: string): string {
    let creditOrDebit: string = (transactionType === "debit") ? 'Spent' : 'Earned';
    let result: string = creditOrDebit + " $" + amount + " in " + category;
    console.log(result);
    return result;
}

interface transactionPrinter {
    (transactionType: string, amount: number, category: string): void;
}

let printFoodTransaction: transactionPrinter = printTransactionDetails;
printFoodTransaction("debit", 100, "Food")

let printUtilityTransaction: transactionPrinter = printTransactionDetails;
printUtilityTransaction("credit", 80, "Utilities");
    

运行此代码时您应该看到下面的输出。

      Spent $100 in Food
Earned $80 in Utilities
    

结论

在本指南中，您学习了两种在 TypeScript 中指向函数的方法。使用小型代码库或程序时，您可以选择其中任何一种方法。在复杂的应用程序中，使用接口描述函数类型使您能够使用 DRY（不要重复自己）原则编写代码。它允许您在代码中定义契约并执行类型检查，尤其是使用不支持开箱即用强类型的 JavaScript。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何使用 Typescript 指向函数

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

function printTransactionDetails(transactionType: string, amount: number, category: string): string { let creditOrDebit: string = (transactionType === "debit") ? 'Spent' : 'Earned'; let result: string = creditOrDebit + " $" + amount + " in " + category; console.log(result); return result; } let printFoodTransaction: (transactionType: string, amount: number, category: string) => string; printFoodTransaction = printTransactionDetails; printFoodTransaction("debit", 100, "Food")

let printUtilityTransaction: (transactionType: string, amount: number, category: string) => string; printUtilityTransaction = printTransactionDetails; printUtilityTransaction("credit", 80, "Utilities");

let printFoodTransaction: transactionPrinter = printTransactionDetails; printFoodTransaction("debit", 100, "Food"); let printUtilityTransaction: transactionPrinter = printTransactionDetails; printUtilityTransaction("credit", 80, "Utilities")

function printTransactionDetails(transactionType: string, amount: number, category: string): string { let creditOrDebit: string = (transactionType === "debit") ? 'Spent' : 'Earned'; let result: string = creditOrDebit + " $" + amount + " in " + category; console.log(result); return result; } interface transactionPrinter { (transactionType: string, amount: number, category: string): void; } let printFoodTransaction: transactionPrinter = printTransactionDetails; printFoodTransaction("debit", 100, "Food") let printUtilityTransaction: transactionPrinter = printTransactionDetails; printUtilityTransaction("credit", 80, "Utilities");