TypeScriptコンパイラ( TSC )から始める

このポストは、シリーズと4の一部ですbook about TypeScript . これは、ゼロからバックエンドとフロントエンド上の完全なタイプスクリプトのアプリケーションを書くことをご案内します.シリーズは、誰にでも無料でPDF電子ブックとして利用可能です.

前の投稿からTypeScript - What Is All About And Why Should You Use It? 私たちは、タイプスクリプトがJavaScriptとプログラミング言語のスーパーセットであるということを知っています.しかし、どのように使用できますか?あなたがフロントエンドのJavaScriptで働いたならば、あなたはあなたのコードがWeb browser . バックエンドでは、コードはNode . どのようなtypescript?
TypesScriptには特別なプログラム、ツール-コンパイラが付属しています.コンパイラは1つのコードを別のコードに変換(変換)するプログラムです.

タイプスクリプトコンパイラとは

前に述べたように、TypeScriptコンパイラは、有効な型スクリプトコードをJavaScriptコードにコンパイル(変換)するツールです.また、型チェッカーであり、それは
タイプスクリプトをインストールするときnpm or Yarn グローバルに、TypeScriptコンパイラはローカルマシン上でTSCとして利用できます.

npm i -g typescript
tsc --version

TypeScriptコンパイラには、さまざまな種類のプロジェクトで使用する多くのフラグとオプションがあります.フロントエンドプロジェクトで使用できるライブラリのようなReact . インAngular それはすでにアングルのtoolchainの中で使用されます.また、バックエンドの開発でTSCを使用することができますNode . こちらがポストですHow To Setup Node TypeScript Workflow .
このポストでは、いくつかの一般的なオプションでTSCを使用する方法を調査します.

用途

簡単な例でTSCを使います.それはcommand-line interface 私たちの最初の名前とユーザー名を入力し、挨拶を私たちに依頼するアプリ.ノードです.JSアプリケーションとノードで実行します.ノードをインストールしていない場合、またはローカルマシン上で15未満のバージョンを持つノードがある場合、POSTをチェックしてくださいHow To Install or Update Node by Using nvm (Node Version Manager) .
タイプスクリプトコンパイラを実行する方法がわからないなら、私はポストをチェックすることを勧めますDetecting Errors Before Running Code With TypeScript . 私たちは、そのポストにおいて、しかし、小さな違いと同じ例を使います.
TSCイントロと呼ばれるフォルダを作りましょう.まず、2つのヘルパーモジュール(ファイル)を作成します.
createequesators.TS

import { createInterface } from "readline";
import { promisify } from "util";

interface Questioner {
  ask(text: string): Promise<string>;
  finishUp(): void;
}

export function createQuestioner(): Questioner {
  const rlInterface = createInterface({
    input: process.stdin,
    output: process.stdout,
  });

  const ask = promisify(rlInterface.question).bind(rlInterface);

  const finishUp = () => {
    rlInterface.close();
  };

  return {
    ask,
    finishUp,
  };
}

挨拶.TS

export function greeting(firstName: string, username: string) {
  console.log(`Hello, ${firstName} (@${username})!`);
}

これらの2つの機能は、エントリポイントです我々のアプリのメインモジュールで使用されます.メインファイルを作成しましょう.TS

import { createQuestioner } from "./createQuestioner";
import { greeting } from "./greeting";

async function main() {
  try {
    const questioner = createQuestioner();
    const firstName = await questioner.ask("Type your first name: ");
    const username = await questioner.ask("Type your username: ");

    greeting(firstName, username);

    questioner.finishUp();
  } catch (e) {
    console.error(e);
  }
}

main();

また、ローカルプロジェクト内のノードの種類宣言をdev依存性としてインストールする必要があります.タイプ宣言について知りませんWhat Are Type Declaration Files In TypeScript .

npm install --save-dev @types/node

コードにあまり集中しないでください.それは単なるタイプスクリプトコードの例ですが、まず第一に、私たちはtypescriptコンパイラを使用することに集中する必要があります.
よろしい.ここで、TypeScriptコンパイラを使用して、Typescriptコードをノードで実行するJavaScriptコードに変換します.

tsc main.ts

すごい!これでファイルmainをコンパイルしました.コマンドで実行できるJS :

node main.js

あなたは、我々が我々のフォルダに作成しなかった新しいファイルがあることに気がつきました:createequesators.jsと挨拶.jsファイルメインのみをコンパイルしますが.TSスクリプトは、メインで使用されたすべてのモジュールもコンパイルします.ts -挨拶.TSとcreateSequators.これらのモジュールからのコードは、ノードが実行したときに実行されますnode main.js .
あなたがノードで働いているならば.JSの前に、私たちが主にモジュールをインポートしたことに気付きます.使用するTSimport smth from 'module' ( ES Modules ) ないconst smth = require('module') ( CommonJS Modules ). もちろん、現代のノード.JSはECMAScriptモジュールで動作できます.しかしながら、CommonJSモジュールはまだノードでモジュールをインポートして、エクスポートする一般的な方法です.
では、どうやって動くのですか?その内容は、デフォルトでtypescriptがECMAScriptモジュールを使っているコードをCommonJSモジュールでJavaScriptコードにコンパイルすることです.コンパイルされたファイルを見てみましょう.
createequesators.js

"use strict";
exports.__esModule = true;
exports.createQuestioner = void 0;
var readline_1 = require("readline");
var util_1 = require("util");
function createQuestioner() {
    var rlInterface = readline_1.createInterface({
        input: process.stdin,
        output: process.stdout
    });
    var ask = util_1.promisify(rlInterface.question).bind(rlInterface);
    var finishUp = function () {
        rlInterface.close();
    };
    return {
        ask: ask,
        finishUp: finishUp
    };
}
exports.createQuestioner = createQuestioner;

挨拶.js

"use strict";
exports.__esModule = true;
exports.greeting = void 0;
function greeting(firstName, username) {
    console.log("Hello, " + firstName + " (@" + username + ")!");
}
exports.greeting = greeting;

コードはECMAScriptモジュールを使用しません!createequesatorsで.行20の関数createequesatorsは、CommonJSを使用してエクスポートされますexports.greeting = greeting; . あいさつ.JS : 7行目でコードが表示されますexports.greeting = greeting; これはCommonJSです.
OK、エクスポートはソートされます.モジュールのインポートについては?
ファイルを見てみましょう.js
ファイルが非常に大きいので、私は今すぐに重要でないコードをカットします

"use strict";
// some code here
exports.__esModule = true;
var createQuestioner_1 = require("./createQuestioner");
var greeting_1 = require("./greeting");
function main() {
    return __awaiter(this, void 0, void 0, function () {
        var questioner, firstName, username, e_1;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    _a.trys.push([0, 3, , 4]);
                    questioner = createQuestioner_1.createQuestioner();
                    return [4 /*yield*/, questioner.ask("Type your first name: ")];
                case 1:
                    firstName = _a.sent();
                    return [4 /*yield*/, questioner.ask("Type your username: ")];
                case 2:
                    username = _a.sent();
                    greeting_1.greeting(firstName, username);
                    questioner.finishUp();
                    return [3 /*break*/, 4];
                case 3:
                    e_1 = _a.sent();
                    console.error(e_1);
                    return [3 /*break*/, 4];
                case 4: return [2 /*return*/];
            }
        });
    });
}
main();

4行目と5行目(ファイル39 - 40)では、モジュールの挨拶とcreateequesatorsがCommonJSモジュールによってインポートされることがわかります.
偉大なことは、typescriptは非常に設定可能なツールであり、我々はecmascriptモジュールを使用してJavaScriptコードにtypescriptをコンパイルすることができます!
私たちがしなければならないすべては、オプション-- with - espeedというモジュールを使うことです.

tsc --module ESNext main.ts

値esnextは、typescriptがecmascript標準の最新バージョンにコードをコンパイルすることを意味します.コンパイルされたコードにECMAScriptモジュールを使用するためには、私たちのために動作します.
コンパイルされたファイルを見てみましょう.JS再び

// ...
import { createQuestioner } from "./createQuestioner";
import { greeting } from "./greeting";
function main() {
    // ...
}
main();

すごい!我々は必要な輸入品を持つコードを持っている.thinsコードをノードで実行するときです.

node main.js

そして失敗する.ノードは、fileパッケージに値モジュールを持つパラメータ型を指定する必要があることを伝えます.JSONまず第一に、我々はパッケージを作成する必要があります.フォルダ内のJSON :

npm init -y

次にファイルにパラメータを追加します.

{
  "devDependencies": {
    "@types/node": "^15.3.0"
  },
  "name": "tsc-intro",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "type": "module"
}

メインを実行します.JS再び

node main.js

また失敗!

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'tsc-intro/createQuestioner' imported from /tsc-intro/main.js
Did you mean to import ../createQuestioner.js?

新しい問題は、ノードがファイル拡張子なしでインポートされるモジュールを理解できないことです.jsこれを解決するには、次の特殊なノードオプションを使用します.

node --es-module-specifier-resolution=node main.js

ファイルを別のフォルダに分ける

万事うまくいく.しかし、フォルダにいくつかの混乱があります.私たちがtypescriptで、また、JavaScriptファイルをコンパイルしたファイルがあります.フォルダをきれいにしましょう.
ファイルを別のフォルダに分けることで管理できます.一つはソースコードのためで、2番目はノードで実行される出力コードです.そのためには、typemcriptコンパイラを使います.
フォルダを作成します.TSファイル:

mkdir src
mv *.ts src/

また、コンパイルされたすべてを削除します.ルートフォルダのjsファイル

rm *.js

私たちがしなければならないのは、JavaScriptファイルをコンパイルする必要があるフォルダへのパスです.

tsc --module ESNext --outDir "./dist" src/main.ts

ウォッチモード

ほとんどの場合、我々はすぐにコード内の何かを変更し、今すぐ変更の結果を参照する必要があります.我々がプロジェクトを再コンパイルする必要があるときはいつでも、この全体のTSCコマンドを使ってください.オプションを使用することができます.

tsc --module ESNext --outDir "./dist" --watch src/main.ts

ウォッチモードを使用すると、ノードの開発には不十分です.JSアプリケーションは、コードの変更後にノードを再実行する必要があるためです.郵便を調べるHow To Setup Simple Workflow To Write Node TypeScript Application In Live Reload .

コンパイルせずにコードをチェック

現代のフロントエンドまたはバックエンドの開発におけるタイプスクリプトを使用するもう一つの側面は、私たちが必ずしもTSCを使用することによってJavaScriptコードに書式設定コードをコンパイルする必要はないということです.また、使用することができますBabel そのために.
typescriptまたはJavaScriptコードをコンパイルするのはかなり長いプロセスです.もしあなたのタイプをチェックしてコードを検証する必要があるなら、このコマンドでコンパイルせずにtypescriptを使用できます.

tsc --noEmit ./src/main.ts

結論

このポストでは、いくつかの一般的なオプションを使用して、typemcriptコンパイラを使用する方法を学びました.コマンドのフラグを使用してTSCを設定しましたが、設定ファイル- tsconfigを使用して管理することもできます.JSON次のポストでは、tsconfigでTSCを設定する方法を見ます.JSON
この動画はお気に入りから削除されています.お願いします.subscribe to my email newsletter 今日まで滞在する.