모든 TypeScript 소스를보고 컴파일하는 방법은 무엇입니까?


84

애완 동물 프로젝트를 TypeScript로 변환하려고하는데 tsc유틸리티를 사용하여 파일을보고 컴파일 할 수없는 것 같습니다 . 도움말에는 -w스위치를 사용해야한다고 나와 있지만 *.ts일부 디렉터리의 모든 파일을 재귀 적으로 보고 컴파일 할 수없는 것 같습니다 . 이것은 무언가 tsc를 처리 할 수있을 것 같습니다 . 내 옵션은 무엇입니까?

답변:


123

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.


1
해당 솔루션에 감사드립니다. 작은 업데이트 하나 : 댓글을 제거 할 때까지 tsc오류가 발생했습니다error TS6050: Unable to open file 'tsconfig.json'.
Garrett McCullough

@gwmccull : 아, 여기에 추가 한 것만으로 독자들이 무엇인지 알 수 있습니다. 답변을 업데이트하겠습니다.
budhajeewa

의견이 도움이되었습니다. 왜 작동하지 않는지 알아내는 데 잠시 시간이 걸렸습니다. 새 메모도 작동합니다. 답변 해주셔서 감사합니다!
Garrett McCullough 2015 년

7
누군가가 그것을 찾는 경우를 대비하여. 참고 : github.com/Microsoft/TypeScript/wiki/tsconfig.json "tsconfig.json에"files "속성이 없으면 컴파일러는 기본적으로 모든 TypeScript (*. ts 또는 * .tsx) 파일을 포함합니다. 포함하는 디렉터리 및 하위 디렉터리에 있습니다. "files"속성이 있으면 지정된 파일 만 포함됩니다. "
캐리 워커

1
로 단일 소스 디렉토리를 설정하는 대신 compilerOptions.rootDirtsconfig의 include속성을 사용하여 여러 소스 디렉토리를 지정할 수 있습니다 .{ "compilerOptions": { ...myOptions }, "include": [ "src", "otherSrc" ] }
JP Lew

27

TypeScript 1.5 베타는 tsconfig.json이라는 구성 파일에 대한 지원을 도입했습니다. 이 파일에서 컴파일러를 구성하고 코드 형식화 규칙을 정의 할 수 있으며 더 중요한 것은 프로젝트의 TS 파일에 대한 정보를 제공하는 것입니다.

올바르게 구성되면 tsc 명령을 실행하고 프로젝트의 모든 TypeScript 코드를 컴파일하도록 할 수 있습니다.

파일의 변경 사항을 감시하도록하려면 tsc 명령에 --watch를 추가하면됩니다.

다음은 tsconfig.json 파일의 예입니다.

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

위의 예에서는 모든 .ts 파일을 프로젝트에 포함합니다 (재귀 적으로). 배열과 함께 "exclude"속성을 사용하여 파일을 제외 할 수도 있습니다.

자세한 내용은 http://www.typescriptlang.org/docs/handbook/tsconfig-json.html 설명서를 참조하십시오 .


2
glob 구문이 실제로 구현됩니까? 스키마에 없습니다
Serguzest 2015-08-20

2
사실 아닙니다. 그 이후로 나는 glob 패턴이 여전히 논의 중이라는 것을 발견했습니다. filesGlob은 Atom 편집기에서만 지원됩니다. 지금은 '파일'및 '제외'속성을 지정할 수 있습니다.
dSebastien 2015 년

2
에 눈을 유지하는 문제는 다음과 같다 : github.com/Microsoft/TypeScript/pull/3232
dSebastien

18

이 같은 모든 파일을 볼 수 있습니다

tsc *.ts --watch

5
"파일 '* .ts'찾을 수 없음"은 노드에서이 솔루션을 적용하면 얻을 수있는 것입니다. 이것에 대한 의견이 있으십니까?
Sami

8

기술적으로 말하면 여기에 몇 가지 옵션이 있습니다.

Sublime Text와 같은 IDE 및 Typescript 용 통합 MSN 플러그인을 사용하는 경우 : http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled. aspx 당신은 .ts소스를 .js자동으로 컴파일하는 빌드 시스템을 만들 수 있습니다 . 다음은이를 수행하는 방법에 대한 설명 입니다. TypeScript 용 Sublime 빌드 시스템을 구성하는 방법 .

.js파일 저장시 소스 코드를 대상 파일 로 컴파일하도록 정의 할 수도 있습니다 . : GitHub의에서 호스팅되는 숭고한 패키지가 https://github.com/alexnj/SublimeOnSaveBuild 이것은 단지 당신이 포함 할 필요가 일어날 수 있도록하는 ts에서 확장 SublimeOnSaveBuild.sublime-settings파일.

또 다른 가능성은 명령 줄에서 각 파일을 컴파일하는 것입니다. 다음과 같이 공백으로 구분하여 한 번에 여러 파일을 컴파일 할 수도 있습니다 tsc foo.ts bar.ts.. 이 스레드를 확인하십시오. 여러 소스 파일을 TypeScript 컴파일러에 어떻게 전달할 수 있습니까? ,하지만 첫 번째 옵션이 더 편리하다고 생각합니다.


6

tsc 컴파일러는 명령 줄에서 전달하는 파일 만 감시합니다. 그것은 것입니다 하지 사용하여 포함 된 파일보고 /// <sourcefile>참조. bash로 작업하는 경우 find를 사용하여 모든 *.ts파일 을 재귀 적으로 찾고 컴파일 할 수 있습니다.

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

6

이를 자동화하기 위해 grunt를 사용하는 방법을 살펴보십시오. 여기에는 수많은 튜토리얼이 있지만 여기에 빠른 시작이 있습니다.

다음과 같은 폴더 구조의 경우 :

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

다음을 사용하여 예제 폴더에서 typescript를 쉽게보고 작업 할 수 있습니다.

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"
  }
}

그리고 grunt 파일 :

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

3

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 >  

참조 : TypeScript 파일을 자동으로 감시하고 컴파일합니다 .


1

오늘 나는 당신과 같은 문제를 위해이 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"
    />

Webstorm을 사용하여 작업중인 TypeScript 용 PureMVC 프로젝트 에서 사용됩니다.


개미 마이크로 스크립트? 당신은 ....이 솔루션의 일부로서 그 사용 방법을 설명하는 답을 확장 할 수 있습니다
random_user_name

간단한 예제를 제공하는 블로그 게시물을 만들고 여기에 링크 해 보겠습니다. 여기 기다릴 수 없다면 것은 내가 그것을 사용하고 프로젝트이다 github.com/tekool/puremvc-typescript-singlecore 전체 Ant 빌드 파일이있는 : github.com/tekool/puremvc-typescript-singlecore/blob/ master /…
Tekool 2010 년

0

편집 : 참고, 이것은 typescript 소스에 여러 tsconfig.json 파일이있는 경우입니다. 내 프로젝트의 경우 각 tsconfig.json 파일이 다른 이름의 .js 파일로 컴파일됩니다. 이렇게하면 모든 타이프 스크립트 파일을 정말 쉽게 볼 수 있습니다.

모든 tsconfig.json 파일을 찾아서 백그라운드에서 실행하는 달콤한 bash 스크립트를 작성했습니다. 그런 다음 터미널을 CTRL + C하면 실행중인 모든 typescript watch 명령이 닫힙니다.

이것은 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

유용한 리소스 :


Bash에서 파일 경로 문자열에 공백을 사용하는 방법 : stackoverflow.com/a/16703720/9800782
Matt Wyndham
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.