วิธีใช้ไลบรารีภายนอกที่ไม่ใช่ typescript จาก typescript ที่ไม่มี. d.ts


100

ฉันได้กำหนดสิ่งเหล่านี้ในไฟล์. html ของฉัน:

<script type="text/javascript" src="bower_components/tree.js/tree.min.js"></script>
<script type="text/javascript" src="bower_components/q/q.js"></script>
<script type="text/javascript" src="test.js"></script>

จากนั้นใน test.js:

 var myTree = Tree.tree({})

แต่ข้อผิดพลาด typescript แจ้งว่า: "ไม่พบชื่อ 'Tree'"

ฉันได้ลองรวบรวม--module amdและวางimport Tree = require("model/tree");ที่ด้านบนของไฟล์ test.js แล้ว แต่ก็เกิดข้อผิดพลาดอีกครั้ง: Cannot find external module 'model/tree'.อย่างไรก็ตามชัดเจนว่าควรเป็นการนำเข้าที่ถูกต้องโปรดดูที่ที่กำหนดไว้ที่นี่: https://github.com/marmelab/tree .js / blob / master / src / main.js

ฉันไม่ต้องการเขียนไฟล์. d.ts สำหรับไฟล์ javascript ภายนอกทุกไฟล์ที่ฉันต้องการใช้นั่นคือสิ่งที่ typescript ต้องการให้ฉันทำอย่างจริงจัง


1
คุณไม่ต้องเขียนไฟล์. d.ts ดูstackoverflow.com/questions/27273489/…สำหรับตัวอย่าง
xmojmr

น่าสนใจที่ยังต้องให้ฉันประกาศวัตถุ ฉันรู้สึกว่า typescript เข้ากันได้กับจาวาสคริปต์อย่างสมบูรณ์ ฉันเดาว่ามันสมเหตุสมผลจากมุมมองของ typescript มันจำเป็นต้องอ่านโค้ดและหากไม่มีการอ้างอิงที่ดีก็จะเป็นข้อผิดพลาด
Blub

คำตอบ:


124

ฉันไม่ต้องการเขียนไฟล์. d.ts สำหรับไฟล์ javascript ภายนอกทุกไฟล์ที่ฉันต้องการใช้นั่นคือสิ่งที่ typescript ต้องการให้ฉันทำอย่างจริงจังหรือไม่?

ไม่วิธีแก้ปัญหาที่ง่ายและรวดเร็วที่สุดคือการบอกว่ามีตัวแปรTreeอยู่ ทำได้ง่ายเพียงแค่:

declare var Tree:any; // Magic
var myTree = Tree.tree({})

TypeSafety เป็นสเกลเลื่อนใน TypeScript ในกรณีนี้คุณแค่บอกคอมไพเลอร์ว่ามีสิ่งที่เรียกTreeว่าคุณจะจัดการและไม่สนใจความปลอดภัยประเภทอื่น ๆ มากเกินกว่าที่มันมีอยู่

มากกว่า

IMHO: บรรทัดdeclare var Tree:any;นี้เป็นไวยากรณ์ที่ง่ายกว่าเครื่องมือ JS veficiation อื่น ๆ ที่คุณเขียนเพื่อประกาศการใช้ตัวแปรที่ไม่มีอยู่ในโค้ดของคุณ

อัปเดต

interface ITree {
    .. further methods and properties...
}

interface ITreeFactory {
    tree(input: { [key: string]: any }): Itree
};

declare var Tree: ITreeFactory; // magic...

มันบ่นสำหรับฉันเมื่อฉันใช้วิธีนี้ ฉันต้องใช้วิธีที่ Anton กำหนดไว้ด้านล่าง ค่าไมล์ของคุณอาจแตกต่างกันไป! ขอบคุณสำหรับคำตอบ basarat
Tiz

คุณยังสามารถระบุ type เป็นอินเทอร์เฟซแทนสิ่งที่จะให้ intellisense ได้ดีกว่า
Akash Kava

24

คุณสามารถกำหนด 'ต้องการ' ด้วยตัวคุณเองและใช้คุณสมบัติการพึ่งพา amd ที่ไม่มีเอกสารของ TypeScript:

/// <amd-dependency path="model/tree" />
declare var require:(moduleId:string) => any;
var Tree = require("model/tree");

คำสั่ง 'amd-dependency' จะบอกให้คอมไพเลอร์รวมโมดูลของคุณเพื่อ "กำหนด" อาร์กิวเมนต์ในโค้ดที่สร้างขึ้น: ดูตัวอย่างที่นี่ดูตัวอย่างที่นี่

คุณสามารถตรวจสอบบทความที่ดีได้ซึ่งอธิบายวิธีใช้ TypeScript กับ RequireJS

แต่โปรดทราบว่าหากไม่มีการเขียนคำจำกัดความ TypeScript ที่เหมาะสมสำหรับโค้ดที่มีอยู่คุณจะไม่ได้รับข้อมูลประเภทใด ๆ ดังนั้นคุณจะไม่ได้รับการตรวจสอบความปลอดภัยประเภทการเติมโค้ดขั้นสูงในเครื่องมือและอื่น ๆ ดังนั้น 'Tree' ของคุณจะเป็นประเภท 'ใด ๆ ' และจริงๆแล้วจะเป็นชิ้นส่วน JS แบบไดนามิกภายในรหัส TS อื่น ๆ


ไม่ใช่ความคิดที่ดีเมื่อใช้ webpack webpack จะต้องใช้โมดูลนี้ในขณะที่กำลังเคลื่อนย้าย ...
Akash Kava
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.