Làm cách nào để sử dụng một thư viện không phải typecript bên ngoài từ typecript không có .d.ts?


100

Tôi đã xác định những điều này trong tệp .html của mình:

<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>

Sau đó, trong test.js:

 var myTree = Tree.tree({})

Tuy nhiên, các lỗi Typecript nói: "Không thể tìm thấy tên 'Tree'"

Tôi cũng đã thử biên dịch --module amdvà đặt import Tree = require("model/tree");ở đầu tệp test.js, nhưng nó lại xảy ra lỗi: Cannot find external module 'model/tree'.tuy nhiên rõ ràng đây phải là một lần nhập hợp lệ, hãy xem tại đây nơi nó được xác định: https://github.com/marmelab/tree .js / blob / master / src / main.js

Tôi không muốn ghi các tệp .d.ts cho mọi tệp javascript bên ngoài mà tôi muốn sử dụng, đó có phải là những gì Typecript muốn tôi làm nghiêm túc không?


1
Bạn không phải ghi tệp .d.ts. Xem stackoverflow.com/questions/27273489/… để làm ví dụ
xmojmr

thú vị, điều đó vẫn sẽ yêu cầu tôi khai báo các đối tượng. Tôi có ấn tượng rằng Typecript hoàn toàn tương thích với javascript. Tôi đoán nó có ý nghĩa từ quan điểm Typecript, bằng cách nào đó nó cần phải đọc mã và nếu nó không có tham chiếu tốt, nó sẽ là lỗi.
Blub

Câu trả lời:


124

Tôi không muốn ghi tệp .d.ts cho mọi tệp javascript bên ngoài mà tôi muốn sử dụng, đó có phải là những gì Typecript muốn tôi làm nghiêm túc không?

Không. Giải pháp đơn giản nhất / nhanh nhất chỉ đơn giản là nói với nó rằng có một số biến số Treengoài đó. Điều này đơn giản như:

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

TypeSafety là một thang trượt trong TypeScript. Trong trường hợp này, bạn chỉ nói với trình biên dịch rằng có thứ gì đó được gọi là Treebạn sẽ quản lý và không quan tâm nhiều đến an toàn kiểu chữ ngoài thực tế là nó ở đó .

Hơn

IMHO: Dòng declare var Tree:any;này có cú pháp đơn giản hơn nhiều so với các công cụ thông tin JS khác mà bạn phải viết để khai báo việc sử dụng các biến không có trong mã của bạn.

Cập nhật

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

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

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

Nó đã được phàn nàn cho tôi khi tôi sử dụng phương pháp này. Tôi đã phải sử dụng phương pháp Anton đặt ra bên dưới. Tuy nhiên, số tiền của bạn có thể khác nhau! Cảm ơn vì câu trả lời basarat.
Tiz

bạn cũng có thể chỉ định loại làm giao diện thay vì bất kỳ loại nào sẽ cung cấp intellisense tốt hơn.
Akash Kava

24

Bạn có thể tự xác định 'yêu cầu' và sử dụng tính năng phụ thuộc amd không có giấy tờ của TypeScript:

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

Chỉ thị 'amd-dependency' sẽ yêu cầu trình biên dịch bao gồm mô-đun của bạn để "xác định" các đối số trong mã được tạo: xem mẫu tại đây .

Bạn cũng có thể xem một bài viết rất hay giải thích cách sử dụng TypeScript với RequestJS.

Nhưng lưu ý rằng nếu không viết các định nghĩa TypeScript thích hợp cho mã hiện tại của bạn, bạn sẽ không được cung cấp bất kỳ thông tin loại nào và vì vậy bạn sẽ không nhận được kiểm tra an toàn loại, hoàn thành mã nâng cao trong các công cụ, v.v. Vì vậy, 'Cây' của bạn thực sự sẽ thuộc loại 'bất kỳ' và thực sự sẽ là một đoạn JS động bên trong mã TS khác.


Ý tưởng không tốt khi sử dụng webpack, webpack sẽ đòi hỏi module này có mặt trong khi transpiling ...
Akash Kava
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.