新しいTypeScriptプロジェクトを設定する方法

投稿日: 2022-04-20 2022-04-20
タグ: TypeScript

序章

スタータープロジェクトやAngularCLIなどのツールを使用する前に、TypeScriptを使用したことがあるかもしれません。このチュートリアルでは、初心者の助けを借りずにTypeScriptプロジェクトを設定する方法を学びます。また、TypeScriptでコンパイルがどのように機能するか、およびTypeScriptプロジェクトでリンターを使用する方法についても学習します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

マシンにインストールされているNodeの最新バージョン。これは、Node.jsのインストール方法とローカル開発環境の作成チュートリアルに従うことで実現できます。
npmに精通していること。 npmにはノードが付属しています。 npmの操作の詳細については、このnpmおよびpackage.jsonチュートリアルでNode.jsモジュールを使用する方法を確認してください。

ステップ1—TypeScriptプロジェクトを開始する

TypeScriptプロジェクトを開始するには、プロジェクトのディレクトリを作成する必要があります。

mkdir typescript-project

次に、プロジェクトディレクトリに移動します。

cd typescript-project

プロジェクトディレクトリを設定したら、TypeScriptをインストールできます。

npm i typescript --save-dev

TypeScriptを開発依存関係として保存するため、--save-devフラグを含めることが重要です。これは、プロジェクトの開発にはTypeScriptが絶対に必要であることを意味します。

TypeScriptがインストールされている場合、次のコマンドを使用してTypeScriptプロジェクトを初期化できます。

npx tsc --init

npmには、実行可能パッケージを実行するnpxというツールも含まれています。 npxを使用すると、パッケージをグローバルにインストールしなくても実行できます。 npxのしくみと、いつ使用するかについては、こちらで詳しく知ることができます。

tscコマンドは、組み込みのTypeScriptコンパイラであるため、ここで使用されます。 TypeScriptでコードを作成する場合、tscを実行すると、コードがJavaScriptに変換またはコンパイルされます。

上記のコマンドで--initフラグを使用すると、typescript-projectプロジェクトディレクトリにtsconfig.jsonファイルが作成され、プロジェクトが初期化されます。このtsconfig.jsonファイルを使用すると、TypeScriptとtscコンパイラの相互作用をさらに構成およびカスタマイズできます。このファイルの構成を削除、追加、および変更して、ニーズに最適にすることができます。

選択したコードエディタでtsconfig.jsonを開くと、次のデフォルト構成が表示されます。

typescript-project / tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  }
}

デフォルト設定の多くはコメントアウトされます。上記の構成は、TypeScriptがコンパイルされるJavaScriptのバージョンと、コンパイルされたプログラムに期待されるモジュールシステムを設定します。 "strict"をtrueに設定すると、さまざまなタイプチェックルールが有効になります。これは、TypeScriptプログラムのエラーが少なくなることを意味します。

TypeScript構成をカスタマイズできます。 tsconfig.jsonファイルに、次のキーと値のペアを追加します。

typescript-project / tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "dist",
    "sourceMap": true
  }
}

"outDir"に"dist"の値を指定すると、distというフォルダーまたはディレクトリが作成されます。 npx tscを実行してTypeScriptファイルをコンパイルすると、コンパイルされたJavaScriptファイルがdistファイルに配置されます。

TypeScriptファイルをコンパイルすると、sourcemapも作成されます。ソースマップは、新しくコンパイルされたJavaScriptファイルを元のTypeScriptファイルにマップするファイルです。コードにエラーがある場合、または変更が必要な場合は、コンパイルされたコードではなく、元のソースコードをデバッグすることをお勧めします。これが、ソースマップが役立つ理由です。 "sourceMap"をtrueに設定すると、元のTypeScriptファイルのエラーをすばやく解決できます。

TypeScriptがインストールされ、tsconfig.jsonファイルが配置されたら、TypeScriptアプリのコーディングとコンパイルに進むことができます。

ステップ2—TypeScriptプロジェクトをコンパイルする

TypeScriptプロジェクトのコーディングを開始する前に、typescript-project内にsrcというフォルダーを作成します。 srcフォルダー内に、index.tsファイルを作成します。

コードエディタでindex.tsを開きます。 index.tsに次のTypeScriptコードを記述します。

typescript-project / src / index.ts

const world = 'world';

export function hello(world: string = world): string {
  return `Hello ${world}! `;
}

このTypeScriptコードを配置すると、index.tsをコンパイルする準備が整います。

npx tsc index.ts

コンパイルされたJavaScriptindex.jsファイルとindex.js.mapソースマップファイルの両方がdistフォルダーに追加されていることがわかります。

index.jsを開くと、次のコンパイル済みJavaScriptコードが表示されます。

typescript-project / dist / index.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var world = 'world';
function hello(world) {
    if (world === void 0) { world = world; }
    return "Hello " + world + "! ";
}
exports.hello = hello;
//# sourceMappingURL=index.js.map

変更を加えるたびにTypeScriptコンパイラを実行するのは面倒な場合があります。これを修正するには、コンパイラを監視モードにすることができます。コンパイラを監視モードに設定すると、変更が加えられるたびにTypeScriptファイルが再コンパイルされます。

次のコマンドを使用して、ウォッチモードをアクティブ化できます。

npx tsc -w

TypeScriptコンパイラがどのように機能するかを学び、TypeScriptファイルを正常にコンパイルできるようになりました。ワークフローにリンターを導入することで、TypeScriptプロジェクトを次のレベルに引き上げることができます。

ステップ3—TypeScriptプロジェクト用のTSLintの構成

コーディング時にリンターを使用すると、コードの不整合、構文エラー、および欠落をすばやく見つけるのに役立ちます。 TypeScriptの事実上のリンターはTSLintです。

警告：TSLintは非推奨になりました。代わりにESLintを使用することをお勧めします。その方法については、次の記事をお読みください： Visual StudioCodeでESLintを使用してコードをLintおよびフォーマットする方法。

TSLintをインストールするには、次のコマンドを実行します。

npm i tslint --save-dev

これでTSLintがインストールされました。 TSLintを構成し、プロジェクトでの動作をカスタマイズするには、次のコマンドを実行してTSLintを初期化します。

npx tslint --init

TSLintを初期化すると、tslint.jsonファイルが作成されます。すべてのTSLint構成は、tslint.jsonに保持されます。コードエディタでtslint.jsonを開きます。次のデフォルト構成が表示されます。

tslint.json

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended"
  ],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

リンターは、コードのエラーに下線を引きます。この動作をコードエディタで有効にするには、TSLint拡張機能をインストールする必要があります。

注：TSLintは非推奨になっていることを忘れないでください。コードエディタにTSLintをインストールしても機能しない場合があります。

コードエディタでindex.tsに戻ります。 2つの場所に下線が引かれていることに気付くでしょう。一重引用符は二重引用符で、ファイルは新しい行で終わる必要があります。これらのフラグが立てられたメッセージは両方ともエラーではありません。これらは、TSLintが構成するスタイル設定です。 tslint.jsonを配置すると、これらの構成を変更できます。

これらのスタイル設定を変更するには、tslint.jsonの"rules"キーと値のペアを使用します。

tslint.json

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended"
  ],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

すべてのファイルの最後に余分な行を含めたくない場合があります。これは"eofline"ルールで変更できます。 "eofline"の値をfalseに設定すると、TSLintの下線が削除されます。

typescript-project / tslint.json

"rules": {
  "eofline": false
},

追加またはカスタマイズするすべてのルールを手動で設定する必要はありません。 TSLintに採用して統合できるよく知られた構成があります。 Airbnbスタイルガイドは、多くの開発者が信頼して使用している構成の1つのセットです。

Airbnbスタイルガイドを使用するには、最初にそれをインストールする必要があります：

npm install tslint-config-airbnb

Airbnbスタイルガイドをインストールしたら、tslint.jsonのTSLint構成がこれを反映していることを確認する必要があります。 "extends"キーは、新しくインストールされたtslint-config-airbnbを指す必要があります。

tslint.json

{
    "defaultSeverity": "error",
    "extends": "tslint-config-airbnb",
    "jsRules": {},
    "rules": {
        "eofline": false
    },
    "rulesDirectory": []
}

Airbnbスタイルガイドが配置され、tslint.jsonに統合されているため、TSLintは一重引用符の使用に関するエラーメッセージを表示しなくなりました。 Googleには、 gts と呼ばれる広く使用されているTypeScriptスタイルガイドもあります。これには、さらに便利な機能があります。

ステップ4—gtsを使用する

TypeScriptの構成とリンティングがどのように機能するかを知っています。この舞台裏の知識があれば、他のツールを使用して、tsconfig.jsonファイルでリンティングと構成を設定する必要がなくなります。 Google TypeScriptStyleはそのようなツールの1つです。 gtsとして知られるGoogleTypeScriptStyleは、スタイルガイド、リンター、および自動コード修正機能をすべて1つにまとめたものです。 gtsを使用すると、新しいTypeScriptプロジェクトをすばやくブートストラップし、bikesheddingを回避するのに役立ちます。 gtsは、意見のあるデフォルト構成も提供します。これは、構成をあまりカスタマイズする必要がないことを意味します。

gtsをテストするには、新しいプロジェクトフォルダーを作成することから始めます。プロジェクトフォルダを配置したら、次のコマンドを使用してgtsを初期化します。

npx gts init

上記のコマンドは、tsconfig.jsonファイルやリンティング設定など、TypeScriptの使用を開始するために必要なすべてのものを生成します。 package.jsonファイルは、まだ配置されていない場合にも生成されます。

npx gts initを実行すると、役立つnpmスクリプトがpackage.jsonファイルに追加されます。たとえば、npm run compileを実行してTypeScriptプロジェクトをコンパイルできるようになりました。リンティングエラーをチェックするために、npm run checkを実行できるようになりました。

注：TSLintは非推奨になっていることを忘れないでください。 gtsドキュメントをチェックして、gtsをESLintリンターと統合する方法を確認してください。

TypeScriptプロジェクトでTSLintを使用するには、TSLintをインストールし、npx tslint --initを実行してtslint.json構成ファイルを作成する必要があります。前のステップでは、Airbnbスタイルガイドを使用するようにTSLintを拡張しました。 gtsについても同じことを行う必要があります。

tslint.json

{
  "defaultSeverity": "error",
  "extends": [
    "./node_modules/gts/tslint.json"
  ],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

これで、TSLintはgtsによって設定されたリンティングルールに従います。

これでgtsがインストールされ、TypeScriptプロジェクトに適切に統合されました。将来のプロジェクトでgtsを使用すると、必要な構成を適切に設定して、新しいTypeScriptプロジェクトをすばやくセットアップできます。

結論

このチュートリアルでは、カスタマイズされた構成でTypeScriptプロジェクトを開始しました。また、GoogleTypeScriptスタイルガイドをTypeScriptプロジェクトに統合しました。 gtsを使用すると、新しいTypeScriptプロジェクトをすばやく立ち上げて実行するのに役立ちます。 gtsを使用すると、手動で構成を設定したり、リンターをワークフローに統合したりする必要がありません。

追加の手順として、 Visual StudioCodeでTypeScriptを操作する方法を学ぶことに興味があるかもしれません。この記事をチェックして、ReactでTypeScriptを使用する方法を学ぶこともできます。

getdocs

13036