本章ではTypeScriptを学習します。実際にNext.jsのプロジェクトはTypeScriptで記述されることが多いので、習得しましょう。
TypeScriptとは？
TypeScriptとは、データの型を指定できるJavascriptです。
Javascriptではデータの型は設定した値によって自動的に決まり、変更するときに異なる型のデータを入れることができますが、TypeScriptは宣言時に型を指定することで、指定した型しか扱えないようにできます。
このように宣言時に型を指定する言語を「静的型付け言語」、入れる値によって自動的に型が決まる言語を「動的型付け言語」と呼びます。
TypeScript（静的型付け言語）のメリット
TypeScriptを使用するメリットは下記です。
- 間違った型のデータを入れると、実行前にエラーが出る → エラーを事前に発見できる
- チームで開発するとき、どんなデータが使われるのか一目でわかる → 保守しやすい
- エディタの補完機能が強化され、ミスが減る → 開発のスピードアップ
特にチームで開発する際や大規模な開発に適しているので、企業で採用されています。
Next.js ＋ TypeScript
では実際にNext.jsで使用してみましょう。
まずはプロジェクトを作成します。
npx create-next-app@latest my-ts-appTypeScriptを使用するか聞かれるので「Yes」を選択してください。
作成しました。
このようにファイル名が「tsx」や「ts」になっています。
基本的な使い方はJavascript版と同じです。
page.tsxを編集してみます。
app/page.tsx
export default function Home() {
let hello: string = "hello,world!";
hello = 5;
return (
<>
<h1>{hello}</h1>
</>
);
}
このように、変数helloに数値を入れようとするとエラーになります。
このように別の型の値を入れようとした段階でエラーが出るので、アプリが組み上がってきた段階で予期せぬエラーが起こりにくくなるわけです。
