我有一個從這個自定義鉤子（來自React DnD ）收集的專案物件。問題是 typescript 不允許我在下面的 drop 函式中訪問它的屬性，因為它的型別是未知的。
function MyComponent(props){
const [{item}, drop] = useDrop({
accept: "BLOCK",
collect: monitor => ({
item: monitor.getItem() // Item object collected here IDropTargetMonitor
}),
drop: (): void => setBlock_name(item.block_name) // /!\ Object [item] is of type 'unknown'
})
return ...
}
模塊中對應的介面如下：
export interface DropTargetMonitor<DragObject = unknown, DropResult = unknown>
我在這里定義了我想要的 item 物件：
const OtherComponent = (props) => {
const [{isDragging}, drag] = useDrag({
type: "BLOCK",
item: {blockName: props.blockName}, // blockName is a string
collect: monitor => ({
isDragging: monitor.isDragging()
})
})
return ...
}
如果有人能給我一個關于如何推斷專案型別的提示，我將不勝感激。
uj5u.com熱心網友回復：
有些東西可以從您的代碼中進行調整。useDrop是一個接受拖動項的型別的泛型。它定義為：
useDrop<DragObject = unknown, DropResult = unknown, CollectedProps = unknown>
您可以為您的專案創建一個界面：
interface Item {
blockName: string;
}
然后重構你的useDrop鉤子，如：
const [{item}, drop] = useDrop<Item, unknown, {item: Item}>({
accept: "BLOCK",
collect: monitor => ({
item: monitor.getItem()
}),
drop: (item: Item): void => setBlock_name(item.blockName)
})
這樣 Typescript 就會知道那item是 type Item。需要注意的幾件事是，在您的代碼中，您擁有setBlock_name(item.block_name)但應該是setBlock_name(item.blockName)因為useDrag您使用item: {blockName: props.blockName}了屬性名稱blockName而不是block_name. 另一件事是，如果您要在drop方法中使用洗掉的專案，useDrop則應該使用作為第一個引數傳遞的drop: (item) => void專案，您不需要在collect函式中捕獲專案。希望這對您有所幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/515578.html
標籤：打字稿反应打字稿
上一篇：如何手動撰寫打字稿宣告檔案？