Typescript 解析私有范围包的类型

Posted 2023-03-13

【中文标题】Typescript 解析私有范围包的类型

【英文标题】：Typescript resolve types for private scoped package

【发布时间】：2020-12-07 16:41:26

【问题描述】：

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

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

构建示例：

构建 index.js index.d.ts

示例包.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文件夹，并包含包代码，包括index.d.ts文件）。

当引用我们包中的代码（恰好是 react 组件）时，它显示错误声明 JSX element type 'Button' does not have any construct or call signatures，这是由于 typescript 类型没有正确解析造成的。

我们尝试使用 scoped 包更改项目的 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://[e-mail]/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.

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

【参考方案1】：

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

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

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

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

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

【讨论】：

我不再有办法确认它的预期上下文，但我知道其他人已经对此进行了探讨，所以希望它对他们有所帮助。谢谢！