VisualStudioCodeでTypeScriptを操作する方法

序章

TypeScript は、プレーンJavaScriptにコンパイルされるJavaScriptの型付きスーパーセットです。これが何を意味するのかを正確に分析してみましょう。

typed -変数、パラメーター、および戻り値のデータ型を定義できます。
superset -TypeScriptは、JavaScriptに加えていくつかの追加機能を追加します。有効なJavaScriptはすべて有効なTypeScriptですが、その逆はありません。
プレーンJavaScriptにコンパイル-TypeScriptはブラウザで実行できません。そのため、利用可能なツールは、ブラウザが理解できるようにTypeScriptをJavaScriptにコンパイルします。

このチュートリアルでは、Visual Studio CodeでTypeScriptを使用して、それらを一緒に使用する利点を探ります。

前提条件

このプロジェクトでは、次のものが必要になります。

JavaScriptの実用的な理解。詳細については、JavaScriptでコーディングする方法シリーズを確認してください。
Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
Visual Studio Code （VS Code）をダウンロードしてインストールしました。

ステップ1—TypeScriptのインストールとコンパイル

TypeScriptを使用するための最初のステップは、パッケージをコンピューターにグローバルにインストールすることです。端末で次のコマンドを実行して、typescriptパッケージをグローバルにインストールします。

npm install -g typescript

次に、次のコマンドを実行してプロジェクトディレクトリを作成します。

mkdir typescript_test

新しく作成したディレクトリに移動します。

cd typescript_test

次に、新しいTypeScriptファイルを作成する必要があります。参考までに、これらは.ts拡張タイプで終わります。

これで、VS Codeを開き、ファイルをクリックしてから新しいファイルをクリックして新しいファイルを作成できます。その後、ファイル、名前を付けて保存…の順にクリックして保存します。このチュートリアルに従うために、このファイルにapp.tsという名前を付けることができます。ファイル名は重要ではありませんが、.tsのファイル拡張子が重要であることを確認してください。

このファイルの最初の行は、VSCodeがモジュールとして認識するためにexport {};で始まる必要があります。

personオブジェクトから名前と名前を出力する関数を作成します。

app.ts

export {};

function welcomePerson(person) {
  console.log(`Hey ${person.firstName} ${person.lastName}`);
  return `Hey ${person.firstName} ${person.lastName}`;
}

const james = {
  firstName: "James",
  lastName: "Quick"
};

welcomePerson(james);

上記のコードの問題は、welcomePerson関数に渡すことができるものに制限がないことです。 TypeScriptでは、オブジェクトに必要なプロパティを定義するインターフェイスを作成できます。

以下のスニペットには、firstNameとlastNameの2つのプロパティを持つPersonオブジェクトのインターフェイスがあります。次に、welcomePerson関数が、Personオブジェクトのみを受け入れるように変更されました。

app.ts

export {};

function welcomePerson(person: Person) {
  console.log(`Hey ${person.firstName} ${person.lastName}`);
  return `Hey ${person.firstName} ${person.lastName}`;
}

const james = {
  firstName: "James",
  lastName: "Quick"
};

welcomePerson(james);

interface Person {
  firstName: string;
  lastName: string;
}

welcomePerson関数に文字列を渡そうとすると、この利点が明らかになります。

たとえば、jamesを置き換える：

welcomePerson(james);

'James'の場合：

welcomePerson('James');

TypeScriptファイルを使用しているため、VS Codeは、関数が文字列ではなくPersonオブジェクトを予期していることを通知するフィードバックをすぐに提供します。

OutputArgument of type '"James"' is not assignable to parameter of type 'Person'.

動作するTypeScriptファイルができたので、JavaScriptにコンパイルできます。これを行うには、関数を呼び出して、コンパイルするファイルを指定する必要があります。これを行うには、VSCodeの組み込みターミナルを利用できます。

tsc app.ts

以前にエラーを修正しなかった場合は、エラー出力が表示されます。

Outputapp.ts:13:15 - error TS2345: Argument of type '"James"' is not assignable to parameter of type 'Person'.

文字列の代わりにPersonオブジェクトを正しく渡すことにより、エラーを修正します。その後、再度コンパイルすると、有効なJavaScriptファイルが取得されます。

ターミナルでlsコマンドを実行すると、現在のパスのファイルが表示されます。

ls

元のtsファイルと新しいjsファイルが表示されます。

Outputapp.js
app.ts

それでは、VSCodeでapp.jsファイルを開いてみましょう。

app.js

"use strict";
exports.__esModule = true;
function welcomePerson(person) {
    console.log("Hey " + person.firstName + " " + person.lastName);
    return "Hey " + person.firstName + " " + person.lastName;
}
var james = {
    firstName: "James",
    lastName: "Quick"
};
welcomePerson(james);

ES6の機能であるテンプレートリテラル文字列は、ES5からの単純な文字列連結にコンパイルされていることに注意してください。すぐにこれに戻ります。

これが機能したことを確認するために、ターミナルでNodeを使用してJavaScriptを直接実行できるようになりました。

node app.js

コンソールに名前が印刷されます。

OutputHey James Quick

ステップ2—TypeScript構成ファイルを作成する

これまで、1つのファイルを直接コンパイルしました。これは素晴らしいことですが、実際のプロジェクトでは、すべてのファイルのコンパイル方法をカスタマイズしたい場合があります。たとえば、ES5ではなくES6にコンパイルすることができます。これを行うには、TypeScript構成ファイルを作成する必要があります。

TypeScript構成ファイルを作成するには、次のコマンドを実行できます（npm initと同様）。

tsc --init

次の出力が表示されます。

Outputmessage TS6071: Successfully created a tsconfig.json file.

新しいtsconfig.jsonファイルを開くと、さまざまなオプションが表示されますが、そのほとんどはコメント化されています。

"target"という設定が"es5"に設定されていることに気付いたかもしれません。その設定を"es6"に変更します。

tsconfig.jsonにこれらの変更を加えたら、端末でtscを実行します。

tsc

注：以前とは異なり、入力ファイルを指定していません。公式ドキュメントは次のように指摘しています。「コマンドラインで入力ファイルを指定すると、tsconfig.jsonファイルは無視されます。」

次に、新しく作成したJavaScriptファイルを開きます。

app.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function welcomePerson(person) {
    console.log(`Hey ${person.firstName} ${person.lastName}`);
    return `Hey ${person.firstName} ${person.lastName}`;
}
const james = {
    firstName: "James",
    lastName: "Quick"
};
welcomePerson(james);

テンプレートリテラル文字列がそのまま残されていることに注意してください。これは、TypeScriptがES6に正常にコンパイルされたことを示しています。

変更できるもう1つのことは、JavaScriptファイルが作成された後に保存される場所です。この設定は、"outDir"で指定できます。

"outDir"を削除してから、もう一度入力を開始してください。 VS Codeは、TypeScript構成ファイルで設定できるプロパティIntelliSenseを提供します。

次のように、"outDir"を現在のディレクトリからdistディレクトリに変更できます。

tsconfig.json

"outDir": "./dist"

再度コンパイルした後（tsc）、出力JavaScriptファイルが実際にdistディレクトリ内にあることに注意してください。

端末でcdおよびlsコマンドを使用して、distディレクトリの内容を調べることができます。

cd dist
ls

コンパイルされたJavaScriptファイルが新しい場所に表示されます。

Outputapp.js

ステップ3—最新のフロントエンドフレームワークでTypeScriptを探索する

TypeScriptは、ここ数年でますます人気が高まっています。これは、最新のフロントエンドフレームワークでどのように使用されるかの例です。

Angular CLI

AngularCLIプロジェクトはTypeScriptで事前構成されています。すべての構成、リンティングなど。デフォルトで組み込まれています。 Angular CLIプロジェクトを作成し、周りを見てみましょう。これは、TypeScriptが実際のアプリでどのように見えるかを確認するための優れた方法です。

ReactApp2を作成する

Create React AppにはデフォルトでTypeScriptが付属していませんが、最新バージョンでは、そのように構成できます。 Create React AppでTypeScriptを使用する方法を学びたい場合は、 Create ReactAppv2とTypeScriptの記事をご覧ください。

Vue CLI 3

Vue CLIプロジェクトは、新しいプロジェクトを作成するときにTypeScriptを使用するように構成できます。詳細については、 VueDocsをご覧ください。

結論

このチュートリアルでは、VSCodeでTypeScriptを使用する方法について説明しました。 TypeScriptを使用すると、本番環境に出荷する際の信頼性を高めることができる高品質のJavaScriptを生成できます。お分かりのように、VS Codeは、TypeScriptの記述、構成の生成などを支援するために十分に装備されています。