typescript - คุณจะสร้างไฟล์คำนิยาม .d.ts "typings" จากไลบรารี JavaScript ที่มีอยู่แล้วได้อย่างไร?

ฉันกำลังใช้ไลบรารีจำนวนมาก ทั้งของตัวเองและของผู้อื่น ฉันเห็นว่าไดเรกทอรี "typings" มีบางส่วนสำหรับ Jquery และ WinRT... แต่พวกมันถูกสร้างขึ้นได้อย่างไร?

คำตอบ #1

มีตัวเลือกไม่กี่อย่างที่คุณสามารถใช้ได้ ขึ้นอยู่กับห้องสมุดที่เกี่ยวข้อง ว่ามันถูกเขียนอย่างไร และคุณกำลังมองหาระดับความแม่นยำแบบไหน มาลองทบทวนตัวเลือกเหล่านี้ตามลำดับความต้องการโดยประมาณจากมากไปน้อยกัน

บางทีมันอาจมีอยู่แล้ว

ควรตรวจสอบ DefinitelyTyped (https://github.com/DefinitelyTyped/DefinitelyTyped) ก่อนเสมอ นี่คือรีโปชุมชนที่เต็มไปด้วยไฟล์ .d.ts เป็นพันๆ ไฟล์ และมีโอกาสสูงมากที่สิ่งที่คุณกำลังใช้จะมีอยู่แล้ว คุณควรตรวจสอบ TypeSearch (https://microsoft.github.io/TypeSearch/) ด้วย ซึ่งเป็นเครื่องมือค้นหาสำหรับไฟล์ .d.ts ที่เผยแพร่ผ่าน NPM; ที่นี่จะมีคำจำกัดความมากกว่า DefinitelyTyped เล็กน้อย โมดูลบางตัวก็มีคำจำกัดความของตัวเองที่มาพร้อมกับการแจกจ่าย NPM ของพวกเขา ดังนั้นควรตรวจสอบด้วยว่ามีกรณีนี้ก่อนที่จะพยายามเขียนของคุณเอง

บางทีคุณอาจไม่ต้องการอันหนึ่ง

TypeScript ตอนนี้รองรับแฟลก --allowJs และจะทำการสรุปข้อมูลเพิ่มเติมจากไฟล์ .js คุณสามารถลองรวมไฟล์ .js ในการคอมไพล์ของคุณพร้อมกับการตั้งค่า --allowJs เพื่อดูว่านี่ให้ข้อมูลชนิดเพียงพอหรือไม่ TypeScript จะสามารถรู้จักสิ่งต่าง ๆ เช่น คลาสแบบ ES5 และคอมเมนต์ JSDoc ในไฟล์เหล่านี้ แต่บางครั้งอาจเกิดปัญหาได้หากไลบรารีทำการเริ่มต้นตัวเองในรูปแบบที่แปลก

เริ่มต้นด้วย --allowJs

หาก --allowJs ให้ผลลัพธ์ที่ดีแก่คุณ และคุณต้องการเขียนไฟล์คำจำกัดความที่ดีกว่าเอง คุณสามารถรวม --allowJs กับ --declaration เพื่อดู "การคาดเดาที่ดีที่สุด" ของ TypeScript เกี่ยวกับประเภทของไลบรารีนี้ ซึ่งจะให้จุดเริ่มต้นที่ดีแก่คุณ และอาจดีเท่ากับไฟล์ที่เขียนด้วยมือ หากคำอธิบาย JSDoc ถูกเขียนอย่างดีและคอมไพเลอร์สามารถค้นหาได้

เริ่มต้นใช้งาน dts-gen

หาก --allowJs ไม่ทำงาน คุณอาจต้องการใช้ dts-gen (https://github.com/Microsoft/dts-gen) เพื่อให้ได้จุดเริ่มต้น เครื่องมือนี้ใช้รูปแบบการทำงานของวัตถุเพื่อระบุคุณสมบัติทั้งหมดที่มีได้อย่างแม่นยำ ข้อดีคือมักมีความแม่นยำสูง แต่เครื่องมือนี้ยังไม่รองรับการดึงความคิดเห็น JSDoc เพื่อเติมประเภทเพิ่มเติม คุณสามารถรันเครื่องมือนี้ได้ดังนี้:

npm install -g dts-gen
dts-gen -m <your-module>

นี่จะสร้าง your-module.d.ts ในโฟลเดอร์ปัจจุบัน

กดปุ่มเลื่อนเวลา

ถ้าคุณแค่อยากทำทั้งหมดทีหลังและต้องการไปโดยไม่มีประเภทอยู่สักพัก ใน TypeScript 2.0 คุณสามารถเขียนได้แล้ว

declare module "foo";

ซึ่งจะช่วยให้คุณ import โมดูล "foo" โดยมีประเภทเป็น any หากคุณมีตัวแปร global ที่ต้องการจัดการทีหลัง แค่เขียน

declare const foo: any;

ซึ่งจะให้ตัวแปร foo แก่คุณ

คำตอบ #2

คุณสามารถใช้ tsc --declaration fileName.ts ตามที่ Ryan อธิบายไว้ หรือคุณสามารถระบุ declaration: true ภายใต้ compilerOptions ใน tsconfig.json ของคุณ สมมติว่าคุณมี tsconfig.json อยู่แล้วในโปรเจกต์ของคุณ

คำตอบ #3

เมื่อสร้างไลบรารีของคุณเอง คุณสามารถสร้างไฟล์ *.d.ts โดยใช้คำสั่ง tsc (TypeScript Compiler) ดังนี้: (โดยสมมติว่าคุณกำลังสร้างไลบรารีไปยังโฟลเดอร์ dist/lib)

tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly

• -d (--declaration): สร้างไฟล์ *.d.ts
• --declarationDir dist/lib: ไดเรกทอรีเอาต์พุตสำหรับไฟล์ประกาศที่สร้างขึ้น
• --declarationMap: สร้าง sourcemap สำหรับแต่ละไฟล์ ‘.d.ts’ ที่เกี่ยวข้อง
• --emitDeclarationOnly: สร้างเฉพาะไฟล์ประกาศ ‘.d.ts’ เท่านั้น (ไม่มีไฟล์ JS คอมไพล์)

(ดูเอกสารสำหรับตัวเลือกคอมไพเลอร์บรรทัดคำสั่งทั้งหมด)

หรือยกตัวอย่างเช่นใน package.json ของคุณ:

"scripts": {
    "build:types": "tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly",
}

แล้วจากนั้นให้รัน: yarn build:types (หรือ npm run build:types)

คำตอบ #4

วิธีที่ดีที่สุดในการจัดการกับสิ่งนี้ (หากไม่มีไฟล์ประกาศใน DefinitelyTyped) คือการเขียนการประกาศเฉพาะสำหรับสิ่งที่คุณใช้เท่านั้น แทนที่จะเขียนสำหรับทั้งห้องสมุด วิธีนี้ช่วยลดงานลงมาก - และนอกจากนี้ คอมไพเลอร์สามารถช่วยโดยการแจ้งข้อผิดพลาดเกี่ยวกับเมธอดที่ขาดหายไป

คำตอบ #5

ตามที่ Ryan กล่าว คอมไพเลอร์ tsc มีสวิตช์ --declaration ซึ่งจะสร้างไฟล์ .d.ts จากไฟล์ .ts นอกจากนี้ควรทราบว่า (ยกเว้นข้อบกพร่อง) TypeScript ถูกออกแบบมาให้สามารถคอมไพล์ Javascript ได้ ดังนั้นคุณสามารถส่งโค้ด javascript ที่มีอยู่ไปยังคอมไพเลอร์ tsc ได้