Angular 2でタイプスクリプトとES5を使用してコンポーネントを作成します

コアポイント

• Angular 2.0は、TypeScript（JavaScriptのスーパーセット）を使用して、パフォーマンスを最適化し、ページの速度とワークフローの自動化を改善します。 TypeScriptを使用すると、開発者はタイプ情報を使用してJavaScriptコードに注釈を付け、コードベースのエラーをキャッチするのに役立ちます。
• Angular 2.0は、ビューとロジックを含むコードの再利用可能なブロックであるコンポーネントの概念を導入します。コンポーネントは、命令をフレームワークの主な要素として置き換え、アプリケーションのコードの一部がコードの別の部分に干渉しないようにします。
• Angular 2.0のコンポーネントの作成TypeScriptを使用するには、コンポーネントクラスを定義し、Angularから必要な関数をインポートすることが含まれます。次に、@Componentデコレーターでクラスを飾り、アプリケーションの他の部分で使用するためにそれをエクスポートします。
• Angular 2.0は、ほとんどのブラウザーで実行される標準のJavaScriptバージョンであるES5もサポートしています。 Angular 2.0でES5を使用してコンポーネントを作成するには、開発者はNGオブジェクトのメソッドを使用してコンポーネントを定義し、機能を追加できます。次に、サーバーを必要とせずにブラウザでコードを直接実行できます。

この記事は、ステファン・マックス、ジェフ・スミス、ラビ・キランによってレビューされました。 SitePointコンテンツを最高の状態にしてくれたすべてのSitePointピアレビューアに感謝します！

年末が近づくと、AngularチームはAngular 2.0の安定したバージョンをリリースするためにこれまで以上に近くなります。これにより、Angularアプリケーションの開発方法が再構築されますが、より良い結果が得られます。この記事では、Angular 2.0のコアコンセプトのいくつかとそれらの使用方法を紹介します。具体的には、Angular 2コンポーネントを最初から最後まで構築するプロセスを説明します。まず、TypeScriptでこれを行う方法について詳しく知り、次に角度コンポーネントを移行して、純粋なES5で実行できるようにします。

このチュートリアルのコードは、GitHubコードベースにあります。コードベースには2つのブランチがあります。1つはTypeScriptバージョン用、もう1つはES5バージョン用です。特定のブランチをクローンする場合は、

を使用してください。

git clone <url> --branch <branch></branch></url>

コンポーネントとは何ですか？

JavaScriptでのコンポーネントの使用は、過去数か月で大幅に増加しています。それらは、React、ノックアウト、エンバーなどのプロジェクトで使用されているため、Angularがバージョン2.0にそれらを統合することは驚くことではありません。コードモジュール性は常にAngularチームの焦点であり、コンポーネントの使用は、カプセル化されたブロックにコードを分割できるため、これを強調しています。

では、コンポーネントとは何ですか？それは基本的に、アプリケーション全体で再利用できるコードの一部です。ビューとロジックの2つの部分が含まれています。 Angular Developmentチームのコンポーネントへの注意を活用することにより、いくつかの非常に強力な機能を活用できます。 Angular 2により、フレームワークのコアとして命令を置き換えたさまざまなコンポーネントで構成される動的アプリケーションを非常に簡単に作成できます。 Angular 2では、ディレクティブは、DOMに何らかの機能を追加するためにのみ使用される軽量コンポーネントです。現在、Angular開発者は、$範囲の分離に関連する紛争の問題のために、アプリケーションを台無しにすることを心配する必要はありません。代わりに、コンポーネントを使用することは、アプリケーションのコードの一部がコードの別の部分に干渉しないようにする方法です。

typeScript

Angular 2.0は、JavaScriptのスーパーセットであるTypeScriptを使用するために作成されています。 Angular Developersは、このリリースの完了に多くの時間を費やしてきました。彼らは、ページの速度やワークフローの自動化など、パフォーマンスを最適化するために一生懸命働きます。 TypeScriptは他のトランスコダーに似ているため、開発者は有効なJavaScriptに簡単に変換できるコードを作成できます。そうは言っても、過去1年間でより人気が高まっているため、Angularチームはそれを使用してフレームワークを作成することにしました。

TypeScriptを使用する利点の1つは、タイプシステムです。これにより、開発者は型情報を使用してJavaScriptにコメントできます。この注釈付きコードは、コンパイラを介して実行されます。これは、ユーザーの発見を待っているコードベースのコードベースで潜んでいるエラーをキャッチするのに役立ちます。次に、TypeScriptの実際のアプリケーションを見てみましょう。

以下では、TJ van Tollの記事「The Rise of TypeScript」から例を抽出しました。この関数では、高さと幅のパラメーターが数値タイプである必要があることがわかります。関数本体が戻り型を指定する前に、これも数値タイプです。したがって、この関数に渡された非数値コンテンツは、コンパイラがコンパイル時間にエラーをスローします。

: number

宣言のタイプAPIを文書化し、時間の経過とともにコードを容易にするのに役立ちます。

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

インストール

TypeScriptをJavaScriptにコンパイルするプロセスは非常に簡単です。まず、NPM：

からTypeScriptパッケージを取得します

インストールが完了した後、TypeScriptにJavaScriptにコンパイルすることは、コマンドラインから次のコマンドを実行するのと同じくらい簡単です（TypeScriptファイルは.ts拡張子で保存されます）：

npm install -g typescript

さあ、Angular 2がTypeScriptのパワーを活用してカスタムコンポーネントを簡単に作成する方法を見てみましょう。最初の例のコードは、GitHubコードベースのTypeScriptブランチにあります。

tsc <filename.ts>

タイプスクリプトのコンポーネントを作成

TypeScriptはJavaScriptのスーパーセットであるため、有効なJavaScriptは.tsファイルで適切に機能します。 TypeScriptを使用することにより、開発者はJavaScriptコードを拡張して、最新のES6機能を活用できます。この例では、クラスを使用します。

以下では、TypeScriptコードを使用してコンポーネントを作成しました。 ES6インポート構文を使用して、最初にAngularをインポートしました。この例では、コンポーネントとそのコンポーネントのビューを定義します。完了したら、Angularのコードを実行するにはAngularのブートストラップ機能が必要になります。このコードでは、 @シンボルが表示されます。これは、Angularに何を構築しようとしているかを伝えるために使用されます。

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Angular 2はTypeScriptの上に構築されているため、フレームワークは@Componentアノテーションを認識し、新しいコンポーネントを作成しようとしていることを知っています。さらに、Angularに、htmlで<user-name></user-name>を表示するたびに、コンポーネントをインスタンス化することを示しています。

上記のように、

コンポーネントには2つの部分が含まれています

view
logistic

コンポーネントが定義されているため、ビューとロジックを作成する必要があります。

コンポーネントの後、ビューを定義するためにタイプスクリプトコードを追加できます。上記のコードの継続を見て、Angularがカスタムコンポーネントにビューを追加するのが簡単になる方法を自分で確認しましょう。

さて、index.htmlファイルに

npm install -g typescript

を追加すると、このテンプレートがDOMに注入されます。そうは言っても、usercomponentクラスにはコードが含まれていないため、コンポーネントの論理的な部分は空です。

<user-name></user-name>上記の例では、空のクラスは1つだけです。しかし、今、私は名前変数を作成し、次の式を使用して私たちのビューでこの名前変数をレンダリングします。

前述のブートストラップ機能も表示されます。名前は共有されていますが、この関数は角度アプリケーションを起動または起動するために使用され、Twitter Bootstrapフレームワークとは関係ありません。コンポーネントをこの関数に渡すことを忘れた場合、Angularはコンポーネントをロードすることを知りません。

tsc <filename.ts>

また、アプリケーションが正しく表示するために何らかのサーバーを使用する必要があることにも迅速に注意したいと思います。直接アクセスすると、System.jsはコードを含むメインモジュールをロードできません。

この例を使用しているユーザーは、ルートディレクトリでを実行できます。このコマンドを実行した後、

https://www.php.cn/link/f74d6ef882234fd34400a296b1da6149

にアクセスして、コンポーネントの実際の効果を表示できます。うまくいけば、これがAngularがコンポーネントにロジックを追加する方法を示しています。

node app.jsコンポーネントをES5 < ES5を使用して2.0のパワーを活用したい人のために、Angular 2チームは、単純にWebサイトに配置できるフレームワークバージョンを作成しました。 ES5にはモジュールシステムがないため、これは必要です。したがって、何らかの自己実行バンドルが必要です。最初の例のコードを見た場合、アプリケーションに3つの異なるスクリプトタグを追加する必要があることがわかります。この例では、次のスクリプトを追加するだけです。

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

このスクリプトを使用すると、開発者はフレームワークの機能を犠牲にすることを心配することなく、ES5の知識を使用できます。 ES5を使用して角度成分を構築する方法を見てみましょう。この例のコードは、GitHubコードベースのES5ブランチにあります。つまり、始めましょう！

TypeScriptの代わりにES5を使用してコンポーネントを再作成するには、いくつかの異なるアプローチを使用します。これは基本的に上記の例で行ったことと同じですが、 @シンボルを使用する代わりに、NGオブジェクトのメソッドリンクを使用します。これは、次のコードに示されています：

npm install -g typescript

これで、アプリケーションが

セレクターを読み取るときに表示されるコンポーネントに機能を追加し続けることができます。 <user-name>

ビューとクラスの方法を使用しましょう。ビュー方法では、以前に使用したテンプレート文字列を渡すだけです。 ES5ではクラスがサポートされていないため、名前属性を含むシンプルなコンストラクターを作成することにより、クラスメソッドでそれらの使用をシミュレートします。

tsc <filename.ts>

しかし、私たちは何かが欠けています。タイプスクリプトの例では、Bootstrap関数を使用してAngularコードを開始しました。 ES5：

で同じことをする方法は次のとおりです

import { Component, View, bootstrap } from 'angular2/angular2';
@Component({
  selector: 'user-name'
})

これは、カスタムアプリケーションコードの下に配置する必要があります。これにより、Angularはアプリケーションを起動し、ページの読み込み後にコンポーネントをロードします。前の例（サーバーが必要）とは異なり、このページはブラウザで直接表示できます。

ご覧のとおり、Angularチームは、ES5で2.0アプリケーションを構築したいユーザーに明確なソリューションを提供します。これに興味がある場合は、A.JSライブラリをチェックすることを強くお勧めします。これにより、開発者はTypeScriptのような構文を使用してES5でAngularアプリケーションを構築できます。

結論

これが、フレームワークの次のバージョンに表示されるAngularのさまざまな側面を詳細に見てくれることを願っています。 Angular 2とTypeScript（この場合はメッセージボード）を使用して完全なアプリケーションをさらに構築する場合は、この記事をチェックすることをお勧めします。TypeScriptを使用してAngular 2を始めましょう。

Angular 2での経験も知りたいです。試しましたか？共有したいものを作りましたか？コメントで教えてください。

TypeScriptとES5を使用して、Angular 2でコンポーネントを作成する

faqs TypeScriptを使用してAngular 2でコンポーネントを作成する方法は？

TypeScriptを使用してAngular 2でコンポーネントを作成するには、いくつかのステップが含まれます。まず、Angular Coreライブラリからコンポーネントシンボルをインポートする必要があります。次に、コンポーネントクラスを定義し、@Componentデコレータで飾ります。デコレーターは、クラスがコンポーネントであり、セレクターやテンプレートなどのメタデータを提供することをAngularに伝えます。最後に、コンポーネントクラスをエクスポートして、アプリケーションの他の部分で使用できるようにします。基本的な例は次のとおりです

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Angular 2のTypeScriptとES5の違いは何ですか？

TypeScriptとES5はどちらもAngular 2アプリケーションを作成するために使用できる言語ですが、いくつかの重要な違いがあります。 TypeScriptは、言語にタイプやその他の機能を追加する静的にタイプされたJavaScriptのスーパーセットです。 Angular 2よりも優先言語です。これは、コードをより堅牢で維持しやすくするためです。一方、ES5は、ほとんどのブラウザで実行される標準のJavaScriptバージョンです。 Angular 2アプリケーションはES5を使用して記述できますが、TypeScriptの利点の一部を見逃します。

（残りのFAQはAngularとReactに関連しており、元のトピックと一致しないため、省略されています。）

以上がAngular 2でタイプスクリプトとES5を使用してコンポーネントを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。