Vue3中关于使用interface的问题

Question

问题描述

依照vue3官网教程上说法，使用interface作类型推断时，可以这样：

  interface Post{
    content:string,
  //...
  }

  //defineComponent内
  props: {
    post:Object as PropType<Post>,
    //...
  },

但是这样之后this.post.content会被推断为string | undefined导致不少的开发不便

除了断言外还有其他解决方法吗？

Answer 1

应该不是把 this.post.content 推导为 string | undefined，而是把 this.post 推导为 Post | undefined，因为在使用组件的时候，是有可能没给这个 Prop 的。

写代码的时候，VSCode 会把 this.post.content 自动修正为 this.post?.content，由于前面加了 ?. 这个 Optional 操作符，才导致 ....content 带 undefined 类型。

如果给 post 的定义带上默认值，this.post 就不会带 undefined 类型了，这时候 this.post.content 也不会带 undefined，比如

    props: {
        post: {
            type: Object as PropType<Post>,
            default: { content: "" }
        }
    },

但是要注意，如果这里的 default 给了个没有 content 的对象：default: { }，好像不会报错（VSCode 不报，不知道编译的时候会不会报）。如果不报的话就要小心了，因为这种情况下，没有 post 属性的话 this.post.content 的实际类型是 undefined，类型检查却检查不出来。

Answer 2

// type Guard
if(this.post.content) {

// todo

}

或者给content设置一个默认值

this.post.content会被推断为string | undefined我觉得的挺好的，强制你去做数据类型校验，提前发现一些问题，避免项目运行时出现bug；

试想一下，如果是vue2中没有类型校验，你可能直接就会用this.post.content，如果content没有传递过来或者content是从后端请求数据，但是后端那边没有正确返回content，最终导致xxx is undefined或者xxx is not funtion等错误