TypeScript
SystemJS के साथ टाइपस्क्रिप्ट
खोज…
सिस्टमजेएस के साथ ब्राउज़र में विश्व को नमस्कार
Systemjs और प्लगइन-टाइपस्क्रिप्ट स्थापित करें
npm install systemjs
npm install plugin-typescript
नोट: यह टाइपस्क्रिप्ट 2.0.0 संकलक स्थापित करेगा जो अभी तक जारी नहीं किया गया है।
टाइपस्क्रिप्ट 1.8 के लिए आपको प्लगइन-टाइपस्क्रिप्ट 4.0.16 का उपयोग करना होगा
hello.ts फ़ाइल बनाएँ
export function greeter(person: String) {
return 'Hello, ' + person;
}
hello.html फ़ाइल बनाएँ
<!doctype html>
<html>
<head>
<title>Hello World in TypeScript</title>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="config.js"></script>
<script>
window.addEventListener('load', function() {
System.import('./hello.ts').then(function(hello) {
document.body.innerHTML = hello.greeter('World');
});
});
</script>
</head>
<body>
</body>
</html>
बनाएं config.js - SystemJS विन्यास फाइल
System.config({
packages: {
"plugin-typescript": {
"main": "plugin.js"
},
"typescript": {
"main": "lib/typescript.js",
"meta": {
"lib/typescript.js": {
"exports": "ts"
}
}
}
},
map: {
"plugin-typescript": "node_modules/plugin-typescript/lib/",
/* NOTE: this is for npm 3 (node 6) */
/* for npm 2, typescript path will be */
/* node_modules/plugin-typescript/node_modules/typescript */
"typescript": "node_modules/typescript/"
},
transpiler: "plugin-typescript",
meta: {
"./hello.ts": {
format: "esm",
loader: "plugin-typescript"
}
},
typescriptOptions: {
typeCheck: 'strict'
}
});
नोट: यदि आप loader: "plugin-typescript" जाँच नहीं करना चाहते हैं, तो loader: "plugin-typescript" हटा दें loader: "plugin-typescript" और config.js से typescriptOptions । यह भी ध्यान दें कि यह जावास्क्रिप्ट कोड की जाँच कभी नहीं करेगा, विशेष कोड में <script> टैग में html उदाहरण में।
झसे आज़माओ
npm install live-server
./node_modules/.bin/live-server --open=hello.html
इसे उत्पादन के लिए बनाएं
npm install systemjs-builder
build.js फ़ाइल बनाएँ:
var Builder = require('systemjs-builder');
var builder = new Builder();
builder.loadConfig('./config.js').then(function() {
builder.bundle('./hello.ts', './hello.js', {minify: true});
});
hello.ts से hello.js का निर्माण करें
node build.js
उत्पादन में इसका उपयोग करें
बस पहले उपयोग से पहले एक स्क्रिप्ट टैग के साथ hello.js लोड करें
hello-production.html फ़ाइल:
<!doctype html>
<html>
<head>
<title>Hello World in TypeScript</title>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="config.js"></script>
<script src="hello.js"></script>
<script>
window.addEventListener('load', function() {
System.import('./hello.ts').then(function(hello) {
document.body.innerHTML = hello.greeter('World');
});
});
</script>
</head>
<body>
</body>
</html>