具有强类型 Axios 请求的 Vue3

Posted 2023-02-22

【中文标题】具有强类型 Axios 请求的 Vue3

【英文标题】：Vue3 with strongly-typed Axios requests

【发布时间】：2021-03-02 00:04:49

【问题描述】：

我正在尝试用 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>

【参考方案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。

【讨论】：

非常感谢您花时间回答我的问题！这真的很有用。