TypeScript+React中sort方法参数类型疑问及排序代码报错排查

报错核心原因 #

1. sort回调参数解构错误：Array.sort的回调接收两个独立的数组元素参数，而非包含a、b属性的对象。你错误地使用了({ a, b }: sortProps)解构方式，导致参数类型不匹配。
2. switch分支不完整：缺少default分支的返回值，违反了sort回调必须返回number的要求。
3. id类型运算错误：Note接口中id定义为string | any，字符串无法直接做减法运算id - id2。
4. sort变量可能为null：search.get('sort')返回值是string | null，当前代码未处理sort为null的场景。

修正后的代码 #

const [search] = useSearchParams()
const sort = search.get('sort')

export interface Note {
    id?: string | number // 建议明确类型，避免使用any
    author: string
    title: string
    category: string
    description: string
    favourite: boolean
    date: string
    descLength: number
}

const sortedNotes = (notes: Note[]) => {
    // 直接接收两个Note类型的参数，无需额外定义sortProps
    return notes.slice().sort((a: Note, b: Note) => {
        switch (sort) {
            case 'favourite':
                // 处理布尔值相等的情况，返回0保持原顺序
                return b.favourite ? 1 : a.favourite ? -1 : 0
            case 'longest':
                // 数字类型直接相减，简洁且符合sort返回要求
                return b.descLength - a.descLength
            case 'none':
            default:
                // 根据id的实际类型处理排序
                if (typeof a.id === 'number' && typeof b.id === 'number') {
                    return a.id - b.id
                }
                // 字符串类型使用localeCompare做比较
                return String(a.id).localeCompare(String(b.id))
        }
    })
}

const sortingNotes = sortedNotes(notes)
const currentNotes = sortingNotes.slice(indexOfFirstNote, indexOfLastNote)

TypeScript中Array.sort方法的参数类型要求 #

• 回调函数类型：(a: T, b: T) => number，其中T是数组元素的类型（此处为Note）。
• 返回值规则：
  • 返回正数：将a排在b之后
  • 返回负数：将a排在b之前
  • 返回0：保持a和b的相对顺序不变
• 注意：sort方法会原地修改原数组，如需保留原数组，需先调用slice()创建副本再执行排序。

内容的提问来源于stack exchange，提问作者Mateusz Michalik