Question

我正在尝试在模板对象中键入数组的 de 值。目前我已经使用这样的对象实现了我的目标：

// defining the model type
interface RouteModel {
    route: string
    params?: Record<string, string>
}

interface RoutesModel {
    [routeName: string]: RouteModel
}

// value constructor
function makeRoutes<T extends RoutesModel>(input: T) {
  return input
}

// type safe creation for routes
const routes = makeRoutes({
  potato: {
    route: '/potato/:potatoId/rate',
    params: { potatoId: '' },
  },
  grapes: {
    route: 'grapes',
  },
  banana: {
    route: 'bag/:bagId/:bananaId',
    params: { bagId: '', bananaId: '' },
  },
})

const useTypedHistory = <T extends RoutesModel>() => {
  const navigate = <K extends keyof T>(route: K, params: Record<keyof T[K]['params'], string>) => {

  }

  return { navigate }
}

const Component = () => {
  const { navigate } = useTypedHistory<typeof routes>()
  navigate('banana', { bagId: '123', bananaId: '567' })
                     ʌ --- type safety works here, it requires the right object depending on the first param

  return null
}

export default useTypedHistory

我的问题是，在开始时，我将参数声明为一个具有正确键但空字符串的对象以使其工作。

我想要一个字符串数组，所以它看起来像这样：

 // defining the model type
interface RouteModel {
    route: string
    params?: string[]
}

interface RoutesModel {
    [routeName: string]: RouteModel
}

// value constructor
function makeRoutes<T extends RoutesModel>(input: T) {
  return input
}

// type safe creation for routes
const routes = makeRoutes({
  potato: {
    route: '/potato/:potatoId/rate',
    params: ['potatoId'],
  },
  grapes: {
    route: 'grapes',
  },
  banana: {
    route: 'bag/:bagId/:bananaId',
    params: ['bagId', 'bananaId'],
  },
})

const useTypedHistory = <T extends RoutesModel>() => {
  const navigate = <K extends keyof T>(route: K, params: Record<(valueof T[K]['params']), string>) => {
                                                               ʌ --- does not work
  }

  return { navigate }
}

但这根本行不通。据我所知，valueof 可以让我推断出这些值，但我似乎无法让它发挥作用。

非常感谢任何帮助

打字稿：嵌套模板对象中的数组值

0 个答案: