新しいTypeScriptプロジェクトを始める方法

導入

スタータープロジェクトやAngular CLIなどのツールを使って、既にTypeScriptを扱ったことがあるかもしれません。このチュートリアルでは、スターターを使わずにTypeScriptプロジェクトをセットアップする方法を学びます。また、TypeScriptにおけるコンパイルの仕組みと、TypeScriptプロジェクトでリンターを使用する方法についても学びます。.

前提条件

デバイスにインストールされている Node の最新バージョン。
知り合いになる npm

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

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

mkdir typescript-project

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

cd typescript-project

プロジェクトディレクトリを設定することで TypeScript をインストールできます。

npm i typescript --save-dev

旗が --save-dev TypeScript を開発依存関係として保存するため、TypeScript を追加します。つまり、プロジェクトの開発には TypeScript が必要です。.

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

npx tsc --init

npm また、次のようなツールもあります npx 実行可能パッケージを実行します。. npx グローバルインストールを必要とせずにパッケージを実行できます。.

注文 tsc ここで使用されているのは、TypeScriptの組み込みコンパイラだからです。TypeScriptでコードを記述すると、実行時に tsc コードを JavaScript に変換またはコンパイルします。.

旗の使用 --init 上記のコマンドでは、TypeScriptプロジェクトディレクトリにtsconfig.jsonファイルを作成し、プロジェクトを初期化します。このtsconfig.jsonファイルでは、TypeScriptとコンパイラの連携方法など、詳細な設定を行うことができます。 tsc カスタマイズ。このファイル内の設定を削除、追加、変更して、ニーズに最適なものにすることができます。.

tsconfig.json エディターで開いて、デフォルトの設定を見つけます。

nano tsconfig.json

多くのオプションがありますが、そのほとんどを以下に説明します。

{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Projects */
// "incremental": true, /* Enable incremental compilation */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
. . .
}
}

TypeScriptの設定はtsconfig.jsonファイルでカスタマイズできます。例えば、outDirエントリのコメントを解除して「./build」に設定すると、コンパイルされたTypeScriptファイルはすべてそのディレクトリに配置されます。.

TypeScriptをインストールし、ファイルをインストールすることで tsconfig.jsonこれで、TypeScript アプリケーションのコーディングとコンパイルに進むことができます。.

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

TypeScriptプロジェクトのコーディングを開始できます。新しいファイルを作成します。 インデックス.ts エディタで開き、次のTypeScriptコードを貼り付けます。 インデックス.ts 書く：

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

このTypeScriptコードを配置したら、プロジェクトをコンパイルする準備が整いました。プロジェクトディレクトリからtscを実行してください。

npx tsc

tsconfig.js ファイルで指定した場合、コンパイルされた JavaScript ファイル index.js とソースマップファイル index.js.map の両方がビルドフォルダーに追加されていることがわかります。.

インデックス.js これを開くと、次のコンパイルされた JavaScript コードが表示されます。

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hello = void 0;
const world = 'world';
function hello(who = world) {
return `Hello ${who}! `;
}
exports.hello = hello;

変更を加えるたびにTypeScriptコンパイラを実行するのは面倒です。これを解決するには、コンパイラをウォッチモードに設定し、変更を加えるたびにコードを再コンパイルします。.

次のコマンドを使用して、ウォッチモードを有効にできます。

npx tsc -w

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

ステップ3 – Google TypeScriptスタイルを使用してコードを記入および修正する

コーディング時にリンターを使用すると、コード内の不整合、構文エラー、抜け漏れを素早く見つけることができます。さらに、スタイルガイドは、コードの形式と一貫性を保証するだけでなく、そのスタイルを適用するための追加ツールも提供します。このための人気ツールはeslintで、多くのIDEと連携して開発プロセスを支援します。.

プロジェクトが稼働したら、TypeScriptエコシステム内の他のツールを使って、tsconfig.jsonファイルを手動で設定する必要がなくなります。Google TypeScript Styleもその一つです。Google TypeScript Style（GTS）は、スタイルガイド、インラインスタイルシート、自動コード修正ツールが一体となったツールです。GTSを使用すると、新しいTypeScriptプロジェクトを素早く立ち上げることができ、細かい構成を気にすることなくプロジェクトの設計に集中できます。GTSはデフォルト設定も提供しているため、多くの設定をカスタマイズする必要はありません。.

まずGTSをインストールします。

npm i gts --save-dev

ここから、次のコマンドを使用して GTS を初期化します。

npx gts init

上記のコマンドを実行すると、tsconfig.json ファイルや lint 設定など、TypeScript を使い始めるために必要なものがすべて作成されます。package.json ファイルも、まだ作成されていない場合は自動的に作成されます。.

npx gts init を実行すると、package.json ファイルに便利な npm スクリプトが追加されます。例えば、npm run compile を実行して TypeScript プロジェクトをコンパイルできます。また、カーテンエラーを確認するには、npm run check を実行できます。.

GTSがインストールされ、TypeScriptプロジェクトに適切に統合されました。今後のプロジェクトでGTSを使用すると、必要な設定で新しいTypeScriptプロジェクトを迅速にセットアップできます。.

GTSは設定不要で意見に基づいたアプローチを提供するため、独自の合理的なルールを使用します。これらのルールはベストプラクティスに基づいていますが、ルールを変更する必要がある場合は、デフォルトのeslintルールを拡張することで変更できます。これを行うには、プロジェクトディレクトリに.eslintrcというファイルを作成し、スタイルルールを拡張します。

---
extends:
- './node_modules/gts'

これにより、GTS によって提供されるスタイルルールを追加または変更できます。.

結果

このチュートリアルでは、カスタム設定でTypeScriptプロジェクトを開始しました。また、TypeScriptプロジェクトにGoogle TypeScriptスタイルを統合しました。GTSを使用すると、新しいTypeScriptプロジェクトを迅速に立ち上げて実行できます。GTSを使用すると、手動で設定したり、ワークフローにリンターを統合したりする必要はありません。.