typescript - 返回渲染函数(例如 JSX)时，将 vue-devtools 与 composition-api 结合使用

Question

自从切换到 composition-api并返回 render function (在我的例子中，使用 JSX with TypeScript 构建以允许在模板中输入支持)，我失去了 vue-devtools 的能力。检查computed properties .这是因为它们不再直接由组件暴露(props 仍然可用)。

如何在我的模板中获得良好的 TypeScript 支持，同时保留 vue-devtools 检查计算属性的能力？

下面是一个使用 .vue 文件的示例，该文件带有对 vue-devtools 友好的 composition-api，但在模板中没有 TypeScript 支持:

SomeComponent.vue

<template>
  <div>
    <ul>
      <li>{{ computedProperty }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
  export default defineComponent({
    name: "SomeComponent",
    props: { 
      // ...
    },
    setup(props, ctx) {
      const computedProperty = computed(() => {
        // return ...some calc
      })
  
      return {
        computedProperty
      }
    }
  })
</script>

这是一个使用 .tsx 文件的示例，该文件在模板中具有适当的 TypeScript 支持，但 vue-devtools 无法再直接检查 computedProperty:

SomeComponent.tsx

export default defineComponent({
    name: "SomeComponent",
    props: { 
      // ...
    },
    setup(props, ctx) {
      const computedProperty = computed(() => {
        // return ...some calc
      })
  
      return () => (
        <div>
          <ul>
            <li>{ computedProperty.value }</li>
          </ul>
        </div>
      )
    }
  })

我怎样才能两全其美？

Answer 1

export default defineComponent({
    name: "SomeComponent",
    props: { 
      // ...
    },
    setup(props, ctx) {
      const computedProperty = computed(() => {
        // return ...some calc
      })

      return { computedProperty }
    },
    render() {
      return (
        <div>
          <ul>
            <li>{ this.computedProperty.value }</li>
          </ul>
        </div>
      )
    }
  })