Bagaimana cara menggunakan pustaka nonketik skrip eksternal dari skrip ketikan tanpa .d.ts?

100

Saya telah mendefinisikan ini di file .html saya:

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

Kemudian di test.js: 

 var myTree = Tree.tree({})

Tapi kesalahan Ketikan keluar mengatakan: "Tidak dapat menemukan nama 'Pohon'"

Saya juga mencoba mengompilasi --module amddan menempatkan import Tree = require("model/tree");di bagian atas file test.js, tetapi kesalahannya muncul lagi: Cannot find external module 'model/tree'.betapapun jelasnya itu harus merupakan impor yang valid, lihat di sini di mana ia didefinisikan: https://github.com/marmelab/tree .js / blob / master / src / main.js

Saya tidak ingin menulis file .d.ts untuk setiap file javascript eksternal yang ingin saya gunakan, apakah itu yang ingin saya lakukan dengan Typecript?

requirejs typescript Blub
sumber
1
Anda tidak perlu menulis file .d.ts. Lihat stackoverflow.com/questions/27273489/… sebagai contoh
xmojmr
menarik, itu masih mengharuskan saya untuk mendeklarasikan objek. Saya mendapat kesan bahwa Typecript sepenuhnya kompatibel dengan javascript. Saya kira itu masuk akal dari sudut pandang Ketikan, entah bagaimana perlu membaca kode dan jika tidak memiliki referensi dengan baik, itu akan menjadi kesalahan.
Blub

Jawaban:

124

Saya tidak ingin menulis file .d.ts untuk setiap file javascript eksternal yang ingin saya gunakan, apakah itu yang ingin saya lakukan oleh Typecript?

Tidak. Solusi paling sederhana / tercepat adalah dengan mengatakan bahwa ada beberapa variabel di Treeluar sana. Ini sesederhana:

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

TypeSafety adalah skala geser di TypeScript. Dalam hal ini Anda hanya memberi tahu kompiler bahwa ada sesuatu yang disebut Treeyang akan Anda kelola dan tidak peduli dengan banyak jenis keamanan selain fakta bahwa keamanan itu ada di sana .

Lebih

IMHO: Garis declare var Tree:any;ini jauh lebih sederhana sintaksnya daripada alat veficiation JS lain yang akan Anda tulis untuk menyatakan penggunaan variabel yang tidak ada dalam kode Anda.

Memperbarui

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

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

declare var Tree: ITreeFactory; // magic...
basarat
sumber
Saya mengeluh ketika saya menggunakan metode ini. Saya harus menggunakan metode yang dijelaskan Anton di bawah ini. Milage Anda mungkin berbeda! Terima kasih atas jawabannya basarat.
Tiz
Anda juga dapat menentukan tipe sebagai antarmuka daripada yang akan memberikan kecerdasan yang lebih baik.
Akash Kava
24

Anda dapat menentukan sendiri 'memerlukan' dan menggunakan fitur ketergantungan amd tak berdokumen dari TypeScript:

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

Direktif 'amd-dependency' akan memberi tahu compiler untuk memasukkan modul Anda ke argumen "define" dalam kode yang dihasilkan: lihat contoh di sini .

Anda juga dapat memeriksa artikel yang sangat bagus yang menjelaskan cara menggunakan TypeScript dengan RequireJS.

Tetapi perhatikan bahwa tanpa menulis definisi TypeScript yang tepat untuk kode yang ada, Anda tidak akan diberikan informasi jenis apa pun, sehingga Anda tidak akan mendapatkan pemeriksaan keamanan jenis, penyelesaian kode tingkat lanjut dalam alat, dan sebagainya. Jadi, 'Pohon' Anda sebenarnya bertipe 'any', dan sebenarnya akan menjadi bagian JS dinamis di dalam kode TS lainnya.

Anton
sumber
Bukan ide yang bagus saat menggunakan webpack, webpack akan membutuhkan modul ini untuk hadir saat transpiling ...
Akash Kava