🐳 1.3タイプのスクリプトコンパイラ

タイプスクリプトコンパイラは、IDEにインストールすることも、独立したIDEプラグインをインストールすることもできます.
本の中ではNodejs実行時を使用します.(ノードとNPMをインストールしてバージョンを確認します.)
タイプスクリプトグローバルインストール

npm install -g typescript
tsc -v

🌏 コンパイルプロセスについて説明します。

// 1_1.ts
function getFinalPrice(price: number, discount: number){ // 함수 인자에 타입정의.
    return price - price/discount;
}

console.log(getFinalPrice(100, 10)); // 올바른 호출
console.log(getFinalPrice(100, '10%')); // 잘못된 호출

tsc 1_1

コンパイルエラーが表示されますが、jsファイルが生成されます.

👉 どうしたんですか。

JavaScriptの観点から見ると、1.jsは有効です.ただし、実際のタイプのスクリプトプロジェクトでは、エラーのあるファイルを生成できません.
タイプスクリプトコンパイラには20以上のオプションがあります.noEmitOnErrorを見てみましょう.

👉 noEmitOnError

生成されたjsファイルを削除し、noEmitOnErrorを追加してコマンドを実行します.

tsc 1_1 --noEmitOnError true

エラーを修正しないとjsファイルが生成されていないことがわかります.
「無制限エラー」を使用すると、タイプスクリプトコンパイラは、すべてのエラーが修正されるまで、以前に生成されたjsファイルを上書きしません.

👉 --t

特定のJavaScriptバージョンを指します.ES 5、ES 6以降.

tsc --t ES5 1_1

生成されたJSファイル

function getFinalPrice(price, discount) {
    return price - price / discount;
}
console.log(getFinalPrice(100, 10)); // 올바른 호출
// console.log(getFinalPrice(100, '10%')); // 잘못된 호출

👉 tsconfig.json

タイプスクリプトコンパイラでは、ソース、最終ディレクトリ、ターゲットなどのオプションをプリセットできます.
プロジェクトフォルダにtsconfigを設定します.jsonファイルがある場合は、tscコマンドを入力します.tsconfig.jsonのすべてのオプションを読み込みます.

{
    "compilerOptions":{
        "baseUrl":"src", // src폴더 내 모든 .ts파일을 컴파일
		"outDir":"./dist", // dist 폴더에 생성된 .js파일을 저장
        "noEmitOnError":true, // 컴파일 오류 발생 시, js파일 생성 X
        "target":"es5" // es5로 컴파일
    };
}

❗コンパイラのオプションオブジェクトは文法チェックにも使用されます

🌏 実習

{
    "compilerOptions":{
        "noEmitOnError":true, // 컴파일 오류 발생 시, js파일 생성 X
        "target":"es5", // es5로 컴파일
        "watch":true // 컴파일러가 타입스크립트 파일이 변경될 때마다 다시 컴파일함.
    }
}

上のファイルを1と同じパス上に置き、次の端末コマンドを実行します.

tsc

watchモードのため、コンパイラは終了しないことがわかります.
main.jsファイルは作成されません.
エラーが修正された場合main.jsも変更されました.(穴あけ器)
❗スクリプトプロジェクトを最初に起動するときは、tsc-initコマンドを使用してフォルダ内でプロジェクトを初期化します.生成されたtsconfig.jsonには、ほとんどのコードがコメントされているすべてのコンパイラオプションが含まれています.必要に応じてコメント処理を削除します.

📘 リファレンス

bit.ly/384AgfN