TypeScript [官方文件](https://www.typescriptlang.org/docs/handbook/2/functions.html#generic-functions)裡關於 Constructor signature 只有這短短的一段話：

> JavaScript functions can also be invoked with the new operator. TypeScript refers to these as constructors because they usually create a new object. You can write a construct signature by adding the new keyword in front of a call signature:

JavaScript 函式也可以使用 new 運算子呼叫。 TypeScript 將這些稱為建構函式，因為它們通常會建立一個新物件。 您可以透過在呼叫簽名前新增 new 關鍵字來編寫構造簽名：
```typescript
type SomeConstructor = {
  new (s: string): SomeObject;
};
function fn(ctor: SomeConstructor) {
  return new ctor("hello");
}
```

但這個例子還是看得我一頭霧水，自己摸索了一下，寫了一個例子：

```typescript
type Jerry = {
    score: number;
}

type SomeConstructor = {
    new(s: number): Jerry;
};

class MyConstructor implements Jerry{
    score: number;
    constructor(score: number){
        this.score = score;
    }
}

function demo(ctor: SomeConstructor, number:number) {
    return new ctor(number);
}

console.log('Ethan:' , demo(MyConstructor, 100));
console.log('Ethan:' , demo(MyConstructor, 200));
```

下面的程式碼使用 constructor signature 定義了一個新的函式型別：

![](https://img-blog.csdnimg.cn/img_convert/86e505062855e294cadc1a1747e78eb3.png)

接收的輸入是 number，輸出是自定義型別 Jerry.

如果去掉 new，就是我們已經熟悉的 call signature 語法.

class MyConstructor 實現了 Jerry 型別：

![](https://img-blog.csdnimg.cn/img_convert/ccb2bd04674905b82fec12f2add081c1.png)

MyConstructor 可以看成 SomeConstructor 的一種具體實現。這樣，凡是輸入引數需要傳入 SomeConstructor 的地方，我傳 MyConstructor 進去，一樣能夠工作。

![](https://img-blog.csdnimg.cn/img_convert/daa19ac11006451b3ba8da8c00707385.png)

demo 在這裡相當於工廠函式，我們可以看到，儘管應用程式碼裡沒有顯式使用 new 關鍵字，最後還是獲得了兩個不同的例項：

![](https://img-blog.csdnimg.cn/img_convert/23d911a7d5f77ad125a8c0ddec670b43.png)

什麼是 TypeScript 裡的 Constructor signature

相關文章