बिना .dts के टाइपस्क्रिप्ट से बाहरी गैर-टाइपस्क्रिप्ट लाइब्रेरी का उपयोग कैसे करें?


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({})

लेकिन टाइपस्क्रिप्ट की गलतियाँ यह कहकर टाल देती हैं: "ट्री 'का नाम नहीं ढूँढ सकते"

मैंने test.js फ़ाइल के शीर्ष पर संकलन करने --module amdऔर रखने की भी कोशिश की import Tree = require("model/tree");, लेकिन यह फिर से त्रुटि करता है: Cannot find external module 'model/tree'.हालाँकि स्पष्ट रूप से यह एक वैध आयात होना चाहिए, यहाँ देखें कि यह कहाँ परिभाषित किया गया था: https://github.com/marmelab/tree .js / ब्लॉब / मास्टर / src / main.js

मैं लिखना नहीं चाहता हूँ। मैं हर एक बाहरी जावास्क्रिप्ट फ़ाइल के लिए .d.ts फाइलें लिखना चाहता हूं, क्या यह गंभीरता से है कि टाइपस्क्रिप्ट मुझे क्या करना चाहता है?


1
आपको .d.ts फाइलें नहीं लिखनी हैं। एक उदाहरण के लिए stackoverflow.com/questions/27273489/… देखें
xmojmr

दिलचस्प है, कि अभी भी मुझे वस्तुओं की घोषणा करने की आवश्यकता होगी। मैं इस धारणा के तहत था कि टाइपस्क्रिप्ट पूरी तरह से जावास्क्रिप्ट के साथ संगत था। मुझे लगता है कि यह टाइपस्क्रिप्ट के दृष्टिकोण से समझ में आता है, इसे किसी तरह कोड को पढ़ने की जरूरत है और यदि इसका कोई संदर्भ नहीं है, तो यह त्रुटियां होंगी।
Blub

जवाबों:


124

मैं लिखना नहीं चाहता हूँ। मैं हर एक बाहरी जावास्क्रिप्ट फ़ाइल के लिए .d.ts फाइलें लिखना चाहता हूं, क्या यह गंभीरता से है कि टाइपस्क्रिप्ट मुझे क्या करना चाहता है?

नहीं, सबसे सरल / त्वरित समाधान यह बताने के लिए है कि वहाँ कुछ परिवर्तनशील Treeहै। यह उतना ही सरल है:

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

TypeSafety टाइपस्क्रिप्ट में एक स्लाइडिंग स्केल है। इस मामले में आप केवल संकलक को बता रहे हैं कि कुछ ऐसा है जिसे 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...

मेरे लिए यह शिकायत थी जब मैंने इस पद्धति का उपयोग किया था। मुझे नीचे एंटोन सेट करने की विधि का उपयोग करना था। आपका दु: ख हालांकि भिन्न हो सकता है! जवाब के लिए धन्यवाद बेसरात।
Tiz

आप किसी इंटरफ़ेस के रूप में टाइप भी निर्दिष्ट कर सकते हैं जो बेहतर इंटैलिजेंस प्रदान करेगा।
आकाश काव

24

आप स्वयं 'आवश्यकता' को परिभाषित कर सकते हैं और टाइपस्क्रिप्ट के अनिर्धारित एमड-निर्भरता सुविधा का उपयोग कर सकते हैं:

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

'amd- निर्भरता' निर्देश संकलक को अपने मॉड्यूल को उत्पन्न कोड में "परिभाषित" तर्कों को शामिल करने के लिए बताएगा: यहां एक नमूना देखें

आप एक बहुत अच्छे लेख की भी जाँच कर सकते हैं, जो बताता है कि टाइपस्क्रिप्ट को आवश्यकताएँ के साथ कैसे उपयोग किया जाए।

लेकिन ध्यान दें कि आपके मौजूदा कोड के लिए उचित टाइपस्क्रिप्ट परिभाषाएं लिखे बिना आपको किसी भी प्रकार की जानकारी नहीं दी जाएगी, और इसलिए आपको टाइप सुरक्षा जाँच, उन्नत कोड उपकरण और इतने पर पूरा नहीं मिलेगा। तो, आपका 'ट्री' वास्तव में 'किसी भी' प्रकार का होगा, और वास्तव में अन्य टीएस कोड के अंदर एक गतिशील जेएस टुकड़ा होगा।


वेबपैक का उपयोग करते समय महान विचार नहीं, वेबपैक को ट्रांसप्लानिंग करते समय इस मॉड्यूल को प्रस्तुत करने की आवश्यकता होगी ...
आकाश काव
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.