Typescript: Emitは空の行を保持しません

背景情報を追加しています...新しいコンパイラがすべての空白行を削除する理由は、これが_一貫して_実行できる唯一のことだからです。 空白行の保存は、クラスやモジュールの宣言など、書き換えの対象となる構造に関しては、常にヒットまたはミスになります。 コメントの保存についても、まったく同じ問題に直面しています。 ですから、私はこれを解決することに共感していますが、それは簡単なことではありません。

@NoelAbrahamsデバッグ時にどのような問題が発生するのか

@ahejlsberg @NoelAbrahams元のCodePlexプロジェクトで

行の保存は主に、古いコードを保存するときに改行を再利用し、変換を行うときに相対的な間隔を使用する機能です。 すなわちあなたが持っている場合：

module M {
}
module N {
}

次に、「N」のIIFEを発行するときは、「書き直しているモジュールと前の構文要素の間の雑学クイズを維持する必要があります」と言います。

コメント/改行を高レベルの忠実度で保持するエミッタプロトタイプがどのように機能するかについての前後は次のとおりです。

https://typescript.codeplex.com/SourceControl/latest#tests/Fidelity/emitter2/ecmascript5/Parser.ts
https://typescript.codeplex.com/SourceControl/latest#tests/Fidelity/emitter2/ecmascript5/Parser.ts.expected

ここにも多くの例があります。
https://typescript.codeplex.com/SourceControl/latest#tests/Fidelity/emitter/ecmascript5/

私が実装しなかった唯一の機能は「アライメント」でした。 つまり、元のコード（パラメーター宣言で非常に一般的）で何らかの方法で整列されたコードがある場合は、出力されたコードでもそれを保持する必要があります。

しかし、それを行うのは非常に簡単だったでしょう。

とは言うものの、TSからJSへの構造の変換はインデントを維持しようとしました。 あなたはここでそれを見ることができます：
https://typescript.codeplex.com/SourceControl/latest#tests/Fidelity/emitter/ecmascript5/ClassDeclaration/ClassDeclaration2.ts
https://typescript.codeplex.com/SourceControl/latest#tests/Fidelity/emitter/ecmascript5/ClassDeclaration/ClassDeclaration2.ts.expected

ネストされたモジュールとクラスをIIFEに変換した後でも、ステートメントが（複数行にまたがっている場合でも）適切にインデントされていることに注意してください。

@ahejlsberg 、ブラウザでデバッグするときに重大な問題はありません。 実際のTypeScriptソースコードと正確に対応している場合は、JavaScriptコードをナビゲートし、ブレークポイントを設定するための行を簡単に見つけることができます。

私は個人的に空の行がなくても生きることができましたが、TSは_beautiful _ JavaScript（：smile :)を保存して

@ahejlsberg @NoelAbrahamsこの会話にわずかに関連する、ブラウザーでのデバッグに存在する1つの問題があります。 セッター/ゲッターチェーン（jqueryなど）またはチェーンプロミスを使用すると、変換中に新しいラインフィードが失われます。 そうは言っても、Arrow関数を使用する場合は大きな問題です。

例として：

(<any> x).a('#test')
    .b('test')
    .c(() => 'foo')
    .d(() => 'bar')
    .e(() => 5)
    .f(() => 6);

になる：

x.a('#test').b('test').c(function () { return 'foo'; }).d(function () { return 'bar'; }).e(function () { return 5; }).f(function () { return 6; });

ChromeとsourceMapsを使用しても、ブレークポイントはスキップされます。

http://www.typescriptlang.org/Playground#src =（％3Cany％3E％20x）.a（ '％23test'）％0A％20％20％20％20.b（ 'test'）％0A％ 09.c（（）％20％3D％3E％20'foo '）％0A％09.d（（）％20％3D％3E％20'bar'）％0A％09.e（（）％20 ％3D％3E％205）％0A％09.f（（）％20％3D％3E％206）％3B

@mtraynham 、実際、あなたが強調する問題は少し違うと思います。

以前のバージョンでは、インライン関数の本体は常に新しい行で発行されていました。

// TS
var x = () => 'foo';

// JS - old
var x = function () { 
             return 'foo'; 
       };

// JS - new
var x = function () { return 'foo'; };

私もこれが問題であることに気づきました。ブラウザでデバッグするときにブレークポイントを設定できるように、時々戻ってfunctionを作成する必要があります。

@NoelAbrahamsああ、私はこれとまったく同じ一時的な解決策を使用しています...これがこの問題の原因となる適切なバグであるかどうか（ラインフィードの消去）、または別のバグを開く必要がありますか？

別号の＃2259を作成しました。

javascript開発コミュニティをtypescriptに移行することを検討しているエンジニアリングディレクターとして、新しい行機能は本当に役立ちます。 typescriptの主な魅力の1つは、typescriptで生成されたJavascriptで作成されたコードの可読性と構造を維持することでした。

最近の更新と「--removeComments」コマンドラインディレクティブの追加でコメントが保持されているのを見るのは素晴らしいことです。

@timjmartelと同様の理由で、これも必要です。開発者は、発行されたJSが_見栄えが良い_ように見えると、採用に対する抵抗が少なくなります。 （少なくとも垂直方向の）空白を保持すると、コードはマシンによって生成されたように見えなくなり、人間によって書かれたidomaticJSコードのように見えます。

私たちのチームがTSを放棄し、代わりにトランスパイルされたJSを続行することを決定した場合、人間に優しい空白があれば、放出されたJSソースを採用する方がはるかに簡単です。

空の行に関しては、ヒットまたはミスした場合でも、今のところ、それらを放出させることは可能でしょうか？ このような実験的な機能は、「-keepEmptyLines」オプションを使用して要求できます。優れたJSを使用することはそれほど重要ではありませんが、より読みやすいJSを使用することは重要です。

連鎖関数呼び出しに関して、ユーザーがブレークポイントを設定できるようにするために、lineを1回呼び出すことは可能でしょうか？ 繰り返しになりますが、この機能が別の「ヒットまたはミス」である場合は、「-oneCallForLine」オプションを使用して尋ねることができます。

ご清聴ありがとうございました。

実際、連鎖関数呼び出しはソースコードの美化機能によって分割される可能性があるため、そのような機能をTypeScriptに埋め込むことは意味がありません。

これはそれほど難しいことではなく、tsconfig.jsonにオプションがあるだけではいけません

preserveWhitespace: true/false

？

しかし、私はこれをコンパイラオプションとして見ていません： https ：

私は気がついた。 空白を保持しない理由の1つは、.tsではなく.jsを誤って編集するのを防ぐのに役立つからです。 やるべきことの1つは、.jsファイルを読み取り専用/実行専用として書き出すことだと思います。 したがって、これは問題ではないかもしれません。

そうは言っても、tscが.jsファイルを読み取り専用/実行専用として書き出すとは思わないのですが、これを行うようにtscを構成する方法はありますか？

いいえ、現時点ではありません。 ただし、別の問題を自由に開いてください。

@DanielRosenwasser空白を保持したい場合は、別の問題を開く必要があると

これがあるといいですね。

+1

+1

+1

群衆はpreserveWhitespace: true/false望んでいます
@ORESoftware ++

これが重要な理由は、TypeScriptがJSに「正常に劣化する」ことになっているためです。 今のところ、特にTypeScriptを作成する場合は、JSを少し読みやすくする新しい行を保持できませんが、JSを別の場所に配信することになっています。

+1 preserveWhitespace: true/false

一時的なハック

esformatterを使用して

次の構成ファイルを使用します。

{
  "lineBreak": {
    "before": {
      "FunctionDeclaration": ">=2",
      "FunctionDeclarationOpeningBrace": 0,
      "FunctionDeclarationClosingBrace": 1,
      "MethodDefinition": ">=2",
      "ClassDeclaration": ">=2"
    },
    "after": {
      "FunctionDeclaration": ">=2",
      "FunctionDeclarationOpeningBrace": 1,
      "MethodDefinitionClosingBrace": ">=2",
      "ClassClosingBrace": ">=2"
    }
  }
}

@mtraynhamあなたの例：

(<any> x).a('#test')
    .b('test')
    .c(() => 'foo')
    .d(() => 'bar')
    .e(() => 5)
    .f(() => 6);

最新のコンパイラを使用すると、このJSが生成されます。

x.a('#test')
    .b('test')
    .c(function () { return 'foo'; })
    .d(function () { return 'bar'; })
    .e(function () { return 5; })
    .f(function () { return 6; });

（TS PlayGround https://goo.gl/JViurrを参照）

TSバージョン1.1（この問題が作成されたTypeScriptのバージョン）以降、多くの変更がありました。 たぶん、この問題は解決できますか？ @ahejlsberg ？

@ valera-rozuvan代わりに＃2259を開きました。 私の問題はラインフィードに関連していましたが、このバグで説明されているのとまったく同じ問題ではありませんでした。 ＃2259はしばらく前に閉鎖されました（2015年5月）。

これはbril- andrewesformatter構成ですが、バグが修正されています（クラス宣言にimportという単語が含まれている場合、改行はありませんでした）。

{
    "lineBreak": {
        "before": {
            "FunctionDeclaration": ">=2",
            "FunctionDeclarationOpeningBrace": 0,
            "FunctionDeclarationClosingBrace": 1,
            "MethodDefinition": ">=2",
            "ClassDeclaration": ">=2",
            "ExportNamedDeclaration": 2
        },
        "after": {
            "FunctionDeclaration": ">=2",
            "FunctionDeclarationOpeningBrace": 1,
            "MethodDefinitionClosingBrace": ">=2",
            "ClassClosingBrace": ">=2"
        }
    }
}

esformatterを使用しても問題全体が解決するとは思いません。 もちろん、関数などの周りに空白行を自動的に挿入できます。しかし、私にとって、関数内の空白行はさらに重要です。 散文の段落のような空白行を使用して、個々の考えをグループ化します。

関数内のこれらの空白行は、関数の構造を伝えるのに役立ちます。 それらがないと、読みやすさが損なわれることがわかります。

@ahejlsberg ts-jestを使用すると、ユニットテストの出力に誤った行番号が表示されます。この問題は、js出力で空の行が削除されたことが原因のようです。 最終的なjsにこれらの行を残すことがなぜそれほど難しいのか興味があります。 これについて他に情報はありますか？ どうにかしてこれを実現するのを手伝ってもらえますか？ :)

それとも、すでにマージされていて、まだリリースされていませんか？ -> V4 Next Bigバージョン＃3143

@JimTheManソースマップを使用する場合は、 source-map-supportパッケージを使用すると、出力で正しいスタックトレースを取得できます。

私もこの問題に遭遇します。 差分パッチを作成し、パッチの空白の変更を元に戻すことで回避策を考え出しました。 jsdiffを使用すると、構造化パッチオブジェクトを作成し、必要に

import * as diff from 'diff';

const patch =
      diff.parsePatch(diff.createPatch('file', oldText, newText, '', ''));
const hunks = patch[0].hunks;
for (let i = 0; i < hunks.length; ++i) {
  let lineOffset = 0;
  const hunk = hunks[i];
  hunk.lines = hunk.lines.map(line => {
    if (line === '-') {
      lineOffset++;
      return ' ';
    }
    return line;
  });
  hunk.newLines += lineOffset;
  for (let j = i + 1; j < hunks.length; ++j) {
    hunks[j].newStart += lineOffset;
  }
}
return diff.applyPatch(oldText, patch);

この回避策を使用すると、元のファイルのすべての改行を保持できます。

@zeroliuコンパイルステップで顕著な時間遅延が発生しますか？

@ahejlsbergこの問題を修正する価値があると思いますか？

@ valera-rozuvanは、プロジェクトのサイズによって異なります。 100〜1000 LOCの10個のファイルをトランスパイルするユースケースでは、目立った遅延は発生しません。

ここにまだ解決策はありますか？ 私もこのトラブルに巻き込まれます...

チームメイトの@emadumが、tscがコメントを保持できることを私に思い出させたとき、私はコンパイラ自体でこれを修正しようとしていた途中でした。 これは、改行を保存するというかなりまともな仕事をしているように見える小さな一口パイプラインです：

const gulp = require('gulp');
const ts = require('gulp-typescript');
const through = require('through2');

function preserveNewlines() {
  return through.obj(function(file, encoding, callback) {
    const data = file.contents.toString('utf8');
    const fixedUp = data.replace(/\n\n/g, '\n/** THIS_IS_A_NEWLINE **/');
    file.contents = Buffer.from(fixedUp, 'utf8');
    callback(null, file);
  });
}

function restoreNewlines() {
  return through.obj(function(file, encoding, callback) {
    const data = file.contents.toString('utf8');
    const fixedUp = data.replace(/\/\*\* THIS_IS_A_NEWLINE \*\*\//g, '\n');
    file.contents = Buffer.from(fixedUp, 'utf8');
    callback(null, file);
  });
}

gulp.task('default', function () {
  return gulp.src('src/**/*.ts')
    .pipe(preserveNewlines())
    .pipe(ts({
      removeComments: false
    }))
    .pipe(restoreNewlines())
    .pipe(gulp.dest('lib'));
});

もっと賢いコメントをすれば誤検知を防ぐことができると思いますが、今日はうまくいくようです。 これは比較的小さなファイルでのみテストしましたが、パフォーマンスのオーバーヘッドは最小限でした。

hth

@mbroadst

私はあなたのアイデアをベースとして使用することになり、最終的にはnpmモジュールになるまで拡張しました。
https://www.npmjs.com/package/gulp-preserve-typescript-whitespace

私はReadmeであなたの投稿をクレジットしました、うまくいけばあなたは気にしません:)