ค้นหาเว็บไซต์

javascript - ไฟล์ประกาศ Typescript สำหรับไฟล์ JS ภายในเครื่อง

ฉันกำลังพยายามเพิ่มการกำหนดประเภทสำหรับไฟล์ Javascript ของเราที่ทำงานในขณะที่เรากำลังอยู่ในกระบวนการแปลงเป็น Typescript อย่างไรก็ตาม ฉันไม่สามารถทำให้ไฟล์ประกาศถูกจดจำได้

นี่คือโครงสร้างไฟล์ของฉัน

  • เจเอส

    • ฟู.เจส

  • การพิมพ์

    • ฟู

      • index.d.ts

      • ฟู
      • index.d.ts

  • Index.ts
  • package.json
  • tsconfig.json

Fu.js

module.exports = function Foo() {
   return 'Bar';
 };

index.d.ts

export = Foo;

declare function Foo(): string;

index.ts

import Foo = require('./js/Foo')

console.log(Foo());

tsconfig.json

{
  "compilerOptions": {
    "typeRoots": ["./typings"],
    "target": "es5",
    "strict": true,
    "baseUrl": "./",
    "paths": {
      "*": ["typings/*"]
    }
  }
}

package.json

{
  "name": "fail",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "tsc": "tsc"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "typescript": "^3.1.4"
  }
}

นี่คือรีโปเพื่อทำซ้ำปัญหาของฉัน

https://github.com/erisman20/typings_help

แก้ไข: นี่คือข้อผิดพลาดที่ฉันได้รับ

error TS7016: Could not find a declaration file for module './js/Foo.js'. '....../js/Foo.js' implicitly has an 'any' type.

คำตอบ #1

วิธีเดียวในการให้คำประกาศสำหรับการนำเข้าที่สัมพันธ์กันเช่น './js/Foo' คือการมีไฟล์ประกาศจริงที่เส้นทางนำเข้า (พร้อมกับ .d.ts หรือ /index.d.ts) หรือมีมันแบบเสมือนที่เส้นทางนำเข้าตามตัวเลือก rootDirs ของคุณ ไม่มี typeRoots หรือ baseUrl/paths มีบทบาทในสถานการณ์นี้: baseUrl/paths มีผลต่อการแก้ไขโมดูลเฉพาะเส้นทางที่ "ไม่สัมพันธ์กัน" และ typeRoots สามารถใช้เพื่อให้ TypeScript โหลดไฟล์ได้แต่ไม่ส่งผลต่อความสัมพันธ์ระหว่างเส้นทางนำเข้าและไฟล์เลย.

วิธีแก้ที่ง่ายที่สุดคือการวางไฟล์ Foo.d.ts ในไดเร็กทอรีเดียวกับ Foo.js หากคุณต้องการเก็บไทป์ในไดเร็กทอรีแยก คุณสามารถเพิ่ม "rootDirs": ["js", "typings"] ลงใน tsconfig.json การเปลี่ยนแปลงนี้เพียงพอที่จะทำให้ตัวอย่างของคุณทำงานได้สำหรับผม ถึงอย่างนั้นผมก็พบว่ามันสับสนที่จะมีไฟล์ Foo.js และ Foo/index.d.ts ที่ตรงกัน และขอแนะนำให้คุณใช้ความสอดคล้องในการใช้ไดเร็กทอรีย่อย กล่าวคือ ใช้ Foo/index.js บนฝั่ง JavaScript หรือเปลี่ยนไปใช้ Foo.d.ts บนฝั่ง TypeScript.

บทความที่เกี่ยวข้อง