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
は。
このファイルの最初の行は、 export {};
VSCodeがそれをモジュールとして認識するため。
から名前と名前を出力する関数を作成します person
物体:
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つのプロパティを持つオブジェクト、 firstName
と lastName
. そうして welcomePerson
関数は、のみを受け入れるように変更されました Person
オブジェクト。
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
それでは、 app.js
VSCodeのファイル。
"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ファイルを開きます。
"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
そのようなディレクトリ:
"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の記述、構成の生成などを支援するために十分に装備されています。