renderless代码的ts类型标注讨论

[qinwencheng]

背景：最近在尝试解决 issue #225 中的渲染问题时，问题定位到 slider 组件的 renderless 部分代码中，但我发现vue.ts 和 index.ts 代码里面的函数和变量都是 any 类型，对上下文的理解添加了一定的困难。

讨论内容：在尝试对里面的代码进行标注的时候，遇到了一个困难，所以想讨论一下是否有什么好的解决手段。具体内容如下截图：

具体代码在

tiny-vue/packages/renderless/src/slider/vue.ts

Line 101 in bad8c0d

export const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, watch, inject }, { parent, constants, nextTick, emit, mode }) => {

可以看到，这里传入的 vue api 都是any类型，所以即使对当前文件里的变量和状态都标记上类型后，也会因为使用 any 类型的函数包裹而导致整个变量都是any类型，如：

如上描述，我想知道是否有什么办法可以把这些vue函数进行类型标注呢？

[qinwencheng]

@kagol 请kagol给点建议

[kagol]

@kagol 请kagol给点建议

TS类型确实还需要完善。

[kagol]

@qinwencheng 关于 renderless 函数类型标记，我的思路是这样的：

给 vue.ts 文件中的 renderless 函数补充类型

每个组件有一个 vue.ts 文件，里面一般是一个 renderless 函数，我们需要先对这个函数的所有参数、返回值以及函数体里面的 state / api 等进行类型声明。

以 pacakges/renderless/src/slider/vue.ts 为例子。

它的代码大致如下（只保留最核心的部分代码）：

export const renderless = (
  // 先给 renderless 函数的所有参数加上类型，这里有三个参数，分别补充对应的类型
  props: ISliderProps,
  { computed, onBeforeUnmount, onMounted, reactive, watch, inject }: ISharedRenderlessParamHooks,
  { parent, constants, nextTick, emit, mode }: ISliderRenderlessParamUtils
): ISliderApi => { // 给 renderless 函数的返回值添加类型

  // 给 api 添加类型
  const api: ISliderApi = {}

  // 给 state 添加类型
  const state: ISliderState = initState({ reactive, computed, props, api, parent })

  Object.assign(api, {
    state,
    hideTip: hideTip(state),
    ...
  })

  ...

  return api
}

第一个参数是组件的 props，可以通过以下方式获取：

import type { ExtractPropTypes } from 'vue'

type ISliderProps = ExtractPropTypes<typeof sliderProps>

第二个参数是 vue 中抛出来的内容

interface ISharedRenderlessParamHooks {
  computed: Function // 具体类型需要再细化
  onBeforeUnmount: Function
  ...
}

第三个参数是一些工具函数，具体有哪些工具函数，可以参考文件 packages/vue-common/src/index.ts 中的 setup 函数中的 utils 变量。

interface ISharedRenderlessParamUtils {
  constants: object // 具体类型还需要细化
  emit: SetupContext['emit']
  vm: ComponentPublicInstance
  ...
}

需要注意的是每个组件的 constants 可能不一样，所以需要单独定义 constants

type ISliderRenderlessParamUtils = ISharedRenderlessParamUtils & {
  constants: ISliderConstants
}

renderless 函数的返回值是 api，所以我们需要定义 api 的类型

interface ISliderApi {
    state: ISliderState
    hideTip: () => boolean
    ...
  }

接着是函数体里面的 state / api(和renderless函数返回值类型一样) 的类型

interface ISliderState {
    tipStyle: object
    barStyle: object
    moveStyle: object // 具体类型还需要细化
    isInit: boolean
    isDrag: boolean
    sliderSize: number
    ...
}

给 index.ts 中的每个函数补充类型

index.ts 中的函数分成内外两个部分：

• 外层函数参数
• 内层函数参数
• 返回值

外层函数参数这部分是固定的，可以写一个 ISharedRenderlessFunctionParams 类型，这是多个类型的集合

type ISharedRenderlessFunctionParams = {
  api: object
  props: object
  state: object
} & ISharedRenderlessParamHooks & ISharedRenderlessParamUtils

里层的就是一个普通的函数，定义好函数参数和返回值类型即可。

[GaoNeng-wWw]

我的建议是不要让开发者自己写类型

ISliderApi 可以直接使用TS中的ReturnType工具类型，这样问题就简化成了如何推理renderless的类型

实际上，函数的返回值是可以由ts自行推断，但return的变量需要有明确的类型，否则就是any。renderless大部分返回的都是api变量，api变量大多使用了Object.assign。Object.assign函数的签名如下

 Object.assign<T,U>(target:T, source:U): T & U

如签名所示，Object.assign 是具备返回返回的，这意味着大部分代码需要做如下更改

const renderless = (props, context, utils) => {
    let api = {};
    api = Object.assign(api, {foo: 'bar'}) // 此时api的签名回是 {} & {foo: 'bar'} -> {foo: 'bar'}
   return api
}
type RenderlessReturn = ReturnType<typeof renderless> // {foo: 'bar'}

这样就不需要开发者自己写类型，compiler也可以自己获取到了

[kagol]

@GaoNeng-wWw Your suggestion is very good.👍

But I found a problem:

The type alias "RenderlessReturn" loops refers to itself.

[GaoNeng-wWw]

My bad

I thought the requirement was to give the vue component the renderless return value type 😢