Typescript 解析私有范围包的类型

Question

我有一个托管在 Azure Artifacts npm feed 中的包，范围为@company，例如添加我们使用的包yarn add @company/package。该包是一个打字稿项目，编译时还包含类型文件。

使用它时，暴露的类型没有被解析，并且编译失败。

构建示例：

• 建造
  • 索引.js
  • 索引.d.ts

示例 package.json

{
  "name": "@company/package",
  "version": "0.0.5",
  "module": "./build/index.js",
  "types": "./build/index.d.ts",
  "scripts": {
    "build": "rimraf ./build && tsc -p tsconfig.json --noEmit false",
    "prepublish": "npm run build"
  },
  "devDependencies": {
    "typescript": "^3.9.7"
  },
  "files": [
    "build/"
  ]
}

与package.json同一级别，有一个.npmrc文件，一个tsconfig.json文件。

.npmrc

@company:registry=https://company.pkgs.visualstudio.com/_packaging/company-npm/npm/registry/
                        
always-auth=true

tsconfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "target": "ES2015",
    "lib": [
      "es2018",
      "dom"
    ],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "preserve",
    "preserveConstEnums": false,
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": false,
    "suppressImplicitAnyIndexErrors": true,
    "removeComments": true,
    "skipLibCheck": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "noUnusedLocals": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "outDir": "build/esm",
    "declaration": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules/*",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "src/__mocks__/Api.ts"
  ]
}

我们可以毫无问题地安装公共 npmjs 包和 @types，并且@company/package也可以工作（@company 文件夹出现在 node_modules 中，并包含包代码，包括文件index.d.ts）。

当引用我们的包（恰好是 React 组件）中的代码时，它显示错误，指出JSX element type 'Button' does not have any construct or call signatures，这是打字稿类型无法正确解析的结果。

我们尝试使用范围包更改项目的 tsconfig.json，以便类型根也包含 @company 范围，例如

"typeRoots": [
      "node_modules/@types",
      "node_modules/@company"
],

我们还尝试了安装类型的各种迭代（尚未手动发布，我只是认为它可能作为 npm 发布的一部分），yarn add -D @company/@types/package @types/@company@package但两个命令都返回以下错误；

yarn add v1.22.0
warning package.json: No license field
warning project@0.0.0: No license field
[1/4] Resolving packages...
error Command failed.
Exit code: 128
Command: git
Arguments: ls-remote --tags --heads ssh://git@github.com/types/company-react-components.git
Directory: /mnt/c/Users/user/source/repos/project/src/project.Ui
Output:
Host key verification failed.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

如何正确引用作为作用域包的一部分发布的类型？如果正确引用，为什么类型无法解析？

Answer 1

我知道这是一个老问题，但我只是花了半天时间才开始工作。

您需要命名您的包@myorg/mypackage以使 npm 使用@myorg:registry=https://pkgs.dev.azure.com/...您在 中定义的范围.npmrc。

为了让 TypeScript 满意，并且不必手动调整 typeRoots，您可以安装该包，并将其别名重新命名@types/myorg__mypackage：

npm i @types/myorg__mypackage@npm:@myorg/mypackage@latest --save-dev

您可能想在自述文件中记录这一点，因为对于想要使用该软件包的可怜的人来说，这根本不直观。