使用injectEndpoints后导出Query遇TS2339报错的技术咨询

常见解决方法 #

1. 为emptySplitApi添加as const断言 #

在创建空API实例时添加as const，帮助TypeScript正确推断后续注入端点的类型：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const emptySplitApi = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: '/' }),
    endpoints: () => ({}),
}) as const; // 添加类型断言

const extendedApi = emptySplitApi.injectEndpoints({
    endpoints: (build) => ({
        example: build.query({
            query: () => 'test',
        }),
    }),
    overrideExisting: false,
});

export const { useExampleQuery } = extendedApi;

2. 升级Redux Toolkit到最新版本 #

旧版本的RTK Query可能存在类型推断缺陷，执行命令升级依赖：

npm install @reduxjs/toolkit@latest
# 或使用yarn
yarn add @reduxjs/toolkit@latest

3. 显式定义API类型（可选） #

如果前两种方法无效，可以显式声明空API的类型，让TypeScript识别注入的端点：

import { createApi, fetchBaseQuery, Api } from '@reduxjs/toolkit/query/react';

// 定义空API的类型结构
type EmptyApi = Api<
  typeof fetchBaseQuery,
  {}, // 初始端点为空
  'api',
  never,
  typeof emptySplitApi.reducerPath
>;

export const emptySplitApi = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: '/' }),
    endpoints: () => ({}),
}) as EmptyApi;

const extendedApi = emptySplitApi.injectEndpoints({
    endpoints: (build) => ({
        example: build.query({
            query: () => 'test',
        }),
    }),
    overrideExisting: false,
});

export const { useExampleQuery } = extendedApi;

原因说明 #

这个TypeScript错误通常是因为RTK Query的类型推断未正确跟踪注入的端点：要么是TypeScript无法自动识别扩展后的API实例类型，要么是旧版本RTK存在类型定义bug。添加as const断言或升级依赖可解决大部分此类问题。

内容的提问来源于stack exchange，提问作者Tigran Vardanyan