Redux Toolkit - 导出的打字稿定义 d.ts 文件有错误

时间:2021-07-01 04:32:18

标签: typescript react-native redux redux-toolkit

我感觉这个问题可能与项目的 tsconfig 有关,但它是:

我有一个库包,它使用 redux-toolkit 来生成动作创建者。该库是我项目中的一个依赖项(这是一个 react-native 项目。-- RN 的 v.0.63.4)。

问题来自添加了 prepare() 函数的操作。我的项目抱怨 types.d.ts 文件中的 typedef,因此当我尝试在我的中间件中使用 action.match() 等进行任何工作时,一切都被破坏了。

库中的示例操作:

export const myAction = createAction(
  'myActionNameHere',
  function prepare(title: string, data: Map<string, string>) {
    return {
      payload: data,
      meta: {
        title,
      },
    };
  },
);

以下是该操作的类型 def 在 d.ts 文件中的外观:

export declare const myAction: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[title: string, data: Map<string, string>], Map<string, string>, "myActionNameHere", never, {
    title: string;
}>;

在我看来,这个定义看起来是正确的。但是当我在中间件中使用该操作并尝试此操作时:

if (myAction.match(action)) {
  // ...stuff here
}

我在 match 下出现红色错误,因为它认为 myAction 仍然只是一个通用的 Action

它认为是因为它无法正确解析类型 def 文件。

当我打开 d.ts 文件进行操作时,VSCode 抱怨:

<块引用>

通用类型 'ActionCreatorWithPreparedPayload' 需要 2 到 5 个类型参数。ts

使用 createAction() 的所有其他操作不以我的编译器/linter 没有抱怨的方式使用准备函数导出。只有带有 prepare 函数的函数才是问题所在。

同一个 d.ts 文件在定义它的库工作区中打开时不会显示错误。这让我认为这与 tsconfig 或什至库使用 ESLint 进行打字稿有关,但我导入 lib 的项目较旧并且仍在使用 TSLint。

以下是每个文件的 tsconfig.json 文件:

图书馆项目tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext", 
    "jsx": "react-native",
    "lib": [
      "esnext"
    ],
    "declaration": true,
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true, 
    "alwaysStrict": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "importsNotUsedAsValues": "error",
    "noUnusedLocals": true, 
    "noUnusedParameters": true, 
    "noImplicitReturns": true, 
    "noFallthroughCasesInSwitch": true, 
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "proj-types": [
        "./src/index"
      ]
    }, 
    "esModuleInterop": true, 
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

我的 react-native 项目的 tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": [
      "es2017"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmit": true,
    "plugins": [
      {
        "name": "typescript-tslint-plugin"
      }
    ],
    "resolveJsonModule": true,
    "skipLibCheck": false,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

任何想法可能是问题的配置选项? RN 项目相当大,是一个较旧的项目,随着 RN 的发展而升级。可能是 2 年前在 RN .61 上开始的。

我正计划尽快进行 TSLint --> ESLint 迁移,但并不着急。如果这是问题所在,那么也许我会提出来。

1 个答案:

答案 0 :(得分:1)

问题是我的 RN 项目使用的 Typescript 版本太旧。它在 3.8.3 上,而我的 lib 项目在 4.1.3 上。让它们在 4.1.3 匹配解决了这个问题。去图!

感觉有点愚蠢,我在输入所有这些问题之前没有先检查一下。对不起!