सभी टाइपस्क्रिप्ट स्रोतों को कैसे देखें और संकलित करें?

Question 1

मैं एक पालतू प्रोजेक्ट को टाइपस्क्रिप्ट में बदलने की कोशिश कर रहा हूं और लगता है कि यह tscमेरी फाइलों को देखने और संकलित करने के लिए उपयोगिता का उपयोग करने में सक्षम नहीं है । मदद कहती है कि मुझे -wस्विच का उपयोग करना चाहिए , लेकिन ऐसा लगता है कि यह *.tsकिसी निर्देशिका में सभी फ़ाइलों को पुन: देखने और संकलित नहीं कर सकता है । ऐसा लगता है कि कुछ tscको संभालने में सक्षम होना चाहिए। मेरे विकल्प क्या हैं?

Question 2

tsconfig.jsonअपनी परियोजना के रूट में एक फ़ाइल बनाएँ और उसमें निम्न पंक्तियाँ शामिल करें:

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "module": "commonjs",
        "target": "ES5",
        "outDir": "ts-built",
        "rootDir": "src"
    }
}

कृपया ध्यान दें कि outDirसंकलित JS फ़ाइलों को प्राप्त करने rootDirके लिए निर्देशिका का पथ होना चाहिए , और आपके स्रोत (.ts) फ़ाइलों वाली निर्देशिका का पथ होना चाहिए।

एक टर्मिनल खोलें और चलाएं tsc -w, यह निर्देशिका में किसी भी .tsफ़ाइल को संकलित करेगा और उन्हें srcनिर्देशिका में .jsसंग्रहीत करेगा ts-built।

Question 3

टाइपस्क्रिप्ट 1.5 बीटा ने tsconfig.json नामक एक कॉन्फ़िगरेशन फ़ाइल के लिए समर्थन पेश किया है। उस फ़ाइल में आप संकलक को कॉन्फ़िगर कर सकते हैं, कोड स्वरूपण नियमों को परिभाषित कर सकते हैं और आपके लिए और अधिक महत्वपूर्ण बात, इसे अपनी परियोजना में टीएस फ़ाइलों के बारे में जानकारी प्रदान कर सकते हैं।

एक बार सही ढंग से कॉन्फ़िगर होने के बाद, आप बस tsc कमांड चला सकते हैं और इसे अपने प्रोजेक्ट के सभी टाइपस्क्रिप्ट कोड को संकलित कर सकते हैं।

यदि आप इसे परिवर्तन के लिए फ़ाइलें देखना चाहते हैं, तो आप बस tsc कमांड में वॉच जोड़ सकते हैं।

यहाँ एक उदाहरण tsconfig.json फ़ाइल है

{
"compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false
},
"include": [
    "**/*"
],
"exclude": [
    "node_modules",
    "**/*.spec.ts"
]}

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

अधिक जानकारी के लिए, दस्तावेज़ देखें: http://www.typescriptlang.org/docs/handbook/tsconfig.json.html

Question 4

आप इस तरह से सभी फाइलों को देख सकते हैं

tsc *.ts --watch

Question 5

तकनीकी रूप से आपके पास यहां कुछ विकल्प हैं:

यदि आप टाइपस्क्रिप्ट के लिए उदात्त पाठ और एकीकृत एमएसएन प्लगइन की तरह एक आईडीई का उपयोग कर रहे हैं: http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typartcript-enabled। aspx आप एक बिल्ड सिस्टम बना सकते हैं जो .tsस्रोत को .jsस्वचालित रूप से संकलित करता है । यहाँ स्पष्टीकरण है कि आप इसे कैसे कर सकते हैं: टाइपस्क्रिप्ट के लिए एक उदात्त बिल्ड सिस्टम को कॉन्फ़िगर कैसे करें ।

आप .jsफाइल को सेव करने के लिए सोर्स कोड को फाइल पर डेस्टिनेशन कोड पर भी कंप्लीट कर सकते हैं । Github पर होस्ट किया गया एक उदात्त पैकेज है: https://github.com/alexnj/SublimeOnSaveBuild जो इसे बनाते हैं, केवल आपको फ़ाइल tsमें एक्सटेंशन शामिल करना होगा SublimeOnSaveBuild.sublime-settings।

कमांड लाइन में प्रत्येक फाइल को संकलित करने की एक और संभावना होगी। आप एक साथ कई फ़ाइलों को एक साथ संकलन कर सकते हैं, जैसे कि रिक्त स्थान के साथ उन्हें अलग करके tsc foo.ts bar.ts:। इस थ्रेड को जांचें: मैं टाइपस्क्रिप्ट कंपाइलर को कई स्रोत फाइलें कैसे पास कर सकता हूं? , लेकिन मुझे लगता है कि पहला विकल्प अधिक आसान है।

Question 6

Tsc संकलक केवल उन फाइलों को देखेगा जिन्हें आप कमांड लाइन पर पास करते हैं। यह उन फ़ाइलों को नहीं देखेगा जिन्हें एक /// <sourcefile>संदर्भ का उपयोग करके शामिल किया गया है । यदि आपका काम बैश के साथ हो रहा है, तो आप सभी *.tsफ़ाइलों को पुन: प्राप्त करने और उन्हें संकलित करने के लिए उपयोग कर सकते हैं:

find . -name "*.ts" | xargs tsc -w

Question 7

इसे स्वचालित करने के लिए ग्रंट का उपयोग करने पर ध्यान दें, आसपास कई ट्यूटोरियल हैं, लेकिन यहां एक त्वरित शुरुआत है।

एक फ़ोल्डर संरचना के लिए जैसे:

blah/
blah/one.ts
blah/two.ts
blah/example/
blah/example/example.ts
blah/example/package.json
blah/example/Gruntfile.js
blah/example/index.html

आप उदाहरण फ़ोल्डर से टाइपस्क्रिप्ट के साथ आसानी से देख सकते हैं और काम कर सकते हैं:

npm install
grunt

Package.json के साथ:

{
  "name": "PROJECT",
  "version": "0.0.1",
  "author": "",
  "description": "",
  "homepage": "",
  "private": true,
  "devDependencies": {
    "typescript": "~0.9.5",
    "connect": "~2.12.0",
    "grunt-ts": "~1.6.4",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-connect": "~0.6.0",
    "grunt-open": "~0.2.3"
  }
}

और एक गंभीर फ़ाइल:

module.exports = function (grunt) {

  // Import dependencies
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-open');
  grunt.loadNpmTasks('grunt-ts');

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    connect: {
      server: {  // <--- Run a local server on :8089
        options: {
          port: 8089,
          base: './'
        }
      }
    },
    ts: {
      lib: { // <-- compile all the files in ../ to PROJECT.js
        src: ['../*.ts'],
        out: 'PROJECT.js',
        options: {
          target: 'es3',
          sourceMaps: false,
          declaration: true,
          removeComments: false
        }
      },
      example: {  // <--- compile all the files in . to example.js
        src: ['*.ts'],
        out: 'example.js',
        options: {
          target: 'es3',
          sourceMaps: false,
          declaration: false,
          removeComments: false
        }
      }
    },
    watch: { 
      lib: { // <-- Watch for changes on the library and rebuild both
        files: '../*.ts',
        tasks: ['ts:lib', 'ts:example']
      },
      example: { // <--- Watch for change on example and rebuild
        files: ['*.ts', '!*.d.ts'],
        tasks: ['ts:example']
      }
    },
    open: { // <--- Launch index.html in browser when you run grunt
      dev: {
        path: 'http://localhost:8089/index.html'
      }
    }
  });

  // Register the default tasks to run when you run grunt
  grunt.registerTask('default', ['ts', 'connect', 'open', 'watch']);
}

Question 8

tsc 0.9.1.1 में घड़ी की सुविधा नहीं है।

आप एक PowerShell स्क्रिप्ट का उपयोग कर सकते हैं:

#watch a directory, for changes to TypeScript files.  
#  
#when a file changes, then re-compile it.  
$watcher = New-Object System.IO.FileSystemWatcher  
$watcher.Path = "V:\src\MyProject"  
$watcher.IncludeSubdirectories = $true  
$watcher.EnableRaisingEvents = $true  
$changed = Register-ObjectEvent $watcher "Changed" -Action {  
  if ($($eventArgs.FullPath).EndsWith(".ts"))  
  {  
    $command = '"c:\Program Files (x86)\Microsoft SDKs\TypeScript\tsc.exe" "$($eventArgs.FullPath)"'  
    write-host '>>> Recompiling file ' $($eventArgs.FullPath)  
    iex "& $command"  
  }  
}  
write-host 'changed.Id:' $changed.Id  
#to stop the watcher, then close the PowerShell window, OR run this command:  
# Unregister-Event < change Id >

Ref: टाइपस्क्रिप्ट फ़ाइलों को स्वचालित रूप से देखें और संकलित करें ।

Question 9

आज मैंने इस Ant MacroDef को आपकी जैसी ही समस्या के लिए डिज़ाइन किया है:

    <!--
    Recursively read a source directory for TypeScript files, generate a compile list in the
    format needed by the TypeScript compiler adding every parameters it take.
-->
<macrodef name="TypeScriptCompileDir">

    <!-- required attribute -->
    <attribute name="src" />

    <!-- optional attributes -->
    <attribute name="out" default="" />
    <attribute name="module" default="" />
    <attribute name="comments" default="" />
    <attribute name="declarations" default="" />
    <attribute name="nolib" default="" />
    <attribute name="target" default="" />

    <sequential>

        <!-- local properties -->
        <local name="out.arg"/>
        <local name="module.arg"/>
        <local name="comments.arg"/>
        <local name="declarations.arg"/>
        <local name="nolib.arg"/>
        <local name="target.arg"/>
        <local name="typescript.file.list"/>
        <local name="tsc.compile.file"/>

        <property name="tsc.compile.file" value="@{src}compile.list" />

        <!-- Optional arguments are not written to compile file when attributes not set -->
        <condition property="out.arg" value="" else='--out "@{out}"'>
            <equals arg1="@{out}" arg2="" />
        </condition>

        <condition property="module.arg" value="" else="--module @{module}">
            <equals arg1="@{module}" arg2="" />
        </condition>

        <condition property="comments.arg" value="" else="--comments">
            <equals arg1="@{comments}" arg2="" />
        </condition>

        <condition property="declarations.arg" value="" else="--declarations">
            <equals arg1="@{declarations}" arg2="" />
        </condition>

        <condition property="nolib.arg" value="" else="--nolib">
            <equals arg1="@{nolib}" arg2="" />
        </condition>

        <!-- Could have been defaulted to ES3 but let the compiler uses its own default is quite better -->
        <condition property="target.arg" value="" else="--target @{target}">
            <equals arg1="@{target}" arg2="" />
        </condition>

        <!-- Recursively read TypeScript source directory and generate a compile list -->
        <pathconvert property="typescript.file.list" dirsep="\" pathsep="${line.separator}">

            <fileset dir="@{src}">
                <include name="**/*.ts" />
            </fileset>

            <!-- In case regexp doesn't work on your computer, comment <mapper /> and uncomment <regexpmapper /> -->
            <mapper type="regexp" from="^(.*)$" to='"\1"' />
            <!--regexpmapper from="^(.*)$" to='"\1"' /-->

        </pathconvert>


        <!-- Write to the file -->
        <echo message="Writing tsc command line arguments to : ${tsc.compile.file}" />
        <echo file="${tsc.compile.file}" message="${typescript.file.list}${line.separator}${out.arg}${line.separator}${module.arg}${line.separator}${comments.arg}${line.separator}${declarations.arg}${line.separator}${nolib.arg}${line.separator}${target.arg}" append="false" />

        <!-- Compile using the generated compile file -->
        <echo message="Calling ${typescript.compiler.path} with ${tsc.compile.file}" />
        <exec dir="@{src}" executable="${typescript.compiler.path}">
            <arg value="@${tsc.compile.file}"/>
        </exec>

        <!-- Finally delete the compile file -->
        <echo message="${tsc.compile.file} deleted" />
        <delete file="${tsc.compile.file}" />

    </sequential>

</macrodef>

अपनी बिल्ड फ़ाइल में इसका उपयोग करें:

    <!-- Compile a single JavaScript file in the bin dir for release -->
    <TypeScriptCompileDir
        src="${src-js.dir}"
        out="${release-file-path}"
        module="amd"
    />

इस परियोजना में टाइपस्क्रिप्ट के लिए PureMVC का उपयोग किया जाता है, मैं उस समय वेबस्टॉर्म का उपयोग कर रहा हूं।

Question 10

संपादित करें: ध्यान दें, यह है यदि आपके पास अपने टाइपस्क्रिप्ट स्रोत में कई tsconfig.json फाइलें हैं। मेरी परियोजना के लिए हमारे पास प्रत्येक tsconfig.json फ़ाइल एक अलग नाम वाली .js फ़ाइल के लिए संकलित है। यह हर टाइपस्क्रिप्ट फ़ाइल को वास्तव में आसान बनाता है।

मैंने एक स्वीट बैश स्क्रिप्ट लिखी, जो आपकी सभी tsconfig.json फाइलों को ढूंढती है और उन्हें बैकग्राउंड में रन करती है, और फिर यदि आप CTRL + C टर्मिनल को चलाते हैं तो यह सभी रनिंग टाइपस्क्रिप्ट वॉच कमांड्स को बंद कर देगा।

यह MacOS पर परीक्षण किया गया है, लेकिन कहीं भी काम करना चाहिए कि BASH 3.2.57 समर्थित है। भविष्य के संस्करणों में कुछ चीजें बदल सकती हैं, इसलिए सावधान रहें!

#!/bin/bash
# run "chmod +x typescript-search-and-compile.sh" in the directory of this file to ENABLE execution of this script
# then in terminal run "path/to/this/file/typescript-search-and-compile.sh" to execute this script
# (or "./typescript-search-and-compile.sh" if your terminal is in the folder the script is in)

# !!! CHANGE ME !!!    
# location of your scripts root folder
# make sure that you do not add a trailing "/" at the end!!
# also, no spaces! If you have a space in the filepath, then
# you have to follow this link: https://stackoverflow.com/a/16703720/9800782
sr=~/path/to/scripts/root/folder
# !!! CHANGE ME !!!

# find all typescript config files
scripts=$(find $sr -name "tsconfig.json")

for s in $scripts
do
    # strip off the word "tsconfig.json"
    cd ${s%/*} # */ # this function gets incorrectly parsed by style linters on web
    # run the typescript watch in the background
    tsc -w &
    # get the pid of the last executed background function
    pids+=$!
    # save it to an array
    pids+=" "
done

# end all processes we spawned when you close this process
wait $pids

सहायक संसाधन: