请问vue3+ts中如何给一个有类型注解的对象赋值null？

Question

interface TabItemType {
  author: {
    avatar_url: string;
    loginname: string;
  };
  author_id: string;
  content: string;
  create_at: string;
  good: boolean;
  id: string;
  last_reply_at: string;
  reply_count: number;
  tab: string;
  title: string;
  top: boolean;
  visit_count: number;
}

const tabItem:TabItemType|null = ref(null)

此时提示错误：类型“Ref<null, null>”缺少类型“TabItemType”的以下属性: author, author_id, content, create_at 及其他 8 项。ts-plugin(2740)

Answer 1

因为 tabItem 被初始化为 null，与 TabItemType 接口不匹配，可以用一个符合 TabItemType 结构的对象来初始化 tabItem

import { ref } from 'vue';

interface TabItemType {
  author: {
    avatar_url: string;
    loginname: string;
  };
  author_id: string;
  content: string;
  create_at: string;
  good: boolean;
  id: string;
  last_reply_at: string;
  reply_count: number;
  tab: string;
  title: string;
  top: boolean;
  visit_count: number;
}

const defaultTabItem: TabItemType = {
  author: {
    avatar_url: '',
    loginname: ''
  },
  author_id: '',
  content: '',
  create_at: '',
  good: false,
  id: '',
  last_reply_at: '',
  reply_count: 0,
  tab: '',
  title: '',
  top: false,
  visit_count: 0
};

const tabItem = ref<TabItemType | null>(defaultTabItem);