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

时间:2019-02-27 04:01:55

标签: javascript reactjs typescript

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

例如

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

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

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

enter image description here

有任何线索吗?

4 个答案:

答案 0 :(得分:2)

怎么样:

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;

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

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

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

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

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

答案 3 :(得分:-1)

尚未尝试使用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)
}