TypeScript学习(函数)

函数

函数类型在 TypeScript 类型系统中扮演着非常重要的角色,它们是可组合系统的核心构建块。

参数注解

你可以注解函数参数,就像你可以注解其他变量一样

// variable annotation
let sampleVariable: {
    
     bar: number };

// function parameter annotation
function foo(sampleParameter: {
    
     bar: number }) {
    
    }

这里我们使用了内联类型注解,除此之外,你还可以使用接口等其他方式。

返回类型注解

你可以在函数参数列表之后使用与变量相同的样式来注解返回类型,如例子中 :Foo:

interface Foo {
    
    
  foo: string;
}

// Return type annotated as `: Foo`
function foo(sample: Foo): Foo {
    
    
  return sample;
}

我们在这里使用了一个 interface,但你可以自由地使用其他注解方式,例如内联注解。

通常,你不需要注解函数的返回类型,因为它可以由编译器推断:

interface Foo {
    
    
  foo: string;
}

function foo(sample: Foo) {
    
    
  return sample; // inferred return type 'Foo'
}

但是,添加这些注解以帮助解决错误提示通常是一个好主意,例如:

function foo() {
    
    
  return {
    
     fou: 'John Doe' }; // You might not find this misspelling of `foo` till it's too late
}

sendAsJSON(foo());

如果你不打算从函数返回任何内容,则可以将其标注为:void 。你通常可以删除 void, TypeScript 能推导出来

可选参数

你可以将参数标记为可选:

function foo(bar: number, bas?: string): void {
    
    
  // ..
}

foo(123);
foo(123, 'hello');

或者,当调用者没有提供该参数时,你可以提供一个默认值(在参数声明后使用 = someValue ):

function foo(bar: number, bas: string = 'hello') {
    
    
  console.log(bar, bas);
}

foo(123); // 123, hello
foo(123, 'world'); // 123, world

重载

  • overload可直译为重载,它是指我们可以定义一些名称相同的方法,通过定义不同的输入参数来区分这些方法,然后再调用时,VM就会根据不同的参数样式,来选择合适的方法执行。

TypeScript 允许你声明函数重载。这对于文档 + 类型安全来说很实用。请思考以下代码:

function padding(a: number, b?: number, c?: number, d?: any) {
    
    
  if (b === undefined && c === undefined && d === undefined) {
    
    
    b = c = d = a;
  } else if (c === undefined && d === undefined) {
    
    
    c = a;
    d = b;
  }
  return {
    
    
    top: a,
    right: b,
    bottom: c,
    left: d
  };
}

如果仔细查看代码,就会发现 a,b,c,d 的值会根据传入的参数数量而变化。此函数也只需要 1 个,2 个或 4 个参数。可以使用函数重载来强制和记录这些约束。你只需多次声明函数头。最后一个函数头是在函数体内实际处于活动状态但不可用于外部。

// 重载
function padding(all: number);
function padding(topAndBottom: number, leftAndRight: number);
function padding(top: number, right: number, bottom: number, left: number);
// Actual implementation that is a true representation of all the cases the function body needs to handle
function padding(a: number, b?: number, c?: number, d?: number) {
    
    
  if (b === undefined && c === undefined && d === undefined) {
    
    
    b = c = d = a;
  } else if (c === undefined && d === undefined) {
    
    
    c = a;
    d = b;
  }
  return {
    
    
    top: a,
    right: b,
    bottom: c,
    left: d
  };
}

这里前三个函数头可有效调用 padding:

padding(1); // Okay: all
padding(1, 1); // Okay: topAndBottom, leftAndRight
padding(1, 1, 1, 1); // Okay: top, right, bottom, left

padding(1, 1, 1); // Error: Not a part of the available overloads

当然,最终声明(从函数内部看到的真正声明)与所有重载兼容是很重要的。这是因为这是函数体需要考虑的函数调用的真实性质。

TIP
TypeScript 中的函数重载没有任何运行时开销。它只允许你记录希望调用函数的方式,并且编译器会检查其余代码。

函数声明

在没有提供函数实现的情况下,有两种声明函数类型的方式:

type LongHand = {
    
    
  (a: number): number;
};

type ShortHand = (a: number) => number;

上面代码中的两个例子完全相同。但是,当你想使用函数重载时,只能用第一种方式:

type LongHandAllowsOverloadDeclarations = {
    
    
  (a: number): number;
  (a: string): string;
};

猜你喜欢

转载自blog.csdn.net/shadowfall/article/details/121023063