如何在TypeScript中正确使用Pinia Store的自定义http属性？

要让TypeScript识别注入到Pinia Store中的http属性，需要扩展Pinia的内置类型，具体步骤如下：

1. 创建Pinia类型扩展声明文件 #

在项目src目录下创建类型声明文件（比如src/types/pinia.d.ts），用于扩展Pinia的类型定义：

import 'pinia'
// 导入你的http服务类型，根据实际实现调整
import type { HttpService } from '@/services/http'

declare module 'pinia' {
  // 让所有Pinia Store实例都拥有http属性
  export interface Store {
    http: HttpService
  }
}

如果你的http是Axios实例，就把HttpService替换为AxiosInstance，并导入type { AxiosInstance } from 'axios'。

2. 确保http服务的类型正确导出 #

检查@/services/http.ts文件，确保导出http实例的类型：

示例1：自定义Http服务类 #

export class HttpService {
  get(url: string) {
    // 你的GET请求实现逻辑
    return fetch(url).then(res => res.json())
  }
  // 其他请求方法（post/put/delete等）
}

export const http = new HttpService()

示例2：Axios实例 #

import axios from 'axios'

export const http = axios.create({
  baseURL: '/api'
})

// 导出Axios实例的类型
export type HttpService = typeof http

3. 验证类型生效 #

回到你的Store文件（比如stores/system.ts），this.http的TypeScript报错会消失，编辑器也能正确提示http的方法和属性。

内容的提问来源于stack exchange，提问作者Chris Rowles