TypeScript 接口中的粗箭頭 function 和普通 function 類型聲明之間的區別

Question

以兩種不同的方式聲明兩個接口，如下所示。 這兩者有區別嗎？

interface IFoo {
  onClick: (id: string) => void
}

interface IBar {
  onClick(id: string): void
}

Answer 1

與啟用的嚴格 function 類型的類型兼容性存在差異。 Function類型參數位置以逆變方式（對於“函數道具”）而不是雙變量方式（對於方法）進行檢查

interface IFooArrow {
  onClick: (id: string) => void
}

interface IBarArrow {
  onClick: (id: 'bar') => void
}

declare let fooA: IFooArrow;
declare let barA: IBarArrow;

fooA = barA; // error: Type 'string' is not assignable to type '"bar"'

interface IFooMethod {
  onClick(id: string): void
}

interface IBarMethod {
  onClick(id: 'bar'): void
}

declare let fooM: IFooMethod;
declare let barM: IBarMethod;

fooM = barM; // no error

更嚴格的檢查適用於所有 function 類型，但源自方法或構造函數聲明的類型除外。 專門排除方法以確保泛型類和接口（例如Array<T> ）繼續大部分協變相關。

操場