クラスを拡張するときにメタ/タグとしてオブジェクトを渡す。この構文は何ですか？それは何ですか？

Question

私は最初の反応ネイティブプロジェクトを始めて、これまで見たことのない奇妙な構文を見つけました（少なくともJavaScriptの文脈では）。

これは、反応しているのか、反応がネイティブなのか、またはecma6なのでしょうか？そして、もっと重要な：それは何を指定しない：

export default class App extends Component<{}> { 
    // class code 
} 

を、私はこの部分について混乱しています：< {}>

トークン<と>私はそれが反応に関係していると仮定しますが、私私は他の言語でこれを見る前に覚えているので、間違っているかもしれません。

私に啓発してください:-)

Answer 1

静的解析の素晴らしい世界へようこそ！

表示される構文は、flowです。フローは、javascriptの型を提供する静的解析ツールです。 Javascriptは弱い型の言語です。つまり、何も問題なく以下でこれを行うことができます。

let name = 'Kyle'; 
name = 4; // We just assigned a number to a string 

Javascriptがこの文句はありませんので、これは後で私たちのためにいくつかの問題を引き起こす可能性を意味します - 私たちはnameが文字列であることを期待する場合は特に。

この時点でFlowがレスキューになり、javascriptコードで型を使用できます。フローを使用するための例を変更しましょう。今回は明示的に名前が文字列になると言います。

let name: string = 'Kyle' 

ここで、文字列ではない値を割り当てると、フローによって警告が表示されます。

name = 4; 

グレート！フローは、間違った情報を持つ変数から私たちを守ります。

これは反応ネイティブでどのように適合するかを見てみましょう。

新しいネイティブプロジェクトを作成した場合は、ファイルの上部に次のようなコメントが表示されている可能性があります。

// @flow 

これはフローを示すマーカーで、このファイルでエラーがないかどうかを確認します。反応するネイティブでは、コンポーネントには小道具と国家があります。あなたが掲示したコード例では、あなたの小道具が任意のキーを含むことができるオブジェクトであることをフローに伝えます。それほど有用ではないので、タイプを使用する例を見てみましょう。

名前をレンダリングするだけのコンポーネントがあるとします。

class NamePrinter extends React.Component<{}> { 
    render() { 
    return <Text>{this.props.name}</Text> 
    } 
} 

次に、フロータイピングを追加しましょう。

type NamePrinterProps = { 
    name: string; 
} 

// Change our example to use the typing 

class NamePrinter extends React.Component<NamePrinterProps> 

ここでNamePrinterコンポーネントを使用し、名前が文字列ではない場合、flowはわかりやすいエラーを返します。

class App extends React.Component<{}> { 
    render() { 
    return <NamePrinter name={4}/> 
    } 
} 

おめでとうございます！あなたは今、あなたのjavascriptプロジェクトで静的型付けを使用しました！フローは、多くの静的解析ツールの1つです。あなたはまた、これを行うtypescriptをチェックアウトすることができます。

フロー - https://flow.org/en/

活字体 - https://www.typescriptlang.org