引數註解和返回值註解

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 型別