首先,我们使用function+ts定义函数时,如下:
// 根据某个字段给数组排序
function sortArray<T> (arr: T[], field: keyof T): T[] {
return arr.sort((a, b) => {
if (a[field] > b[field]) {
return -1
}
if (a[field] < b[field]) {
return 1
}
return 0
})
}
此种写法编译正常。
将其改为箭头函数时,代码如下:
const sortArray = <T>(arr: T[], field: keyof T): T[] => {
return arr.sort((a, b) => {
if (a[field] > b[field]) {
return -1
}
if (a[field] < b[field]) {
return 1
}
return 0
})
}
使用此种写法时,在编译过程中,会报如下错误:
“error Parsing error: Unexpected token. Did you mean `{'>'}` or `>`?”
出现上述错误的原因:
在某些情况下,使用尖括号(<>)表示泛型会被解析为 JSX 标签。
解决方法有如下几种(推荐第一种):
第一种:在<>中的泛型后边加上一个“(,),这样在解析时,就不会被解析成jsx标签了,代码如下:
const sortArray = <T, >(arr: T[], field: keyof T): T[] => {
return T[]
}
第二种:使用extends关键字改写,代码如下:
const sortTable = <T extends {}>(arr: T[], field: keyof T): T[] => {
return T[]
}
第三种:改写类型定义方式,代码如下:
扫描二维码关注公众号,回复:
16633160 查看本文章
const sortTable:<T>(arr: T[], field: keyof T) => T[] = (arr, field) => {
return T[]
}
结语:针对 ts 定义类型时,经常会遇到一些自己不知道的问题,通过查阅资料结合自己的开发经验,最终完美的解决。
以上内容,是作者原创,如有错误,欢迎在评论区指出,非常感谢!转载请附带链接。
内容如有雷同,纯属巧合。