はじめに
Next.js / NestJSのコードを読めるようになりたくて、まずはTypeScriptの基礎から学習する。
今回はTypeScriptの基本となる「型」について、学んだ内容を備忘録としてまとめます。
環境
今回使用した環境。
- macOS
- Node.js：v25.1.0
- npm: 11.6.2
- TypeScript: Version 7.0.2
バージョンは以下で確認。
node -v
npm -v
npx tsc -v
TypeScriptとは
TypeScriptは、JavaScriptを拡張して型を扱えるようにした言語。
JavaScriptでは以下のように、最初に文字列を入れた変数へ数値を入れることもできる。
let userName = "Yamada";
userName = 123;
TypeScriptでは型を指定できる。
let userName: string = "Yamada";
userName = 123;
userNameはstringとしているため、numberの123を入れるとエラーになる。
型を指定することで、値の種類が違う場合にコードを書いている段階で気づける。
型とは
型は、その値が何の種類なのかを表すもの。
まずは以下の3つ。
| 型 | 意味 | 値の例 |
|---|---|---|
string |
文字列 | "Yamada" |
number |
数値 | 30 |
boolean |
真偽値 |
true, false
|
const userName: string = "Yamada";
const age: number = 30;
const isAdmin: boolean = false;
string
stringは文字列。
const userName: string = "Yamada";
const email: string = "example@example.com";
文字列は"や'で囲む。
以下はstringに数値を入れているためエラーになる。
const userName: string = 100;
number
numberは数値。
const age: number = 30;
const price: number = 1000;
整数だけでなく、小数もnumberになる。
const taxRate: number = 0.1;
以下はどちらも見た目は30だが、型は異なる。
30
はnumber。
"30"
はstring。
boolean
booleanはtrueまたはfalseを扱う。
const isAdmin: boolean = false;
const isLoggedIn: boolean = true;
ログインしているか、管理者かどうかなど、true / falseで持つ値に使う。
実際に動かしてみる
学習用の環境を作って実際に動かしてみた。
環境構築
ディレクトリを作成。
mkdir typescript-study
cd typescript-study
npmプロジェクトを作成。
npm init -y
TypeScriptをインストール。
npm install --save-dev typescript
tsconfig.jsonを作成。
npx tsc --init
今回はlesson01.tsを作成した。
実行
lesson01.tsに以下を記述。
const userName: string = "Yamada";
const age: number = 30;
const isAdmin: boolean = false;
console.log(userName);
console.log(age);
console.log(isAdmin);
コンパイル。
npx tsc
エラーは発生しなかった。
生成されたlesson01.jsを実行。
node lesson01.js
実行結果。
Yamada
30
false
型を間違えてみる
ageを以下に変更。
const userName: string = "Yamada";
const age: number = "30";
const isAdmin: boolean = false;
再度コンパイル。
npx tsc
以下のエラーが発生した。
lesson01.ts:2:7 - error TS2322: Type 'string' is not assignable to type 'number'.
2 const age: number = "30";
~~~
Found 1 error in lesson01.ts:2
ageはnumberなのに、stringの"30"を入れているためエラーになった。
Type 'string' is not assignable to type 'number'.
stringはnumberに代入できない、という内容。
以下のように数値へ戻すとエラーはなくなった。
const age: number = 30;
型が違う場合はコンパイル時に検出できることが確認できた。
tsc実行時にTS5112が発生
最初は以下でコンパイルしようとした。
npx tsc lesson01.ts
すると以下のエラーが発生。
error TS5112: tsconfig.json is present but will not be loaded if files are specified on commandline. Use '--ignoreConfig' to skip this error.
今回はtsconfig.jsonを作成しているため、ファイル名を指定せずに実行した。
npx tsc
型推論
TypeScriptでは毎回型を書く必要はない。
例えば以下。
const userName = "Yamada";
型を書いていないが、"Yamada"からTypeScriptがstringと判断する。
const age = 30;
const isAdmin = false;
この場合も、
-
ageはnumber -
isAdminはboolean
と判断される。
この仕組みを型推論という。
実際のコードでは型が書かれていないこともあるので、型指定がない = 型がない、ではない。
実際のコード例
Next.jsやNestJSのコードでは、以下のような形も出てくる。
type User = {
id: number;
name: string;
isAdmin: boolean;
};
typeについては別途学習するが、
id: number;
name: string;
isAdmin: boolean;
を見ると、
-
idは数値 -
nameは文字列 -
isAdminはtrue / false
を扱うことが分かる。
まずはこのあたりが読めればよさそう。
まとめ
今回はTypeScriptの型について確認した。
-
stringは文字列 -
numberは数値 -
booleanはtrue / false - 型が違う値を入れるとコンパイル時にエラーになる
- 型を書いていなくても型推論される場合がある
まだ基本部分だが、Next.js / NestJSのコードを読むためにもこのあたりから覚えていく。
次は変数・配列・オブジェクトについて確認する。