🦋

【入門 TypeScript】オブジェクトの型

2025/11/09に公開

JavaScript

typescrip

tech

はじめに

この記事では主に、技術評論社の「プロを目指す人のためのTypeScript入門安全なコードの書き方から高度な型の使い方まで (Software Design plus)」を中心に学んだことを備忘録目的でまとめていきます。参考書籍と必ずしもセクションが同じとは限りませんので、あらかじめご承知おきください。基本的に知識まとめの文章表現は常体（だ・である調）で表現しています。

【リンク紹介】
・入門 TypeScriptまとめ記事一覧
・これまで書いたシリーズ記事一覧

参考書籍について

より詳しく内容を知りたい方は「プロを目指す人のためのTypeScript入門安全なコードの書き方から高度な型の使い方まで (Software Design plus)」をお手に取ってみてください。記事ではほとんど省略していますが、非常に細かく説明されているので、文法書のバイブルとして購入するのをお勧めします。

この記事の実行環境について

テキストのサンプルだと実際に動かして確認することができないため、この記事では実行できるようにJavaScript実行環境の「node.js」を使って、シンプルなプロジェクトを作成することにしました。
※PCにnode.jsがインストールされていることが前提です。

シンプルなプロジェクトを作成

# 作業したいディレクトリを作成
mkdir directory-name
# 作成したディレクトリ内に移動
cd directory-name
# プロジェクトの初期化（package.jsonの作成）
npm init

実行後にpackage name:をはじめいくつか質問されますが、今回は実行環境が欲しいだけなので、最初のこのpackage nameだけを入力すれば良いです。するとディレクトリ内に次のようなpackage.jsonが作成されます。

packege.json

{
  "name": "最初に入力したプロジェクト名",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "author": "",
  "type": "commonjs",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

あとは任意のTypeScriptファイルを作成して、VSCode内でnode [ファイル名]で実行すれば、出力結果を確認することができます。

1. オブジェクト型の記法

オブジェクト型の構文は { プロパティ名: 型 } であり、オブジェクトの定義と似ているが式の代わりに型を明記する。

// 型注釈なしで変数宣言
const object = {
  property: "expression",
};


// 型注釈ありで変数宣言
const object: { 
  property: string
} = {
  property: "expression",
};

2. type文で型に別名をつける

type文は型名を宣言する文で、構文は type 型名 = 型; である。

// type文
type typeName = {
  property: string;
};

// 型注釈ありで変数宣言
const object: typeName = {
  property: "expression",
};

3. interface宣言でオブジェクト型を宣言する

interface宣言はtype文のように型定義するものだが、オブジェクト型のみを型定義する。interface宣言の構文は interface 型名オブジェクト型 である。

// interface宣言
interface typeName {
  property: string;
};

// 型注釈ありで変数宣言
const object: typeName = {
  property: "expression",
};

4. インデックスシグネチャ

インデックスシグネチャはオブジェクト型の中で使用でき、任意のプロパティ名を許容する型である。基本構文は [キー名: string]: 型 となる。

// インデックスシグネチャを使って型定義
type typeName = {
  [key: string]: number;
};

const object: typeName = {
  a: 1,
  b: 2,
  c: 3,
}

5. オプショナルなプロパティの宣言

オプショナルなプロパティとは、あってもなくてもよいプロパティのことで、 プロパティ名: 型
と記述することで宣言される。

// オプショナルプロパティを持つ型の定義
type typeName = {
  property1: number;
  property2: number;
  property3?: number;
};

const object1: typeName = {
  property1: 1,
  property2: 2,
};

6. 読み取り専用プロパティの宣言

プロパティ名の前にreadmeを記述することで、プロパティを読み取り専用にすることができる。

// 読み取り専用プロパティを持つ型の定義
type typeName = {
  readonly property: number;
};

// 読み取り専用プロパティを持つオブジェクトの作成
const object: typeName = {
  property: 1,
};

// 値を代入しようとするとエラーになる
object.property = 2;

7. typeofキーワードで変数の型を得る

typeof 変数名という構文を用いて、その変数が持つ型を表す。これは主に型推論の結果をtypeofキーワードを用いて抽出し、判定結果毎に異なる処理を行う場合などに用いられる。

参考資料：JavaScriptの「typeof」を5分で完全理解！初心者が陥りがちな7つの罠と解決法

// typeofキーワードの使用例
console.log(typeof "文字列"); // string型
console.log(typeof 123);     // number型
console.log(typeof true);    // boolean型
let x;
console.log(typeof x);      // undefined型
console.log(typeof {});     // object型
console.log(typeof []);     // object型（配列）
console.log(typeof null);   // object型（バグ。JavaScriptの仕様による）
console.log(typeof function() {}); // function型
console.log(typeof (() => {}));    // function型(アロー関数)