web-dev-qa-db-ja.com

TypeScriptとJSX

私はTypeScriptにある程度精通しており、最近JSXを認識しました。どちらも私に似ているようです。 このWebサイト でJSXとの比較を見て、彼らはそれをDartや他のテクノロジーと比較しましたが、TypeScriptとは比較しませんでした。

TypeScriptとJSXは両方ともJavaScriptにコンパイルされ、静的な型付けとクラスを提供しているように見えますが、 TypeScriptとJSX などのWebのいくつかの場所によると、それらは補完的なものであり、競合他社ではないようです。

私はこれをあまりにもオープンエンドにしようとしているので、誰かがTypeScriptがJSXにはない機能を教えてくれますか？

javascripttypescriptjsx
23
Eric

元の答えは不十分であり、現在の標準に最新ではありません。

JSXは言語ではありません。 Javascriptではありませんが、拡張子が異なります。 Facebookはこの新しい拡張機能を考案し、JavaScriptでのHTMLのXMLのような実装を区別できるようにしました。 Reactの初期のバージョンでは、この拡張機能はJavaScript内でHTMLを記述するために必須でした。ただし、この制限は数年前に削除されたため、基本的にJSとJSXに違いはありません。 （.js拡張子のみを使用することは、今日では標準となっています）

TypeScriptに来て、それはJavaScriptのスーパーセットであり、単純なJavaScriptに追加の機能を追加して、アプリケーションをより堅牢にします。 TypeScriptの理解を深めるには、このビデオをご覧ください。 https://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript

結論として、JSX = JS、TypeScriptはJavascriptのスーパーセットであり、JSXとTypeScriptの比較はありません。

52
saran3h

すでに与えられた答えへの小さな追加：

ここで混乱が生じている場所を見ることができます。

学習を始めたばかりのReact= TypeScriptによく似たスクリプトファイルは、fileName.tsx（通常のTypeScriptはfileName.ts）。

これは少し混乱を引き起こしました。ファイルは「本物の」TypeScriptですか、それともJavascriptの悪い側面がまだいっぱいになるように何らかの方法で調整されていますか？知るか！

少し調べてこのページの情報を確認すると、何が起こっているのかがわかります。

TypeScript JSXファイルは確かにTypeScriptファイルです。唯一の違いは、JSX構文を理解して処理するように設計されていることです。つまり、次のようなことです。

    public render() {

    let contents = this.state.loading 
        ? <p><em>Loading...</em></p>
        : this.renderCreateForm(this.state.data);

    return (
        <div>
            <h1>{this.state.title}</h1>
            <hr />
            {contents}
        </div>
        );
    }

JSXは、HTMLのように見えるビットであり、HTML内のすべてのものです。

残りはTypeScriptです。

0
Stuart Aitken