ts筆記 - 函數

參數註解和返回值註解

interface Foo {
  foo: string;
}


function getFoo(str: Foo): Foo {
  return str
}

getFoo(111)

如果沒有添加返回值註解，ts自動推斷出返回值。

可選參數和參數默認值

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

重載

根據傳入的參數不同，返回不同的結果。

ts的重載允許我們根據傳入的參數不同，擁有不同的提示類型。

interface Padding {
  top: number;
  right: number;
  bottom: number;
  left: number;
}

// 重載
function padding(all: number): Padding;
function padding(topAndBottom: number, leftAndRight: number): Padding;
function padding(top: number, right: number, bottom: number, left: number): Padding;

// 處理邏輯
function padding(a: number, b?: number, c?: number, d?: number): Padding {
  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
  };
}

const p = padding(1, 2, 3,4)

可調用類型註釋

interface ReturnString {
    (): string;
}

declare const foo: ReturnString;

// 推斷bar是一個string
const bar = foo();

簽名重載

接口通過提供多種調用簽名，用以特殊的函數重載

interface Overloaded {
  (foo: string): string;
  (foo: number): number;
}

// 實現接口的一個例子：
function stringOrNumber(foo: number): number;
function stringOrNumber(foo: string): string;
function stringOrNumber(foo: any): any {
  if (typeof foo === 'number') {
    return foo * foo;
  } else if (typeof foo === 'string') {
    return `hello ${foo}`;
  }
}

const overloaded: Overloaded = stringOrNumber;

// 使用
const str = overloaded(''); // str 被推斷爲 'string'
const num = overloaded(123); // num 被推斷爲 'number'

箭頭函數

對於簡單的函數類型簽名，我們可以使用箭頭函數類型註解。

示例：函數接收一個number，返回一個string

const simple:(foo:number) => string = (foo) => foo.toString();

// a推斷爲string
const a = simple(111)

simple:(foo:number) => string類型描述，(foo) => foo.toString()主題函數

可實例化

可實例化是可調用的一種特殊情況，它使用 new 作爲前綴。它意味着你需要使用 new 關鍵字去調用它.

interface CallMeWithNewToGetString {
  new (): string;
}

// 使用
declare const Foo: CallMeWithNewToGetString;
const bar = new Foo(); // bar 被推斷爲 string 類型