共计 1143 个字符,预计需要花费 3 分钟才能阅读完成。
在应用 react-router-dom
的时候,用到了 useMatches
的办法,ts 始终提醒报错,如下:
依据提醒,找到了这个类型:
export interface UIMatch<Data = unknown, Handle = unknown> { | |
id: string; | |
pathname: string; | |
params: AgnosticRouteMatch["params"]; | |
data: Data; | |
handle: Handle; | |
} | |
import type {UIMatch} from "react-router-dom" |
这才对泛型有了一丢丢了解。
应用时的场景:
const location = useLocation() | |
let matches = useMatches(); | |
useEffect(() => {let match = matches.find((item: any) => item.pathname == location.pathname) | |
if(match) {let arr = match?.handle?.breadcrumb.map((item: string) => { | |
return {title: item} | |
}) | |
} | |
}, [location.pathname]) |
breadcrumb
始终提醒报错
发现 matches
的数据类型为 UIMatch<unknown, unknown>
所以报错
依据 UIMatch
的类型提醒,咱们发现 Data
和Handle
的类型为 unknown
,所以这时候须要应用any
进行强制类型转换, 代码如下:
let matches = useMatches() as any;
“
或者将 matches
的类型申明:let matches:UIMatch<any, any>[] = useMatches()
留神的是:unknown
只能承受 any
或者 unknown
类型。
接下来展现两个示例:
- 示例一
interface IParams<D = number, M = string> { | |
data: D, | |
m: M | |
} | |
function getPrams(path: IParams<number,string>):IParams<number, string> {console.log(path) | |
return { | |
data: 2, | |
m: '3' | |
} | |
} | |
const params = getPrams({ | |
data: 4, | |
m: '6' | |
}) |
- 示例二
function test <T> (arg:T):T{console.log(arg); | |
return arg; | |
} | |
test<number>(111);// 返回值是 number 类型的 111 | |
test<string | boolean>('hahaha')// 返回值是 string 类型的 hahaha | |
test<string | boolean>(true);// 返回值是布尔类型的 true |
参考文章
正文完