टाइपस्क्रिप्ट के लिए कस्टम वैश्विक इंटरफेस (.d.ts फ़ाइलें) को कॉन्फ़िगर कैसे करें?

Question

मैं पिछले कुछ घंटों से इस समस्या से जूझ रहा हूं और मुझे इंटरनेट पर कुछ भी नहीं मिल रहा है जो स्पष्ट रूप से, सरल अवधारणा को स्पष्ट रूप से समझाएगा।

मैं वर्तमान में एक ReactJS परियोजना जो Webpack2 और टाइपप्रति का उपयोग करता है पर काम कर रहा हूँ। सब कुछ एक चीज़ से पूरी तरह से काम करता है - मुझे इंटरफेस को स्थानांतरित करने का कोई तरीका नहीं मिल रहा है जिसे मैंने स्वयं को अलग फाइलों में लिखा है ताकि वे पूरे एप्लिकेशन के लिए दृश्यमान हों।

प्रोटोटाइपिंग मैं शुरू में था इंटरफेस है कि उन्हें इस्तेमाल फाइलों में परिभाषित किया लेकिन के लिए अंत में मैं कुछ है कि कई वर्गों में की जरूरत थी बढ़ने लगा और है कि जब सभी समस्याओं शुरू कर दिया है। कोई फर्क नहीं पड़ता कि मैं अपने tsconfig.json में क्या परिवर्तन करता हूं और इससे कोई फर्क नहीं पड़ता कि मैंने फ़ाइलों को अपना आईडीई और वेबपैक कहां रखा है, दोनों नामों को ढूंढने में सक्षम नहीं होने के बारे में शिकायत करते हैं (Could not find name 'IMyInterface')।

यहाँ मेरे वर्तमान tsconfig.json फ़ाइल है:

{ 
    "compilerOptions": { 
    "baseUrl": "src", 
    "outDir": "build/dist", 
    "module": "commonjs", 
    "target": "es5", 
    "lib": [ 
     "es6", 
     "dom" 
    ], 
    "typeRoots": [ 
     "./node_modules/@types", 
     "./typings" 
    ], 
    "sourceMap": true, 
    "allowJs": true, 
    "jsx": "react", 
    "moduleResolution": "node", 
    "rootDir": "src", 
    "forceConsistentCasingInFileNames": true, 
    "noImplicitReturns": true, 
    "noImplicitThis": true, 
    "noImplicitAny": false, 
    "strictNullChecks": true, 
    "suppressImplicitAnyIndexErrors": true, 
    "noUnusedLocals": true 
    }, 
    "exclude": [ 
    "node_modules", 
    "build", 
    "scripts", 
    "acceptance-tests", 
    "webpack", 
    "jest", 
    "src/setupTests.ts" 
    ], 
    "types": [ 
    "typePatches" 
    ] 
} 

आप देख सकते हैं, मेरे tsconfig.json सभी स्रोत ./src में, मैं ./typings में .d.ts फ़ाइलें अपने कस्टम रखा जाता है और यह शामिल है, परियोजना निर्देशिका की जड़ में है typeRoots में।

मैं टाइपप्रति 2.1.6 और 2.2.0 और न काम करता है के साथ यह परीक्षण किया गया। यह सब काम करने के लिए प्राप्त करने की

एक तरह से src और फिर import {IMyInterface} from 'typings/blah' में मेरी typings निर्देशिका स्थानांतरित करने के लिए है, लेकिन है कि मेरे पास सही महसूस नहीं करता है के रूप में यह कुछ मैं उपयोग करने की आवश्यकता नहीं है। मैं चाहता हूं कि उन इंटरफेस सिर्फ मेरे आवेदन में उपलब्ध 'जादुई' हों।

संपादित करें: यहां नमूने app.d.ts फ़ाइल है:

interface IAppStateProps { 
} 

interface IAppDispatchProps { 
} 

interface IAppProps extends IAppStateProps, IAppDispatchProps { 
} 

मैं उन्हें export या शायद declare की जरूरत है? मुझे आशा है कि मुझे उन्हें नामस्थान में लपेटना पड़ेगा ?!

Answer 1

"जादुई ढंग से उपलब्ध इंटरफेस" या वैश्विक प्रकार अत्यधिक हतोत्साहित किया जाता है और ज्यादातर विरासत के लिए छोड़ दिया जाना चाहिए। साथ ही, आपको लिखने वाले कोड के लिए परिवेश घोषणा फ़ाइलों (उदा। d.ts फ़ाइलें) का उपयोग नहीं करना चाहिए। ये बाहरी गैर-टाइपस्क्रिप्ट कोड (अनिवार्य रूप से जेएस कोड में टाइपस्क्रिप्ट प्रकारों को भरने के लिए खड़े हैं ताकि आप इसे जावास्क्रिप्ट के साथ बेहतर एकीकृत कर सकें)।

कोड के लिए आप लिखना है कि आप अपने इंटरफेस और प्रकार को परिभाषित करने के लिए सादे .ts फ़ाइलों का उपयोग किया जाना चाहिए।

वैश्विक प्रकारों को निराश करते समय, आपकी समस्या का उत्तर यह है कि टाइपस्क्रिप्ट में .ts फ़ाइलों के दो प्रकार हैं। इन्हें scripts और modules कहा जाता है।

एक script में

कुछ भी वैश्विक हो जाएगा। इसलिए यदि आप अपनी इंटरफेस को एक स्क्रिप्ट में परिभाषित करते हैं तो यह आपके आवेदन के दौरान विश्व स्तर पर उपलब्ध होगा (जब तक स्क्रिप्ट को ///<reference path=""> टैग के माध्यम से या files:[] या includes:[] या **/*.ts के में संकलन में शामिल किया जाएगा।

अन्य फ़ाइल प्रकार 'मॉड्यूल' है, और module में कुछ भी मॉड्यूल के लिए निजी होगा। यदि आप किसी मॉड्यूल से कुछ भी निर्यात करते हैं तो यह अन्य मॉड्यूल के लिए उपलब्ध होगा यदि उन अन्य मॉड्यूल ने इसे आयात करना चुना है।

.ts एक "स्क्रिप्ट" या "मॉड्यूल" फ़ाइल बनाता है? खैर .... अगर आप फ़ाइल में कहीं भी import/export का उपयोग करते हैं, तो वह फ़ाइल "मॉड्यूल" बन जाती है। यदि import/export कथन नहीं हैं तो यह एक वैश्विक लिपि है।

मेरा अनुमान है कि आपने अनजाने में import या export अपनी घोषणाओं में उपयोग किया है और इसे एक मॉड्यूल में बनाया है, जिसने आपके सभी इंटरफेस को उस मॉड्यूल के भीतर निजी रूप से बदल दिया है। यदि आप उन्हें वैश्विक होना चाहते हैं तो आप सुनिश्चित करेंगे कि आप अपनी फ़ाइल के भीतर आयात/निर्यात विवरण का उपयोग नहीं कर रहे हैं।