Angular Devsの10個の必須タイプスクリプトのヒントとトリック

この記事では、Angular Projectsやその他のタイプスクリプトプロジェクトに適用されるさまざまなヒントとトリックについて説明します。

近年、JavaScriptの静的タイピングの需要は急速に増加しています。大規模なフロントエンドプロジェクト、より複雑なサーバー、および複雑なコマンドラインツールはすべて、JavaScriptの世界でより防御的なプログラミングの必要性を促進します。さらに、アプリケーションが実際に実行される前にコンパイルする負担は、弱点ではなく、機会と見なされます。 2つの強力な競合他社（タイプスクリプトとフロー）がありますが、実際には多くの傾向が、1つだけが勝つ可能性があることを示しています - タイプスクリプト。

マーケティングや有名な機能とは別に、TypeScriptには非常に活発な貢献者がいる素晴らしいコミュニティがあります。また、言語デザインにおける業界のトップチームの1つもあります。 Anders Hejlsbergの下で、チームは大規模なJavaScriptプロジェクトの風景を、ほぼ完全にTypeScriptを搭載したビジネスに成功させました。 VSTSやVisual Studioコードなどの非常に成功したプロジェクトにより、Microsoft自体はテクノロジーの堅実な支持者です。

しかし、魅力的なのは、TypeScriptの機能だけでなく、TypeScriptサポートの可能性とフレームワークでもあります。 Angular 2の優先言語としてTypeScriptを完全に採用するというGoogleの決定は、Win-Winの状況であることが証明されています。 TypeScriptはより多くの注目を集めるだけでなく、Angular自体も多くの恩恵を受けました。静的タイピングを使用して、コンパイラはすでに、コードが機能しない理由について有益な警告と有用な説明を提供できます。

キーポイント

• カスタムモジュールの定義：外部ライブラリにタイプスクリプトの定義がない場合、開発の精度を強化するためにmodule.d.tsファイルに独自の定義を作成し、これらの定義を共有することでコミュニティに貢献する可能性があります。
• 列挙と一定の列挙を理解する：パフォーマンスの最適化にを使用してランタイムコードを生成しないため、通常の酵素はランタイムコードを生成します。さまざまなシナリオ。 const enum
• タイプ式とエイリアスを使用します：コードメンテナンスを簡素化し、タイプの式とエイリアスを使用して再利用性を改善し、コードベース全体で変更を加え、タイプチェックを改善しやすくします。
• 共同タイプに判別器を使用してください：認証ユニオンを実装して、異なる形状のデータをより効率的に処理し、パブリックプロパティを安全に使用して正しいタイプコンテキストを決定できます。
• 特異性のためにを使用しないでください：anyを使用して真に一般的なデータに使用し、より具体的なタイプを定義するために一生懸命働きます。 any
• ジェネリックを使用して柔軟で再利用可能なコードを作成します。ジェネリックを適用して、タイプの安全性を維持しながらさまざまなタイプで動作できる高度に再利用可能で柔軟な機能とコンポーネントを作成します。

タイプスクリプトのヒント1：独自のモジュール定義を提供してください

TypeScriptはJavaScriptのスーパーセットです。したがって、既存の各NPMパッケージを利用できます。 TypeScriptエコシステムは巨大ですが、すべてのライブラリに適切なタイプ定義が付いているわけではありません。さらに悪いことに、一部の（小）パッケージでは、別の宣言さえありません（ @型/{パッケージ}の形式）。この時点で、2つの選択肢があります

TypeScriptのヒントを使用してレガシーコードを紹介します

1. モジュールのAPIを自分で定義します。
後者は間違いなく最初の選択です。とにかくモジュールのドキュメントを表示する必要がありますが、それを入力すると、開発中の簡単なエラーが防止されます。また、作成したばかりのタイプ定義に非常に満足している場合は、いつでも@Typesに送信してNPMに含めることができます。それで、これは私たちにコミュニティからの尊敬と感謝を与えます。良い！

独自のモジュール定義を提供する最も簡単な方法は何ですか？ソースディレクトリにmodule.d.tsを作成するだけです（たとえば、npmパッケージ不明モジュールの場合、nown nown-module.d.tsという名前の名前を付けます）。

このモジュールの例の定義を提供しましょう：

明らかに、これはまったく使用すべきではないため、最初のステップにすぎません。 （これを説明する多くの理由があります。タイプスクリプトのヒント5は、それを回避する方法を示しています。）しかし、タイプスクリプトがモジュールを理解し、「不明なモジュール「不明モジュール」」などのコンピレーションエラーを防ぐだけで十分です。ここのエクスポート表記は、モジュールのクラシックパッケージに適用されます。Exports= ...タイプ。

declare module 'unknown-module' {
  const unknownModule: any;
  export = unknownModule;
}

以下は、タイプスクリプトでのこのようなモジュールの潜在的な使用です。

declare module 'unknown-module' {
  const unknownModule: any;
  export = unknownModule;
}

前述のように、モジュール定義全体がエクスポートされた定数のタイプ宣言に載っています。エクスポートされたコンテンツが関数である場合、宣言は次のようになる場合があります：

import * as unknownModule from 'unknown-module';

もちろん、ES6モジュールの構文エクスポート機能を使用するパッケージを使用することもできます。

declare module 'unknown-module' {
  interface UnknownModuleFunction {
    (): void;
  }
  const unknownModule: UnknownModuleFunction;
  export = unknownModule;
}

（次のコンテンツは元のテキストと同じであり、より長いです。複製を避けるために、タイプスクリプトのヒント2-10および後続のコンテンツはここで省略されています。）

必要に応じて元のテキストを参照してください。 残りのコンテンツを引き続き生成する必要がある場合は、お知らせください。

以上がAngular Devsの10個の必須タイプスクリプトのヒントとトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。