序章

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 は。

このファイルの最初の行は、 export {}; VSCodeがそれをモジュールとして認識するため。

から名前と名前を出力する関数を作成します 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では、オブジェクトに必要なプロパティを定義するインターフェイスを作成できます。

以下のスニペットには、 Person 2つのプロパティを持つオブジェクト、 firstNamelastName. そうして 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

それでは、 app.js VSCodeのファイル。

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 ファイルを作成すると、さまざまなオプションが表示されますが、そのほとんどはコメント化されています。

お気づきかもしれませんが、 "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を提供します。

あなたはあなたを変えることができます "outDir" 現在のディレクトリから dist そのようなディレクトリ:

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

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

あなたは使用することができます cdls ターミナルのコマンドを使用して、 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の記述、構成の生成などを支援するために十分に装備されています。