Typescript 解析私有范围 package 的类型

Question

I have a package hosted in an Azure Artifacts npm feed, scoped to @company, eg to add the package we use yarn add @company/package . 这个 package 是一个 typescript 项目，编译时还包括类型文件。

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

构建示例：

• 建造
  • index.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也可以工作（在 node_modules 中出现一个@company 文件夹，并包含 package 代码，包括index.d.ts文件）。

当引用我们的 package（恰好是反应组件）中的代码时，它显示错误说明JSX element type 'Button' does not have any construct or call signatures ，这是 typescript 类型解析不正确的结果。

我们尝试使用作用域 package 更改项目的 tsconfig.json，以便类型根还包括 @company scope，例如

"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.

您如何正确引用作为范围 package 的一部分发布的类型？ 如果它被正确引用，为什么类型没有解析？

Answer 1

我知道这是一个老问题，但我只是花了半天时间把头撞在墙上，然后才开始工作。

You need to name your package @myorg/mypackage to get npm to use the scope @myorg:registry=https://pkgs.dev.azure.com/... that you have defined in .npmrc .

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

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

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