Làm thế nào để xem và biên dịch tất cả các nguồn TypeScript?

Tôi đang cố gắng chuyển đổi một dự án thú cưng sang TypeScript và dường như không thể sử dụng tsctiện ích để xem và biên dịch các tệp của mình. Trợ giúp nói rằng tôi nên sử dụng công -wtắc, nhưng có vẻ như nó không thể xem và biên dịch tất cả *.tscác tệp trong thư mục nào đó một cách đệ quy. Điều này có vẻ như một cái gì đó tscsẽ có thể xử lý. Những lựa chọn của tôi là gì?

Tạo một tệp có tên tsconfig.jsontrong gốc dự án của bạn và bao gồm các dòng sau trong đó:

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

Xin lưu ý rằng đó outDirphải là đường dẫn của thư mục nhận các tệp JS đã biên dịch và rootDirphải là đường dẫn của thư mục chứa các tệp nguồn (.ts) của bạn.

Mở một thiết bị đầu cuối và chạy tsc -w, nó sẽ biên dịch bất kỳ .tstệp nào trong srcthư mục vào .jsvà lưu trữ chúng trong ts-builtthư mục.

TypeScript 1.5 beta đã giới thiệu hỗ trợ cho tệp cấu hình có tên tsconfig.json. Trong tệp đó, bạn có thể định cấu hình trình biên dịch, xác định quy tắc định dạng mã và quan trọng hơn đối với bạn, cung cấp cho bạn thông tin về các tệp TS trong dự án của bạn.

Sau khi được cấu hình chính xác, bạn có thể chỉ cần chạy lệnh tsc và yêu cầu nó biên dịch tất cả mã TypeScript trong dự án của bạn.

Nếu bạn muốn nó xem các tệp để biết các thay đổi thì bạn chỉ cần thêm --watch vào lệnh tsc.

Đây là một tệp tsconfig.json mẫu

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

Trong ví dụ trên, tôi bao gồm tất cả các tệp .ts trong dự án của mình (một cách đệ quy). Lưu ý rằng bạn cũng có thể loại trừ tệp bằng thuộc tính "loại trừ" với một mảng.

Để biết thêm thông tin, hãy tham khảo tài liệu: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

bạn có thể xem tất cả các tệp như thế này

tsc *.ts --watch

Về mặt kỹ thuật, bạn có một số tùy chọn ở đây:

Nếu bạn đang sử dụng một IDE như Sublime Text và plugin MSN tích hợp cho Typescript: http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled. aspx bạn có thể tạo một hệ thống xây dựng biên dịch .tsmã nguồn thành .jstự động. Đây là giải thích cách bạn có thể làm điều đó: Cách cấu hình Hệ thống xây dựng Sublime cho TypeScript .

Bạn có thể xác định thậm chí biên dịch mã nguồn thành .jstệp đích khi lưu tệp. Có một gói sublime được lưu trữ trên github: https://github.com/alexnj/SublimeOnSaveBuild giúp điều này xảy ra, chỉ bạn cần đưa tsphần mở rộng vào SublimeOnSaveBuild.sublime-settingstệp.

Một khả năng khác là biên dịch từng tệp trong dòng lệnh. Bạn có thể biên dịch thậm chí nhiều file cùng một lúc bằng cách tách chúng bằng khoảng trống thích vậy: tsc foo.ts bar.ts. Kiểm tra chuỗi này: Làm cách nào để chuyển nhiều tệp nguồn vào trình biên dịch TypeScript? , nhưng tôi nghĩ tùy chọn đầu tiên tiện dụng hơn.

Trình biên dịch tsc sẽ chỉ xem các tệp mà bạn chuyển qua dòng lệnh. Nó sẽ không xem các tệp được bao gồm bằng cách sử dụng /// <sourcefile>tham chiếu. Nếu bạn đang làm việc với bash, bạn có thể sử dụng find để tìm một cách đệ quy tất cả *.tscác tệp và biên dịch chúng:

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

Hãy xem xét việc sử dụng grunt để tự động hóa việc này, có rất nhiều hướng dẫn xung quanh, nhưng đây là cách bắt đầu nhanh.

Đối với cấu trúc thư mục như:

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

Bạn có thể xem và làm việc với bảng chữ dễ dàng từ thư mục mẫu với:

npm install
grunt

Với 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"
  }
}

Và một tập tin càu nhàu:

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']);
}

tsc 0.9.1.1 dường như không có tính năng xem đồng hồ .

Bạn có thể sử dụng tập lệnh PowerShell như sau:

#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 >  

Tham khảo: Tự động xem và biên dịch các tệp TypeScript .

Hôm nay tôi đã thiết kế Ant MacroDef này cho cùng một vấn đề như của bạn:

    <!--
    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>

Sử dụng nó trong tệp bản dựng của bạn với:

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

Nó được sử dụng trong dự án PureMVC cho TypeScript mà tôi đang làm việc tại thời điểm đó bằng cách sử dụng Webstorm.

CHỈNH SỬA: Lưu ý, điều này xảy ra nếu bạn có nhiều tệp tsconfig.json trong nguồn bản ghi của mình. Đối với dự án của tôi, chúng tôi có mỗi tệp tsconfig.json được biên dịch thành tệp .js có tên khác. Điều này làm cho việc xem mọi tệp bản ghi thực sự dễ dàng.

Tôi đã viết một tập lệnh bash ngọt ngào để tìm tất cả các tệp tsconfig.json của bạn và chạy chúng ở chế độ nền, sau đó nếu bạn CTRL + C, thiết bị đầu cuối sẽ đóng tất cả các lệnh xem bảng chữ đang chạy.

Điều này được thử nghiệm trên MacOS, nhưng sẽ hoạt động ở bất kỳ nơi nào hỗ trợ BASH 3.2.57. Các phiên bản trong tương lai có thể đã thay đổi một số thứ, vì vậy hãy cẩn thận!

#!/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

Các nguồn hữu ích:

• bash: diễn giải biến chuỗi thành tên / đường dẫn tệp
• Một biến được sửa đổi bên trong vòng lặp while không được nhớ
• https://www.cyberciti.biz/faq/search-for-files-in-bash/
• https://opensource.com/article/18/5/you-dont-know-bash-intro-bash-arrays
• https://linuxize.com/post/bash-concatenate-strings/
• https://www.cyberciti.biz/faq/bash-for-loop/
• https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
• /unix/144298/delete-the-last-character-of-a-string-using-string-manipulation-in-shell-script
• Các biến shell ký hiệu đô la đặc biệt là gì?