TypeScript TS4023错误：如何关闭该错误或修复代码？

问题场景 #

相关代码如下：

feature1.slice.ts #

//feature1.slice.ts

import { createGenericSlice } from '@me/data-rtk';

/* ***********************For Storing all the divisions data****************************** */
export const divisionDataSlice = createGenericSlice({
  name: 'divisiondata',
  initialState: { status: 'loading' },
} )({
  setDivisionData(state, { payload }) {
    state.data = payload;
  },
});

@me/data-rtk 文件 #

//@me/data-rtk File
interface GenericState<T> {
  data?: T;
  status: 'loading' | 'finished' | 'error';
}

type Obj = Record<string, any>;

export const createGenericSlice = <D extends Obj, T extends Obj>({
  name = '',
  initialState,
}: {
  name: string;
  initialState: GenericState<T>;
}) => {
  return // Reducers 创建逻辑
}

打包时出现以下错误：

Error during bundle: Error: feature1.slice.ts(4, 14): semantic error TS4023: Exported variable 'divisionDataSlice' has or is using name 'GenericState' from external module "rtk-slice" but cannot be named.

解决方案 #

一、通过tsconfig关闭该错误 #

如果不需要生成类型声明文件（.d.ts），可以直接关闭声明文件生成：
在tsconfig.json的compilerOptions中添加：

{
  "compilerOptions": {
    "declaration": false
  }
}

如果需要保留声明文件，可尝试开启skipLibCheck跳过库文件的类型检查，但这可能会隐藏其他潜在问题：

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

二、代码层面修复（推荐） #

错误根源是divisionDataSlice导出的类型依赖了@me/data-rtk中未导出的GenericState接口，可通过以下方式修复：

方式1：导出GenericState接口

在@me/data-rtk文件中，将GenericState改为导出接口：

// @me/data-rtk File
export interface GenericState<T> {
  data?: T;
  status: 'loading' | 'finished' | 'error';
}

// 其余代码保持不变

这样外部模块能访问到该类型，TS将不再报错。

方式2：隐藏createGenericSlice的内部类型依赖

如果不想导出GenericState，可以在createGenericSlice中确保返回的类型不依赖未导出的接口。例如，显式定义返回类型，或让TS自动推断不包含内部类型的结构：

// @me/data-rtk File
interface GenericState<T> {
  data?: T;
  status: 'loading' | 'finished' | 'error';
}

type Obj = Record<string, any>;

// 假设使用Redux Toolkit的createSlice，示例返回类型调整
import { createSlice, Slice } from '@reduxjs/toolkit';

export const createGenericSlice = <D extends Obj, T extends Obj>({
  name = '',
  initialState,
}: {
  name: string;
  initialState: GenericState<T>;
}): Slice<GenericState<T>, D> => {
  const slice = createSlice({
    name,
    initialState,
    reducers: {}
  });
  // 合并传入的额外reducers后返回
  return slice;
};

通过显式指定返回类型，确保内部类型被包裹在公开的类型结构中。

方式3：使用时显式指定泛型参数

在feature1.slice.ts中，显式为createGenericSlice指定泛型参数，避免TS自动推断依赖未导出的GenericState：

// feature1.slice.ts
import { createGenericSlice } from '@me/data-rtk';

export const divisionDataSlice = createGenericSlice<{}, { status: 'loading' }>({
  name: 'divisiondata',
  initialState: { status: 'loading' },
})({
  setDivisionData(state, { payload }) {
    state.data = payload;
  },
});

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