具有强类型 Axios 请求的 Vue3

Question

我正在尝试用 Vue3、TypeScript 和 Axios 找出一些“类型安全”基础知识。

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

我已经创建了一个Book 接口：

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）

DataService.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();

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

我的第二个问题是，为什么我可以在下面引用{{ book.body }}，而我再次将响应处理为Book 和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

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

因为在 TypeScript 中，interfaces 只是为实体定义“合同”的一种方式。

也就是说，一个对象可以具有比合同中定义的属性更多的属性，但编译器仅检查至少所需的属性是否存在并匹配所需的类型。在某些情况下，TypeScript 并不那么宽松。 Learn more.

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

所以它不会，除非你用它重新定义单个响应项（body 属性）被忽略或重命名为content——只有这样——合约才能发挥最佳作用。例如：

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

为避免混淆类型断言，我建议为原始Book 对象添加一个额外的DTO，其中包括“原始”body 属性的交集类型。例如：

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

interface IBookRaw extends Omit<IBook, 'content'> {
  body: string;
}

加上那个，让我们借助实现这个接口的class来改进之前的数据映射，例如：

class Book implements IBook {
  id: string;
  userId: string;
  title: string;
  content: string;

  constructor({ id, userId, title, body }: IBookRaw) {
    this.id = id;
    this.userId = userId;
    this.title = title;
    this.content = body;
  }
}

const val = await axios
  .get<IBookRaw[]>(
    `https://jsonplaceholder.typicode.com/posts`
  )
  .then(res =>
    res.data.map(item => new Book(item))
  );

为什么我可以在下面引用{{ book.body }}，而我又将响应处理为Book 和body 未在接口上定义？

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

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