我有一個打字稿問題，想知道在這種情況下最好的方法
演示鏈接
// Params and Option are defined by third-party lib so it cannot be changed
interface Params {
name: string;
age: number;
}
interface Option {
callback: (params: Params | Params[]) => void
}
// Here is my code
const optionError:Option = {
// in this case, the type of params must be Params
callback:(params: Params) => { // Type '(params: Params) => void' is not assignable to type '(params: Params | Params[]) => void'.
console.log(params.name)
console.log(params.age)
}
}
const optionOK:Option = {
callback:(params) => {
const p = params as Params; // Don't want to define a same parameter, what else can I do?
console.log(p.name)
console.log(p.age)
}
}
我不想定義相同的引數，還有其他方法嗎？
uj5u.com熱心網友回復：
我不確定這就是您要尋找的東西，但這應該可以解決您的問題：
interface Params {
name: string;
age: number;
}
interface Option {
callback: (params: Params | Params[]) => void
}
const optionError:Option = {
callback:(params: Params | Params[]) => {
if (!Array.isArray(params)) {
console.log(params.name)
}
}
}
const optionOK:Option = {
callback:(params: Params | Params[]) => {
if (!Array.isArray(params)) {
console.log(params.name)
}
}
}
我們按應有的方式輸入回呼引數，然后使用 Array.isArray() 檢查引數的型別是 Params 還是 Params[]。typescript 指出，如果它不是一個陣列，它就是 Params。
params as Params此外，請盡可能避免使用，如果您不完全確定傳遞的引數將是 Params 型別，那么您將超越打字稿型別，并且可能導致運行時錯誤
uj5u.com熱心網友回復：
這是因為逆變。
有一個UNSAFE技巧，可以讓你擺脫 TypeScript 錯誤。您只需要將您的callback屬性轉換為方法（擺脫箭頭功能）。
根據 TS 檔案，TS 方法是雙變數的。
interface Params {
name: string;
age: number;
}
interface Option {
callback(params: Params | Params[]): void // change is here
}
const optionError: Option = {
callback: (params: Params) => {
console.log(params.name)
}
}
const optionOK: Option = {
callback: (params: Params[]) => {
params.map(e => e) // ok
}
}
然而，這是超級不安全的。如果您希望它安全，請使用@jeremynac's answers
uj5u.com熱心網友回復：
不確定這是否是“最佳實踐”，但如果您的意圖是符合Option您需要實作回呼以接受的型別，Params或者Params[]（或兩者）您需要明確宣告：
interface Params {
name: string;
age: number;
}
interface OptionWithParams {
callback: (params: Params) => void
}
interface OptionWithParamsArray {
callback: (params: Params[]) => void
}
type Option = OptionWithParamsArray|OptionWithParams;
那么以下所有內容都是有效的：
const optionOk1:Option = {
callback:(params: Params) => {
console.log(params.name)
}
}
const optionOk2:Option = {
callback:(params: Params[]) => {
console.log(params[0].name)
}
}
const optionOk3:Option = {
callback:(params: Params|Params[]) => {
console.log('It\'s all good');
}
}
如果您允許隱含，最后一種情況也應該有效，any但您不需要這樣做。
游樂場鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/476358.html
標籤：打字稿
上一篇：linux命令_find
下一篇：如何為反向遞回減少函式創建型別？