web-dev-qa-db-ja.com

Typescriptでの山括弧の使用に関する規則

山かっこをいつ、どこで、どのように、なぜか、つまり"<...>"、TypeScriptで使用する必要がありますか？

私はこれらのブラケットの多くの個別の使用を理解していると思いますが、それらの使用の一般的なパターンを確認するのに苦労します。ジェネリックに使用されることもあれば、特定のタイプに使用されることもあります。たまに、コロンの構文が使用されると単純に期待していた場所に表示されます。

TypeScriptの基本をある程度理解している：一般的に、TypeScriptホームページのチュートリアルを調査し、TypeScript仕様の重要な部分を調べ、「Definitive TypeScript Guide」Webサイトを読み、「Master TypeScript」ビデオを実行したチュートリアル。この特定のトピックでは、GoogleとStackOverflowも検索しました。

私の問題は、山かっこの特定の使用法をあまり理解していません。むしろ、括弧が何を意味するか、正確な構文、いつ使用すべきか、を使用すべきではない 、など.

更新：

この質問をする理由と正確に何を探しているのかを明確にするために、いくつかのコメントに応じて質問を更新しています。

バニラJavaScriptでの波括弧の一般的なルールを知っているdoの例を挙げて、私のリクエストを説明しましょう。中括弧は常に、エンティティを囲む開始と終了の括弧のペアで提供されます。そのエンティティは、2つの主要な「もの」のうちの1つになります。

まず、中かっこでステートメントのグループを囲むことができます。

  • 関数、メソッド、コンストラクタ、またはジェネレータの本体

  • 本文はifステートメント/句またはelse句、

  • for、for/of、for/in、whileまたはdo/whileループ、

  • try、catchまたはfinallyブロックの本体、または

  • ステートメントの匿名ブロック。

次に、中括弧はlistを囲むこともできます：

  • オブジェクトリテラルのプロパティ

  • コンストラクタ、プロパティ、およびclass宣言のメソッド、

  • モジュールからexportedまたはimportedされる関数および/または定数、

  • case基準に従うswitchs、または

  • enums。

（このリストが完全であるかどうか、および/または正しいかどうかは重要ではありません。）

JavaScriptを学んでいる人を想像してみてください。これまでのところ、彼女は中括弧を使用してステートメントのブロックを囲む方法、つまり上記の最初のセットの使用法を正しく学んだかもしれません。ただし、ステートメントのブロックではないものの前後に中括弧が付いている場合もあります。 {a:1, b:2}およびこれらの中括弧の内容は実行可能なステートメントではないため、混乱しています。または、さらに悪いことに、彼女が理解していない例を示すことさえできないかもしれません。代わりに、彼女は他の人が書いたコードに不慣れな方法で使用されている中括弧が含まれている（彼女はどこにいるのか思い出せない）と頭を悩ませています。これは、中括弧を使用するタイミングに関する現在の理解が不完全である可能性があることを彼女に疑わせています。彼女は理解できない個々の例を見つけるのではなく、中括弧を使用する場所の上記の「ルール」のリストを誰かに教えてもらいたいだけです。

もう一度言いますが、私の質問は次のとおりです。上記のJavaScriptで中かっこの使用法を説明した方法でTypeScriptで山かっこの使用法を網羅的に説明する一般的な原則や特定の規則を誰かが説明してくれませんか？

javascripttypestypescriptbrackets
27
Andrew Willems

このような質問がある場合は、 the spec 、特に文法セクションを読むことをお勧めします。 < something >のような構文は、

  1. タイプパラメータ

    • セクション3.6.1 で< TypeParameterList >として定義

    • クラス、インターフェース、関数などの宣言と呼び出しシグネチャで使用されます

      function heat<T>(food: T): T { return food; }
          //^^^^^ Type parameter list

class Pizza<T, E extends Cheese> { toppingA: T; toppingB: E }
         //^^^^^^^^^^^^^^^^^^^^ Type parameter list

  2. タイプ引数

    • セクション3.6.2 で< TypeArgumentList >として定義

    • ジェネリック型への参照とジェネリック関数の呼び出しで使用されます

      var pizza: Pizza<Pepperoni, Mozzarella>;
               //^^^^^^^^^^^^^^^^^^^^^^ Type argument list
pizza = heat<{ toppingA: Pepperoni, toppingB: Mozzarella}>(ingredients) 
           //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Type argument list

      アップデート2018-07-01：バージョン2.9以降、ジェネリック型引数は JSX要素/でも使用できます および tagged templates 。

       <MenuItem<Pizza> toppings={[Pepperoni, Mozzarella]} />
        //^^^^^^^ Type argument list

 const ratingHtml = escapeUserInput<string | number> `Customer ${feedback.customer.username} rated this pizza with <b>${feedback.rating}</b>/10!`
                                  //^^^^^^^^^^^^^^^^ Type argument list

  3. タイプアサーション

  4. JSX式（有効な場合）

    • 仕様には記載されていませんが、 JSXの構文 に従う必要があります。これは基本的に次のような式です

      <JSXElementName JSXAttributes(optional)> JSXChildren(optional) </JSXElementName>

      または

      <JSXElementName JSXAttributes(optional) />
34
noppa

それらは、共通のユースケースを定式化するために、意味が明確に異なる複数の式に使用されます。中括弧のように、コンテキストにも依存します。おそらくご存じのとおり、山括弧をペアで使用します。

  • タイプアサーションの非推奨の構文として
  • ジェネリック型パラメーターを手動で指定する場合
  • .tsxで要素を宣言するため

.tsxファイルにない場合、ペアになっている山括弧は、事実上常にジェネリック型パラメーターの存在を示しています。次のように式のシステムを定式化することができます（これは、おそらく最も近いものです）。

  • 型定義、型注釈、メソッド呼び出し、またはクラス宣言のコンテキストでは、山括弧はジェネリック型パラメーターを示します
  • TSX要素のコンテキストでは、山かっこはTSX/JSXコンパイラによって変換された要素を示します
1
John Weisz