如何在 Vue.extend 中使用 ts？道具怎么处理答案

【问题标题】：How to use ts in Vue.extend? How to dowith the props如何在 Vue.extend 中使用 ts？道具怎么处理
【发布时间】：2020-07-23 13:19:09
【问题描述】：

pic1:

我在 Vue.extend 中添加了 props 描述

为什么我在 props 中键入 key 时没有提示？

或者如何处理 Vue extends 中的“props”？看来我已经传递了一个 JSON 对象，但我想传递一个接口或...？

我试过pass接口，但是完全错误

【问题讨论】：

请将代码粘贴为代码（文本）而不是图像

标签： typescript vue.js

【解决方案1】：

您可以通过这种方式创建接口

类型/索引.ts

export interface AuthenticatedUser {
  firstName: string,
  lastName: string,
  twitterHandle?: string,
  location: Location
}

export interface Location {
  city: string,
  state: string
}

export interface Todo {
  title: string;
}

import { AuthenticatedUser, Todo } from '@/types' // importing AuthenticatedUser interface

export default Vue.extend({
    data: () => ({
        authenticatedUser: {} as AuthenticatedUser //declaring authenticatedUser as type AuthenticatedUser
    }),
    name: 'Inputx' as string,
    computed: {
      fullName(): string { // Computed Property returns a string
        return `${this.authenticatedUser.firstName} ${this.authenticatedUser.lastName}`
      },
    },
    props: {
      todos: {
        type: Todo[], // declaring todos as array of Type Todo (Todo is the interface)
        required: true,
        default: []
      }
    },
    mounted() {
      this.authenticatedUser = {
        firstName: `Dave`,
        lastName: `Berning`,
        twitterHandle: `@daveberning`,
        location: {
          city: `Cincinnati`,
          state: `OH`
        }
      }   
    },
});

您可以了解更多关于此here 和here

【讨论】：