.ts फ़ाइल को टाइपस्क्रिप्ट मॉड्यूल

Question

Here is SystemJS + TypeScript plunk के रूप में नहीं माना जाता है, जो official Angular plunk template से बनाया गया है।

यह

(SystemJS) SyntaxError: Missing initializer in const declaration

at eval()

...

त्रुटि फेंकता है और स्पष्ट रूप से .ts के रूप में आम जावास्क्रिप्ट फाइल जब फ़ाइल import या export बयान शामिल नहीं है का मूल्यांकन करता है:

main.ts

const foo: boolean = 'foo'; 

console.log(foo); 

config.js

System.config({ 
    //use typescript for compilation 
    transpiler: 'typescript', 
    //typescript compiler options 
    typescriptOptions: { 
    emitDecoratorMetadata: true 
    }, 
    paths: { 
    'npm:': 'https://unpkg.com/' 
    }, 
    //map tells the System loader where to look for things 
    map: { 

    'app': './src', 
    ... 
    }, 
    //packages defines our app package 
    packages: { 
    app: { 
     main: './main.ts', 
     defaultExtension: 'ts' 
    }, 
    ... 
    } 
}); 

index.html

... 
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script> 
<script src="config.js"></script> 
<script> 
System.import('app') 
    .catch(console.error.bind(console)); 
</script> 
... 

लेकिन the same plunk is fine जब फ़ाइल ES6 मॉड्यूल के लक्षण हैं:

main.ts

const foo: boolean = 'foo'; 

console.log(foo); 

export default null; 

जाहिर है, अगर एक फ़ाइल में .ts एक्सटेंशन है, I टाइपस्क्रिप्ट के रूप में इसका मूल्यांकन करना पसंद करेंगे, चाहे वह कुछ आयात करे या नहीं।

यह सेटअप इस सेटअप में क्यों होता है? इसे कैसे सुधारा जा सकता है?

Answer 1

SystemJS शायद के रूप में काम करेंगे इस प्रकार है::

> System.import('app') 
    - where is 'app'? 
> map: { 'app': './src', ... 
    - Okay, 'app' is './src' 
    - './src' ?? 
> packages: { app: { main: './main.ts', 
    - Aha, './src/main.ts' 
> ./src/main.ts 
    - Which format?? 
    - 'system' ? -> No 
    - 'esm' ? -> No (if YES, use transpiler: 'typescript') 
    - 'amd' ? -> No 
    - 'cjs' ? -> No 
    - 'global' ? -> Yes -> No transpiler needed. 
> evaluate ./src/main.ts 
    - What is ':string' in JavaScript? 
    - Exception!!! 

Module format detection

When the module format is not set, automatic regular-expression-based detection is used. This module format detection is never completely accurate, but caters well for the majority use cases.

अपने सेट अप के लिए वास्तविक ठीक तो जैसे पैकेज के लिए स्पष्ट रूप से मॉड्यूल प्रारूप को जोड़ने के लिए है

यदि ऑटो-डिटेक्शन विफल रहता है, तो आपको इसे मैन्युअल रूप से निर्दिष्ट करना होगा।

विधि 1: स्रोत के लिए संकेत जोड़े

EX1: export जोड़ने (सवाल से)

const foo: boolean = 'foo'; 
console.log(foo); 
export default null; 

ex2: जोड़ने export

export const foo: boolean = 'foo'; 
console.log(foo); 

विधि 2: format विन्यास जोड़े

EX1: संकुल/path/मेटा/पैटर्न (./ main.ts या ./*.ts)/format

packages: { 
    app: { 
     main: './main.ts', 
     defaultExtension: 'ts', 
     meta: { 
     './main.ts': { 
      format: 'esm' 
     } 
     } 
    } 

ex2: संकुल/path/format

packages: { 
    app: { 
     main: './main.ts', 
     defaultExtension: 'ts', 
     format: 'esm' 
    } 
} 

ex3: मेटा/पैटर्न (जरूरत एप्लिकेशन/उपसर्ग)/format (बाहर संकुल)

meta: { 
    'app/main.ts': { 
     format: 'esm' 
    } 
} 

Answer 2

अस्वीकरण: यह केवल एक छोटी डीबगिंग से आता है, मुझे वास्तव में इस विषय में अनुभव नहीं हुआ है, इसलिए मेरी समझ में कोई सुधार स्वागत है।

सिस्टमजेएस केवल मॉड्यूल प्रारूप ठीक से निर्धारित होने पर ही ट्रांसमिशन करेगा। यदि मॉड्यूल प्रारूप को सूचित नहीं किया जाता है, तो यह कोशिश करने और निर्धारित करने के लिए तेज़ ह्युरिस्टिक का उपयोग करता है (मूल रूप से, स्रोत पर नियमित अभिव्यक्ति)। यह हेरिस्टिक काम करता है जब आपके पास आयात कथन आयात करता है और जब आप नहीं करते हैं तो विफल हो जाता है।

app: { 
    main: './main.ts', 
    defaultExtension: 'ts', 
    format:'esm' // << Module format. 
},