vue ref 属性无法正确推断类型

Question

想向可组合方法添加一个额外的属性，但它抛出错误property 'isActive' does not exist on type '{ id: string; text: string; }'

这是代码

import { ref, type Ref } from 'vue';

type ActiveItemType = {
  text: string;
  isActive?: boolean;
};

export const useActiveItems = <T extends ActiveItemType>(data: T[]) => {
  let active = '';

  function activeMapper(d: T) {
    return {
      ...d,
      isActive: d.text === active,
    };
  }
  const itemsData = data.map(activeMapper);

  const items = ref(itemsData) as Ref<T[]>;

  function onSetActive(text: string) {
    active = text;
    items.value = items.value.map(activeMapper);
  }

  // initial set first one
  if (items.value[0]) {
    items.value[0].isActive = true;
  }

  return {
    items,
    onSetActive,
  };
};

const { items } = useActiveItems([
  {
    id: '1',
    text: 't1'
  },
  {
    id: '2',
    text: 't2'
  },
]);

if (items.value[0]) {
  items.value[0].isActive; // ERROR
}

ts-playground-link

使用 hit n trial 我发现，如果我像这样在我的方法中创建一个类型，它会起作用，但我不确定它是否是正确的方法？或者我们应该只在方法头中创建类型，即在 <> 中？

type U = T & ActiveItemType;
const items = ref(itemsData) as Ref<U[]>;

Answer 1

基于此issue comment：

当使用泛型 ref 或 reactive 时，如果您确定该类型没有任何嵌套引用，则需要强制转换为 as Ref<T> 和 as reactive<T>，因为 ref 和 reactive 会自动解开嵌套引用

   import {ref, Ref} from 'vue';
  // ... 
   const items = ref(itemsData) as Ref<T[]>;