はじめに
前回はTypeScriptの基本となる型について確認した。
今回は、コードを読んでいるとよく出てくる変数・配列・オブジェクトについて学習する。
環境
今回使用した環境。
- macOS
- Node.js：v25.1.0
- npm: 11.6.2
- TypeScript: Version 7.0.2
第1回で作成したtypescript-studyをそのまま使用する。
今回はlesson02.tsを作成した。
変数
TypeScriptでは、値を入れておくためにconstやletを使う。
const
const userName = "Yamada";
userNameに"Yamada"を代入している。
型を指定する場合は以下。
const userName: string = "Yamada";
const age: number = 30;
前回確認した型推論があるため、
const userName = "Yamada";
const age = 30;
のように型を書かなくても、
-
userNameはstring -
ageはnumber
と判断される。
constは、一度代入した変数に別の値を再代入できない。
const userName = "Yamada";
userName = "Tanaka";
この場合はエラーになる。
let
あとから値を変更する場合はletを使う。
let userName = "Yamada";
userName = "Tanaka";
letは再代入できる。
今のところ、
const → あとから値を入れ直さない
let → あとから値を入れ直す
くらいで覚えておく。
配列
複数の値をまとめて扱う場合は配列を使う。
const skills = ["TypeScript", "Next.js", "NestJS"];
型を指定すると以下のようになる。
const skills: string[] = [
"TypeScript",
"Next.js",
"NestJS",
];
string[]は、string型の値を持つ配列。
数値の場合はnumber[]。
const scores: number[] = [80, 90, 100];
配列から値を取得する
配列の値は、添字を指定して取得できる。
const skills = ["TypeScript", "Next.js", "NestJS"];
console.log(skills[0]);
console.log(skills[1]);
console.log(skills[2]);
実行結果。
TypeScript
Next.js
NestJS
配列は0から始まる。
skills[0] → TypeScript
skills[1] → Next.js
skills[2] → NestJS
配列の型を間違えてみる
string[]としている配列に数値を入れてみる。
const skills: string[] = [
"TypeScript",
"Next.js",
100,
];
100はnumberなので、string[]には入れられない。
実際にコンパイルするとエラーになる。
npx tsc
以下のようなエラーが発生する。
Type 'number' is not assignable to type 'string'.
第1回で確認した、
const age: number = "30";
と同じで、指定した型と違う値を入れるとエラーになる。
オブジェクト
関連する複数の値をまとめて扱う場合はオブジェクトを使う。
例えばユーザー情報。
const user = {
id: 1,
name: "Yamada",
isAdmin: false,
};
このuserには、
idnameisAdmin
の3つの値が入っている。
オブジェクトから値を取得する
オブジェクトの値は以下のように取得できる。
console.log(user.id);
console.log(user.name);
console.log(user.isAdmin);
実行結果。
1
Yamada
false
user.nameのように、オブジェクト名のあとに.を付けて取得する。
オブジェクトの型
オブジェクトにも型を指定できる。
const user: {
id: number;
name: string;
isAdmin: boolean;
} = {
id: 1,
name: "Yamada",
isAdmin: false,
};
それぞれ、
id: number;
name: string;
isAdmin: boolean;
となっているため、
-
idは数値 -
nameは文字列 -
isAdminはtrue / false
を入れる。
例えばidに文字列を入れる。
const user: {
id: number;
name: string;
isAdmin: boolean;
} = {
id: "1",
name: "Yamada",
isAdmin: false,
};
idはnumberなのに、"1"はstringなのでエラーになる。
Type 'string' is not assignable to type 'number'.
オブジェクトでも、前回確認した基本的な型がそのまま使われている。
毎回このようにオブジェクトの型を書くと長くなるため、typeやinterfaceを使って定義する方法がある。
このあたりは次回確認する。
実際に動かしてみる
lesson02.tsに以下を記述。
const userName = "Yamada";
const skills: string[] = [
"TypeScript",
"Next.js",
"NestJS",
];
const user = {
id: 1,
name: "Yamada",
isAdmin: false,
};
console.log(userName);
console.log(skills[0]);
console.log(user.name);
コンパイル。
npx tsc
生成されたJavaScriptを実行する。
node lesson02.js
実行結果。
Yamada
TypeScript
Yamada
変数、配列、オブジェクトからそれぞれ値を取得できた。
オブジェクトの配列
実際のコードでは、オブジェクトを配列として持つ形もよくありそう。
const users = [
{
id: 1,
name: "Yamada",
},
{
id: 2,
name: "Tanaka",
},
];
usersという配列の中に、ユーザー情報のオブジェクトが複数入っている。
1人目の名前を取得する場合は、
console.log(users[0].name);
実行結果。
Yamada
配列とオブジェクトを組み合わせると、
users[0].name
のような書き方になる。
APIから複数件のデータを取得する場合などでも、このような形を見ることがありそうなので覚えておきたい。
まとめ
今回は変数・配列・オブジェクトについて確認した。
-
constは再代入できない -
letは再代入できる -
string[]は文字列の配列 -
number[]は数値の配列 - 配列は
0から始まる - オブジェクトは関連する値をまとめて持てる
- オブジェクトにも型を指定できる
- 配列の中にオブジェクトを持つこともできる
特に、
const users = [
{
id: 1,
name: "Yamada",
},
];
のような配列とオブジェクトを組み合わせた形は、今後コードを読むうえでもよく出てきそう。
次はtypeとinterfaceについて確認する。