如何正確香草JS喜歡這類高階函數

Question

我有一個高階函數，例如：

function log(fn) { 
    return (...args) => { 
    console.log("Calling", fn.name); 
    return fn(...args); 
    } 
} 

而像這樣使用：

let name; 
const setName = log((newName) => { 
    name = newName; 
}); 
setName("Hello"); // output "Calling setName" 

我怎樣才能正確地輸入這在TS中如此setName具有正確的功能簽名？含義：

setName("hello") // OK 
setName() // Error, missing arg 
setName(123) // Error, number not string 

我想出到目前爲止是：

function log<F extends Function>(fn: F): F { 
    return (...args: any[]) => { 
    console.log("Calling", fn.name); 
    return fn(...args); 
    } 
} 

let name; 
const setName = log((newName: string) => { 
    name = newName; 
}); 

其中一期工程的方式我想（我得到的參數類型上setName檢查），但我得到的編譯錯誤log函數返回：

Error: TS2322:Type '(...args: any[]) => any' is not assignable to type 'F'.

即使我使用<F extends (...args: any[]) => any>我得到同樣的錯誤。基本上，我不知道如何使返回的函數滿足通用類型F。

我該怎麼做？

Answer 1

與函數重載

Function overloads可以使用。它的定義從實現分離的方式：我喜歡超負荷的版本，因爲它有助於在模塊分佈爲預編譯的NPM包生產打字稿定義

function log<F extends Function>(fn: F): F 
function log(fn: Function) { 
    return (...args) => { 
     console.log("Calling", fn.name); 
     return fn(...args); 
    } 
} 

。

與一種類型的斷言as F

類型Function太寬。您的包裝功能必須是以下子類型：(...args: any[]) => any。

您可以使用as F爲了說打字稿有信心的恢復功能：

function log<F extends (...args: any[]) => any>(fn: F): F { 
    return ((...args: any[]) => { 
     console.log("Calling", fn.name); 
     return fn(...args); 
    }) as F 
} 

與類型斷言as any

相同的實現，但我們可以用Function和as any代替(...args: any[]) => any和as F（見路易斯的回答）。

Answer 2

最簡單的修改就可以使很給力您的返回值的類型any：

function log<F extends Function>(fn: F): F { 
    return ((...args: any[]) => { 
    console.log("Calling", fn.name); 
    return fn(...args); 
    }) as any; 
} 

此編譯文件，這樣，您的setName功能將具有相同的簽名爲你傳遞什麼到log。