序章

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

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

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

前提条件

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

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

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

  1. npm install -g typescript

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

  1. mkdir typescript_test

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

  1. 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では、オブジェクトに必要なプロパティを定義するインターフェイスを作成できます。

以下のスニペットには、firstNamelastNameの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オブジェクトを予期していることを通知するフィードバックをすぐに提供します。

  1. Output
    Argument of type '"James"' is not assignable to parameter of type 'Person'.

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

  1. tsc app.ts

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

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

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

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

ls

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

  1. Output
    app.js
  2. 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を直接実行できるようになりました。

  1. node app.js

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

  1. Output
    Hey James Quick

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

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

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

  1. tsc --init

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

  1. Output
    message TS6071: Successfully created a tsconfig.json file.

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

Screenshot of options listed and commented out in the new config file

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

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

  1. 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を提供します。

Screenshot of IntelliSense suggestions

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

tsconfig.json
"outDir": "./dist"

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

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

  1. cd dist
  2. ls

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

  1. Output
    app.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の記述、構成の生成などを支援するために十分に装備されています。