はじめに
ReactやNext.jsで開発を行っていると、JavaScriptとTypeScriptの違いに戸惑うことがあります。
特にファイルを見ただけでは、どちらで書かれているのか一目で判断しづらいケースもあります。
この記事では、コードからJavaScriptかTypeScriptかを見分けるポイントを自分なりに整理しました。
書こうと思ったきっかけ
受講しているITスクールのハッカソンの開発の一環で忘れないように記事にまとめています。個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
内容
以下のようなコード例から、JavaScriptかTypeScriptかを見分けるには、主に以下のポイントを確認します。
※以下の内容は、あくまで個人的な備忘録としてまとめたものであり、完全な網羅性や正確性を保証するものではありません。
型注釈があるかどうか
たとえば、
const Home: React.FC = () => { ... }
や
const handleRegister = async (e: React.FormEvent) => { ... }
のように、React.FC や React.FormEvent といった記述は 型注釈です。これらはTypeScript特有の構文であり、JavaScriptでは使用できません。
useStateなどのジェネリクス記法
const [message, setMessage] = useState<string>("Loading...");
このように <string> のような型指定がされている場合もTypeScriptです。
拡張子の確認
ファイルの拡張子が .tsx であればTypeScript + JSX、.ts であれば純粋なTypeScriptです。.js や .jsx であればJavaScriptです。
まとめ
ReactやNext.jsでのフロントエンド開発において、TypeScriptかJavaScriptかを判断するには、型注釈の有無とファイルの拡張子を確認するのが最も簡単で確実です。今後の実装・コードレビュー・デバッグの際にも役立てたい知識として、この記事を備忘録として残します...！