Vue3 与强类型 Axios 请求

Question

我正在尝试了解 Vue3、TypeScript 和 Axios 的一些“类型安全”基础知识。

这是非常简单的东西，我觉得我好像错过了一些明显的东西！

我创建了一个Book界面：

图书.ts

interface Book {
  id: string;
  userId: string;
  title: string;
  content: string;
}

export default Book;

我还创建了一个简单的服务来获取一些 JSON，例如

  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },

（注：JSON有body而不是content接口上定义的）

数据服务.ts

import axios, { AxiosResponse } from "axios";
import Book from "@/interfaces/Book";

class DataService {
  async FetchBooks(): Promise<Book[]> {
    let response: Book[] = [
      { id: "1", userId: "someone", title: "A title", content: "Some content" }
    ];
    try {
      const val = await axios.get<Book[]>(
        `https://jsonplaceholder.typicode.com/posts`
      );

      if (val.data && val.status === 200) {
        response = val.data;
      }
    } catch (error) {
      console.log(error);
    }

    return response;
  }
}

export default new DataService();

我的第一个问题是，当接口上不存在“body”时，为什么我的服务响应值仍然包含“body” Book？我希望当我将类型传递Book给 axios get 请求时，它会被丢弃。

{{ book.body }}我的第二个问题是，当我再次将响应处理为 aBook并且body未在界面上定义时，为什么允许我在下面引用？

Book.vue

<template>
  <div v-for="book in books" :key="book.id">
    <div class="mb-2">
      {{ book.body }}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import DataService from "@/services/DataService";

// eslint-disable-next-line no-unused-vars
import Book from "@/interfaces/Book";

export default defineComponent({
  async setup() {
    let books: Book[] = [];

    await DataService.FetchBooks().then(data => (books = data));

    return { books };
  }
});
</script>

Answer 1

\n

当 Book 界面上不存在“body”时，为什么我的服务响应值仍然包含“body”？

\n

\n

因为在 TypeScript 中，接口只是定义实体“契约”的一种方式。

\n

也就是说，一个对象可以拥有比契约上定义的属性更多的属性，但编译器仅检查是否至少存在所需的属性并与所需的类型匹配。在某些情况下，TypeScript 并不那么宽松。了解更多。

\n

\n

我希望当我将类型传递Book给 axios get 请求时，它会被丢弃。

\n

\n

所以它不会，除非您重新定义单个响应项，body并省略它（属性）或重命名为content\xe2\x80\x94，然后只有 \xe2\x80\x94 合同功能才能达到最佳状态。例如：

\n

const val = await axios\n  .get<Array<Book & { body: string }>>(\n    `https://jsonplaceholder.typicode.com/posts`\n  )\n  .then(res => res.data.map(\n    ({ body, ...props }) => Object.assign({ content: body }, props)\n  ));\n

\n

为了避免类型断言混乱，我建议为原始对象\xe2\x80\x94one 添加一个额外的DTOBook，其中包含“原始”属性的交集类型body。例如：

\n

interface IBook {\n  id: string;\n  userId: string;\n  title: string;\n  content: string;\n}\n\ninterface IBookRaw extends Omit<IBook, \'content\'> {\n  body: string;\n}\n

\n

添加后，让我们借助class实现此接口的 a 来改进之前的数据映射，例如：

\n

class Book implements IBook {\n  id: string;\n  userId: string;\n  title: string;\n  content: string;\n\n  constructor({ id, userId, title, body }: IBookRaw) {\n    this.id = id;\n    this.userId = userId;\n    this.title = title;\n    this.content = body;\n  }\n}\n\nconst val = await axios\n  .get<IBookRaw[]>(\n    `https://jsonplaceholder.typicode.com/posts`\n  )\n  .then(res =>\n    res.data.map(item => new Book(item))\n  );\n

\n

\n

{{ book.body }}当我再次将响应处理为 aBook并且body未在接口上定义时，为什么允许我引用下面的内容？

\n

\n

谈到模板插值，如果您使用 Vetur，则需要启用vetur.experimental.templateInterpolationService才能获得 linting 提示的好处。启用后，如果不首先修复模板上的“缺少属性”错误（这又是重命名道具或省略它），您就不应该能够进行编译。

\n

否则（没有 Vetur 的模板插值服务），将不会进行类型检查，当然它最终会评估为undefined.

\n