在Typescript中将函数参数定义为对象

Question

我更喜欢将它们作为对象传递，以使顺序不重要，而不是调用分别传递参数的函数。

例如

Private Const ltBlue As Long = 16777011    
txtbox1.backcolor = ltBlue

现在，我将已有的一些代码迁移到Typescript，但不确定如何定义此类函数的接口。

我已经尝试过类似的方法，但是它不起作用：

有任何线索吗？

Answer 1

怎么样：

interface InputObj {
    arg1: number;
    arg2: number;
    arg3: number;
}

interface ExampleProps {
    sum: (input: InputObj) => number
}

或内联：

interface ExampleProps {
  sum: (
    input: {
      arg1: number;
      arg2: number;
      arg3: number;
    }
  ) => number;
}

但是根据您的用例，您可能不需要定义ExampleProps。这是您的sum函数，没有任意的input对象名称：

const sum = ({
  arg1,
  arg2,
  arg3
}: {
  arg1: number;
  arg2: number;
  arg3: number;
}) => arg1 + arg2 + arg3;

Answer 2

下面是一个完整注释的函数表达式示例：

const sum: ({ 
  arg1, 
  arg2,
  arg3 
}: {
  arg1: number;
  arg2: number;
  arg3: number;
}) => number = ({ arg1, arg2, arg3 }) => arg1 + arg2 + arg3;

这是箭头功能的另一个更好的替代方法。仅带参数的注释，编译器可以正确推断返回类型。函数的混乱程度更低，并且像以前一样工作。

const sum = ({ 
  arg1,
  arg2,
  arg3
}: {
  arg1: number;
  arg2: number;
  arg3: number;
}) => arg1 + arg2 + arg3;

如果要在单独的文件中注释功能，则：

interface Args {
  arg1: number;
  arg2: number;
  arg3: number;
}

type Sum = (input: Args) => number;

const sum: Sum = ({ arg1, arg2, arg3 }) => arg1 + arg2 + arg3;

如果参数类型未知，则可以使用any作为参数类型。返回类型将被推断为：

const sum = ({ 
  arg1,
  arg2,
  arg3
}: any) => arg1 + arg2 + arg3;

因此，这等效于上一个示例：

const sum: ({ arg1, arg2, arg3 }: any) => any

这对于箭头功能可能没有多大意义，但是您可以为已知参数设置类型，并使用键值对来标注附加的argumens：

const sum = ({ 
  arg1,
  arg2,
  arg3
}: {
  arg1: number;
  arg2: number;
  arg3: number;
  [key: string]: number;
}) => arg1 + arg2 + arg3;

您也可以使用泛型：

interface Args {
  arg1: number;
  arg2: number;
  arg3: number;
}

const sum = <T extends Args>({ 
  arg1,
  arg2,
  arg3
}: T) => arg1 + arg2 + arg3;

以下是相同的示例，总和为函数语句。

function sum({
  arg1,
  arg2,
  arg3
}: {
  arg1: number;
  arg2: number;
  arg3: number;
}): number {
  return arg1 + arg2 + arg3;
}

如果您的函数体内有复杂的实现细节，则函数语句可能更适合其人体工程学。加上泛型在函数语句上显得不太笨拙。

Answer 3

如果需要显式注释函数类型，可以使用：

type Foo = (object: { arg1: number, arg2: number; arg3: number }) => number;

const bar: Foo = ({arg1, arg2, arg3}) =>  arg1 + arg2 + arg3 

要尝试使用类型注释并分享结果，我建议TypeScript Playground <=在上面检查：）

Answer 4

尚未尝试使用TypeScript。在JavaScript中，还应考虑为对象的属性包括默认值，以避免出现错误

Uncaught TypeError: Cannot destructure property `arg1` of 'undefined' or 'null'.

对于

sum()

const sum = ({ arg1, arg2, arg3 }) => 
  arg1 + arg2 + arg3;

try {
  console.log(sum())
} catch (e) {
  console.error(e)
}

可以通过将每个值设置为0来避免，其中期望的参数和返回值是JavaScript整数

const sum = ({ arg1 = 0, arg2 = 0, arg3 = 0 } = {}) => 
  arg1 + arg2 + arg3;

try {
  console.log(sum()) // 0
} catch (e) {
  console.error(e)
}