TL;DR
このページでは、TypeScript のプリミティブ型とその具体的な使用法について解説します。Next.js のプロジェクト内で TypeScript を用いる際に、これらの基本的な型を理解することで、より強固で安全なコードを書くことが可能になります。
開発環境：
| 開発環境 | バージョン |
|---|---|
| Next.js | 13.4.3 |
| TypeScript | 5.0.4 |
| Emotion | 11.11.0 |
| React | 18.2.0 |
プリミティブ型とは
プリミティブ型とは、プログラミング言語において、その言語の構成要素となる基本的な値のことですね。「原始的な」という意味があります。プリミティブ型は、その言語の文法によって定義されており、それらの型を組み合わせて、より複雑な型を作ることができます。
TypeScript のプリミティブ型
TypeScript のプリミティブ型の一覧です。
| 型 | 解説 |
|---|---|
number |
数値を表現します。整数も小数もこの型で表現します。 |
string |
文字列を表現します。シングルクォート(' ')、ダブルクォート(" ")、バッククォート( )で囲んだ文字列が該当します。 |
boolean |
真偽値を表現します。true または false の値を持つことができます。 |
null |
値が存在しないことを明示的に表現する値です。 |
undefined |
値が未定義であることを表現する値です。変数が宣言されているが値が設定されていない場合、その値は undefined となります。 |
symbol |
ES6 から追加された型で、ユニークかつ不変の値を生成するために使用されます。 |
bigint |
JavaScript の number 型が表現できる範囲を超える大きな整数を扱うための型です。ES2020 から追加されました。 |
これらのプリミティブ型を理解することで、さまざまな値を安全に扱うことができます。また、これらの型を用いて、複合型（オブジェクト型、配列型など）を作成することも可能です。
各プリミティブ型の簡単な使用例を示します。
// number
const age: number = 25
// string
const name: string = 'John'
// boolean
const isMember: boolean = true
// null
const job: null = null
// undefined
let salary: number | undefined
salary = undefined
// symbol
const key: symbol = Symbol('key')
// bigint
const bigNumber: bigint = BigInt(9007199254740991)
各プリミティブ型の定義方法を理解し、適切に型を指定することで、コードの堅牢性と読みやすさを向上させることができます。それぞれの変数が何を表現しているのか、どのような値を持つ可能性があるのかを明示的に示すことで、あなた自身や他の開発者がコードを読んだときに理解しやすくなるんですよ。
プリミティブ型を使った実装
ソースコードは以下の通りです。このコードでは、TypeScript のいくつかのプリミティブ型を用いたコンポーネントの作成とそれを呼び出す方法を示しています。
// components/PrimitiveTypes.tsx
type PrimitiveTypesProps = {
message: string
count: number
isActive: boolean
}
const PrimitiveTypes = ({ message, count, isActive }: PrimitiveTypesProps) => {
return (
<div>
<p>{message}</p>
<p>{count}</p>
<p>{isActive ? 'Active' : 'Inactive'}</p>
</div>
)
}
export default PrimitiveTypes
呼び出しは次のようになります。
// pages/index.tsx
import PrimitiveTypes from '../components/PrimitiveTypes'
export default function Home() {
return <PrimitiveTypes message="Hello, TypeScript!" count={2023} isActive={true} />
}
コード解説
ここでは、先程のソースコードを見ていきます。
まず、PrimitiveTypesProps という型を定義しています。この型は、PrimitiveTypes コンポーネントに渡すプロパティ（props）の型を指定しています。3 つのプロパティ message, count, isActive があり、それぞれ string, number, boolean というプリミティブ型を持っています。
次に、PrimitiveTypes という関数コンポーネントを定義しています。ここで、前述の PrimitiveTypesProps を用いてプロパティの型を指定しています。このコンポーネントは、渡された message, count, isActive を表示するだけのシンプルなものです
。
最後に、この PrimitiveTypes コンポーネントを Home コンポーネント内で呼び出しています。その際、プロパティとして文字列、数値、真偽値をそれぞれ渡しています。こうすることで、TypeScript はコンパイル時にこれらの値が PrimitiveTypes コンポーネントが期待する型と一致しているかをチェックしてくれるんですよ。
メリット
こうしたプリミティブ型を理解し、型を明示的に指定することにはいくつかのメリットがあります。
- バグの早期発見：型が不一致の場合、TypeScript はコンパイル時にエラーを吐きます。つまり、コードを実行する前に問題を発見できるというわけなんですよ。
- 自動補完とドキュメンテーション：型が明示的に指定されている場合、エディタはその型に基づいた自動補完を提供します。また、コードを読む人に対しても、それぞれの変数や関数が何を期待しているのかを明示的に示すことができます。
- 可読性と保守性の向上：明示的な型指定は、コードの可読性と保守性を向上させます。どの変数がどのような型を持つべきかを一目で理解できるからです。
以上が、TypeScript のプリミティブ型の理解とそれを活用した Next.js プロジェクトでのコーディングについての解説でした。