我不完全確定我是否這樣稱呼它，所以我會解釋一下。
我正在使用 TypeScript 創建 React 應用程式，為了讓我的生活更簡單，我想將所有路由路徑分別存盤為常量，我還希望在 VS Code 中使用 TypeScript 自動完成功能。所以我有這個結構之王：
type GlobalRoutingT = 'user' | 'listing';
type RoutingVariants = {
list: string,
add: string,
get: string,
[key: string]: RoutingVariants | string,
};
type RouterT = Record<GlobalRoutingT, RoutingVariants>;
export const Routes: RouterT = {
user: {
list: '/user',
add: '/user/add',
get: '/user/:id',
invoices: {
list: '/user/invoices',
add: '/user/invoices/add',
get: '/user/invoices/:id',
}
},
listing: {
list: '/listing',
add: '/listing/add',
get: '/listing/:id',
},
};
它作業得很好，我現在可以這樣使用它
<Route path={Routes.user.invoices.get} exact >
<GetInvoice />
</Route>
但在 VS Code 中，我收到錯誤訊息：
型別 'string | 上不存在屬性 'get' 路由變體'。“字串”型別不存在屬性“get”。
和 Routes.user.invoices。突出顯示獲取部分。
我究竟做錯了什么？
uj5u.com熱心網友回復：
看起來您想要的并不是完全可能的： 如何將已知的介面屬性與自定義索引簽名相結合？
您不能將索引簽名與同一介面/型別上的命名鍵組合在一起。
作為一種解決方法，您可以使用“子”屬性，如下所示：
type GlobalRoutingT = 'user' | 'listing';
type RoutingVariants = {
list: string,
add: string,
get: string,
child?: Record<string, RoutingVariants>
};
type RouterT = Record<GlobalRoutingT, RoutingVariants>;
export const Routes: RouterT = {
user: {
list: '/user',
add: '/user/add',
get: '/user/:id',
child: {
invoices: {
list: '/user/invoices',
add: '/user/invoices/add',
get: '/user/invoices/:id'
}
}
},
listing: {
list: '/listing',
add: '/listing/add',
get: '/listing/:id'
}
};
const a = Routes.user.child?.invoices.get;
請注意我必須如何使用?.來訪問子項，因為它在型別定義中是可選的。
你可以child用更短的東西、單個字母$或_......
uj5u.com熱心網友回復：
你需要強制型別轉換，試試這個：
<Route path={(Routes.user.invoices as RoutingVariants).get} exact >
<GetInvoice />
</Route>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/325955.html