npm - Typescript แก้ไขประเภทสำหรับแพ็กเกจที่มีขอบเขตส่วนตัว

ฉันมีแพ็กเกจที่โฮสต์อยู่ใน Azure Artifacts npm feed ซึ่งมีขอบเขตเป็น @company เช่น เพื่อเพิ่มแพ็กเกจเราจะใช้ yarn add @company/package แพ็กเกจนี้เป็นโปรเจกต์ TypeScript ที่เมื่อถูกคอมไพล์แล้วก็จะรวมไฟล์ชนิด (type files) ด้วย

เมื่อใช้งานมัน ประเภทที่เปิดเผยจะไม่ถูกแก้ไข และการคอมไพล์ล้มเหลว

ตัวอย่างของการสร้าง:

• สร้าง

  • index.js
  • index.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 ซึ่งเป็นผลมาจากการที่การกำหนดประเภทของ TypeScript ไม่สามารถแก้ไขได้อย่างถูกต้อง

เราได้พยายามเปลี่ยนแปลงไฟล์ tsconfig.json ของโครงการที่ใช้แพ็กเกจแบบสโคป เพื่อให้ type roots รวมถึงสโคป @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 [email : No license field
[1/4] Resolving packages...
error Command failed.
Exit code: 128
Command: git
Arguments: ls-remote --tags --heads ssh://[email /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 ใช้สโคป @myorg:registry=https://pkgs.dev.azure.com/... ที่คุณได้กำหนดไว้ใน .npmrc.

เพื่อให้ TypeScript ทำงานได้อย่างไม่มีปัญหา และไม่ต้องปรับ typeRoots ด้วยตนเอง คุณสามารถติดตั้งแพ็กเกจ และตั้งชื่อ alias กลับเข้าไปเป็น @types/myorg__mypackage ดังนี้:

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

คุณน่าจะต้องการบันทึกเรื่องนั้นในไฟล์ readme เพราะมันไม่ใช่เรื่องที่เข้าใจได้ง่ายสำหรับผู้โชคร้ายที่ต้องการใช้งานแพ็กเกจ