如何为这样的函数定义类型？

Question

我正在将一些代码移至 TS，并且一直在努力为一组路由函数定义一个类型。这就是他们的样子：

const root: Route = () => 'root'
root.child = () => `${root()}/child`
root.child.grandchild = () => `${root.child()}/grandchild`

我尝试在嵌套属性的索引签名旁边定义某种递归可调用类型或接口，但没有多大成功：

type Route = {
  (): string
  [key: string]: Route
}

关于我如何做到这一点的任何想法或想法？

游乐场：http://www.typescriptlang.org/play/index.html?ssl=1&ssc=1&pln=10&pc=1#code/C4TwDgpgBASg9gV2NAvFA3gKCjqAKASgC4oBnYAJwEsA7Ac21wG0BrCEE86+gXRPiQRMAX0yYAxnBrkoFOHGD9EyKGkKqAfFADkchdsx7gAOnEALKgBsAJqvwFNUAAYASdEcLCA9OavWnhvImvjbGdBQAhjTWIbZqDiharu5BphY2nl7hUTHp-mJAA

Answer 1

根据您要执行的操作，有多种选择。

如果您使用常规的function 定义，您可以在声明函数的范围内向函数添加额外的属性，TS 会将这些属性识别为函数上的属性：

function root() { return 'root' }
function child() { return `${root()}/child` }
child.grandchild = () => `${root.child()}/grandchild`
root.child = child;



root.child.grandchild() //ok

Play

另一种选择是使用Object.assign 一次性创建具有属性的函数：

const root = Object.assign(() => 'root', {
    child: Object.assign(() => `${root()}/child`, {
        grandchild: () => `${root.child()}/grandchild`
    })
});

root.child.grandchild()

Play

这些选项都没有实际使用您的Router 接口，该接口允许以后添加任何字符串属性。为此，我认为最简单的选择是创建一个辅助函数，该函数将在内部使用Object.assign，但也将使用所需的类型：

type Route = {
    (): string
    [key: string]: Route
}

function createRoute(fn: () => string, other: Record<string, Route> = {}) {
    return Object.assign(fn, other);
}

const root: Route = createRoute(() => 'root', {
    child: createRoute(() => `${root()}/child`, {
        grandchild: createRoute(() => `${root.child()}/grandchild`)
    })
})

Play