新 Expo-Router v2 上带有对象参数的类型化路由

Question

我正在将我的应用程序从react-navigation移动到expo-router，但我还没有找到键入路线的解决方案。

我知道有一个功能可以根据文件路由和动态路由（如 [slug].tsx）自动输入路由。

但是，如果我的参数是像 { id,description,name,age} 这样的对象，那么这些类型将如何工作？我的文件的名称应该是什么？

请帮忙！:)

我希望从 <Link> 中输入参数和路由名称的 Push 或 href

router.push({
    pathname: 'home',
    params: {
      id: 1,
      description: '',
      age: 1,
      name: ''
    }
  })

也可以在 useLocalSearchParams() 处正确接收它

const Home = () => {
    const { id, description, age, name } = useLocalSearchParams();

    return <></>
}

Answer 1

我正在使用这样的东西，并不是特别自豪，但它确实有效。未经充分测试，可能需要根据您的用例进行一些修复和调整：

function useSearchParamsTyped<
  T extends Record<string, 'string' | 'number' | 'string[]' | 'number[]'>,
>(
  params: T,
): {
  [K in keyof T]: T[K] extends 'string'
    ? string
    : T[K] extends 'number'
    ? number
    : T[K] extends 'string[]'
    ? string[]
    : T[K] extends 'number[]'
    ? number[]
    : never
} {
  const searchParams = useSearchParams()
  const result = {} as any
  for (const key in params) {
    if (params[key] === `string`) {
      if (typeof searchParams[key] !== `string`)
        throw new Error(`Invalid type for '${key}': '${params[key]}'`)
      result[key] = searchParams[key]?.toString()
    } else if (params[key] === `number`) {
      if (Number.isNaN(Number(searchParams[key])))
        throw new Error(`Invalid type for '${key}': '${params[key]}'`)
      result[key] = Number(searchParams[key])
    } else if (params[key] === `string[]`) {
      if (!Array.isArray(searchParams[key]))
        throw new Error(`Invalid type for '${key}': '${params[key]}'`)
      result[key] = searchParams[key]
    } else if (params[key] === `number[]`) {
      if (!Array.isArray(searchParams[key]))
        throw new Error(`Invalid type for '${key}': '${params[key]}'`)
      result[key] = (searchParams[key] as Array<string>).map(Number)
    } else {
      throw new Error(`Invalid type ${params[key]}`)
    }
  }
  return result
}