TypeScriptの基礎 - オブジェクト型とインターフェースのソースを表示

== 概要 ==
TypeScriptでは、オブジェクトの構造を型として定義するための仕組みとして、オブジェクト型リテラルと <code>interface</code> の2つが提供されている。<br>
これらは、オブジェクトが持つべきプロパティとその型を宣言することで、コンパイル時に構造の整合性を検証する役割を果たす。<br>
<br>
2026年2月時点でTypeScript 5.9が安定版としてリリースされており、<br>
TypeScript 6.0ベータでは <code>strict: true</code> のデフォルト化や <code>target: "es2025"</code> への変更等が含まれている。<br>
<Br>
さらに、Go言語で書き直されるTypeScript 7.0では最大10倍のコンパイル速度向上が見込まれている。<br>
<br>
<center>
{| class="wikitable"
|+ オブジェクト型の定義方法
! 定義方法 !! 説明
|-
| rowspan="2" | オブジェクト型リテラル
| <code>type</code> キーワードと波括弧を用いてオブジェクトの形状を定義する方法
|-
| インラインでの型注釈としても使用でき、局所的な型定義に適している。
|-
| rowspan="2" | <code>interface</code>
| オブジェクトの構造を定義するための専用構文
|-
| オプショナルプロパティ、読み取り専用プロパティ、インデックスシグネチャ、<br><code>extends</code> による拡張、Declaration Merging (宣言マージ) 等の機能を持つ。
|}
</center>
<br>
オブジェクト型の定義には <code>interface</code> を優先し、ユニオン型やインターセクション型が必要な場合に <code>type</code> を使用するのが一般的な指針である。<br>
<br>
パフォーマンスでは、<code>interface</code> の <code>extends</code> はコンパイラが結果をキャッシュするため、<br>
<code>type</code> の <code>&</code> (交差型) より高速に処理される。<br>
<br>
また、<code>Partial</code>、<code>Pick</code>、<code>Omit</code>、<code>Record</code>、<code>Required</code> 等のユーティリティ型と組み合わせることにより、オブジェクト型の柔軟な変換が可能である。<br>
<br>
TypeScript 4.9で導入された <code>satisfies</code> 演算子を使用すると、オブジェクトが特定の型を満たすことを検証しつつ、値の具体的な型情報を保持できる。<br>
<br>
型エイリアスの詳細については、[[TypeScriptの基礎 - 型エイリアス]]のページを参照すること。<br>
<br><br>

== オブジェクト型リテラル ==
オブジェクト型リテラルとは、オブジェクトのプロパティ名と型の対応を波括弧で囲んで記述することにより、オブジェクトの形状を定義する記法である。<br>
<code>type</code> キーワードと組み合わせて型エイリアスとして定義する、または、インラインで型注釈として使用することができる。<br>
<br>
==== 基本的な構文 ====
<code>type</code> キーワードを使用してオブジェクト型を定義する基本的な構文は以下の通りである。<br>
<br>
 <syntaxhighlight lang="typescript">
 type <型名> = {
    <プロパティ名>: <型>;
    <プロパティ名>: <型>;
 };
 </syntaxhighlight>
<br>
具体的な例を以下に示す。<br>
<br>
 <syntaxhighlight lang="typescript">
 type Person = {
    name: string;
    age: number;
 };
 
 function greet(person: Person) {
    return "Hello " + person.name;
 }
 
 const alice: Person = { name: "Alice", age: 30 };
 console.log(greet(alice));  // "Hello Alice"
 </syntaxhighlight>
<br>
複数のプロパティを持つ型も同様に定義できる。<br>
<br>
 <syntaxhighlight lang="typescript">
 type User = {
    id: number;
    username: string;
    email: string;
    isActive: boolean;
 };
 </syntaxhighlight>
<br>
オブジェクト型はインラインで型注釈として使用することもできる。<br>
型エイリアスを定義するほどではない局所的な用途に適している。<br>
<br>
 <syntaxhighlight lang="typescript">
 function printUser(user: { name: string; age: number }) {
    console.log(`${user.name} (${user.age})`);
 }
 </syntaxhighlight>
<br>
==== ネストしたオブジェクト型 ====
オブジェクト型のプロパティに別のオブジェクト型を指定することにより、ネストした構造を表現できる。<br>
<br>
 <syntaxhighlight lang="typescript">
 type Address = {
    street: string;
    city: string;
    country: string;
    postalCode: string;
 };
 
 type UserWithAddress = {
    id: number;
    name: string;
    address: Address;
 };
 
 const user: UserWithAddress = {
    id: 1,
    name: "Alice",
    address: {
       street: "123 Main St",
       city: "Tokyo",
       country: "Japan",
       postalCode: "100-0001",
    },
 };
 </syntaxhighlight>
<br>
ネストしたオブジェクト型を個別の <code>type</code> として分離することにより、型の再利用性が高まる。<br>
<br><br>

== interface ==
<code>interface</code> はオブジェクトの構造を定義するための専用構文であり、TypeScriptが提供する重要な型定義の仕組みである。<br>
<br>
オブジェクト型リテラルと同様にオブジェクトの形状を定義できるが、Declaration Merging (宣言マージ) や <code>extends</code> による拡張等、<br>
<code>interface</code> 固有の機能を持つ。<br>
<br>
==== interfaceの定義 ====
<code>interface</code> キーワードを使用してオブジェクトの構造を定義する。<br>
<br>
 <syntaxhighlight lang="typescript">
 interface User {
    id: number;
    name: string;
    email: string;
 }
 
 const user: User = {
    id: 1,
    name: "Alice",
    email: "alice@example.com",
 };
 </syntaxhighlight>
<br>
<code>interface</code> と <code>type</code> によるオブジェクト型定義は、多くの場面で同等に使用できる。<br>
<br>
==== オプショナルプロパティ ====
プロパティ名の後に <code>?</code> を付与することで、省略可能なプロパティを定義できる。<br>
<br>
オプショナルプロパティを持つオブジェクトは、そのプロパティを持たない形式でも型チェックをパスする。<br>
<br>
 <syntaxhighlight lang="typescript">
 interface User {
    name: string;
    age?: number;  // オプショナルプロパティ
 }
 
 const user1: User = { name: "Alice" };         // OK : ageは省略可能
 const user2: User = { name: "Bob", age: 30 };  // OK : ageを指定してもよい
 </syntaxhighlight>
<br>
オプショナルプロパティの型は、指定した型と <u>undefined</u> のユニオン型として扱われる。<br>
例えば、上記の <u>age?</u> の型は <u>number | undefined</u> となる。<br>
<br>
オプショナルプロパティを参照する時には、<u>undefined</u> の可能性を考慮した処理が必要である。<br>
<br>
 <syntaxhighlight lang="typescript">
 function displayUser(user: User): void {
    console.log(user.name);
 
    // ageがundefinedの場合を考慮する
    if (user.age !== undefined) {
       console.log(user.age.toString());
    }
 
    // オプショナルチェーン演算子を使用する方法
    console.log(user.age?.toString() ?? "年齢未設定");
 }
 </syntaxhighlight>
<br>
==== 読み取り専用プロパティ (readonly) ====
<code>readonly</code> キーワードをプロパティ名の前に付与することにより、初期化後に変更できない読み取り専用プロパティを定義できる。<br>
<br>
 <syntaxhighlight lang="typescript">
 interface SomeType {
    readonly prop: string;
 }
 
 function doSomething(obj: SomeType): void {
    console.log(obj.prop);  // 読み取りはOK
    obj.prop = "hello";     // エラー : 読み取り専用プロパティには割り当てできない
 }
 </syntaxhighlight>
<br>
<code>readonly</code> は配列型にも適用できる。<br>
<br>
 <syntaxhighlight lang="typescript">
 function doStuff(values: readonly string[]): void {
    const copy = values.slice();  // 読み取りはOK
    values.push("hello!");        // エラー : 読み取り専用配列に追加できない
 }
 </syntaxhighlight>
<br>
<code>Readonly</code> ユーティリティ型を使用することにより、既存の型の全プロパティを一括して読み取り専用にすることもできる。<br>
<br>
 <syntaxhighlight lang="typescript">
 type A = Readonly<{ a: string; b: number }>;
 // 結果: { readonly a: string; readonly b: number }
 </syntaxhighlight>
<br>
<u><code>readonly</code> はTypeScriptの型チェック上の制約であり、JavaScriptの実行時には影響しない琴に注意が必要である。</u><br>
<br>
==== インデックスシグネチャ ====
事前にプロパティ名が分からない場合、インデックスシグネチャを使用して動的なプロパティの型を定義できる。<br>
<br>
インデックスシグネチャは、<code>[<キー名>: <キーの型>]: <値の型></code> という形式で記述する。<br>
<br>
* 文字列キーを使用するインデックスシグネチャの例
*: <syntaxhighlight lang="typescript">
 interface BooleanDictionary {
    [key: string]: boolean;
 }
 
 let myDict: BooleanDictionary;
 myDict["foo"] = true;    // OK
 myDict["bar"] = false;   // OK
 myDict["baz"] = "oops";  // エラー: string は boolean に割り当てられない
 </syntaxhighlight>
*: <br>
* 数値キーを使用するインデックスシグネチャの例
*: <syntaxhighlight lang="typescript">
 interface StringArray {
    [index: number]: string;
 }
 
 const arr: StringArray = ["Alice", "Bob", "Carol"];
 const name: string = arr[0];  // OK
 </syntaxhighlight>
<br>
<u>インデックスシグネチャを持つ <code>interface</code> に通常のプロパティを追加する場合、そのプロパティの型はインデックスシグネチャの値の型と互換性がなければならない。</u><br>
<br>
 <syntaxhighlight lang="typescript">
 interface NumberDictionary {
    [index: string]: number;
    length: number;   // OK : numberはインデックスシグネチャの値型と一致する
    name: string;     // エラー : stringはnumberに割り当てられない
 }
 </syntaxhighlight>
<br>
<u>また、<code>keyof</code> 演算子を文字列インデックスシグネチャに適用すると、<code>string | number</code> になる琴に注意が必要である。</u><br>
<u>これは、JavaScriptにおいて、数値キーは内部的に文字列として扱われるためである。</u><br>
<br>
 <syntaxhighlight lang="typescript">
 type Mapish = { [k: string]: boolean };
 type M = keyof Mapish;  // string | number
 </syntaxhighlight>
<br><br>

==== interfaceの拡張 (extends) ====
<code>extends</code> キーワードを使用することにより、既存の <code>interface</code> のプロパティを継承した新しい <code>interface</code> を定義できる。<br>
<br>
 <syntaxhighlight lang="typescript">
 interface BasicAddress {
    name?: string;
    street: string;
    city: string;
    country: string;
    postalCode: string;
 }
 
 interface AddressWithUnit extends BasicAddress {
    unit: string;  // BasicAddress の全プロパティに加えて unit を追加
 }
 
 const address: AddressWithUnit = {
    street: "123 Main St",
    city: "Tokyo",
    country: "Japan",
    postalCode: "100-0001",
    unit: "3F",
 };
 </syntaxhighlight>
<br>
複数の <code>interface</code> を同時に拡張することもできる。<br>
カンマ区切りで複数の <code>interface</code> を指定することにより、それらの全プロパティを継承できる。<br>
<br>
 <syntaxhighlight lang="typescript">
 interface Colorful {
    color: string;
 }
 
 interface Circle {
    radius: number;
 }
 
 interface ColorfulCircle extends Colorful, Circle {}
 
 const cc: ColorfulCircle = {
    color: "red",
    radius: 42,
 };
 </syntaxhighlight>
<br>
<code>extends</code> による拡張は、共通のプロパティを持つ基底 <code>interface</code> を定義して再利用性を高める際に有用である。<br>
<br>
==== Declaration Merging ====
TypeScriptでは、同名の <code>interface</code> を複数回宣言すると、それらが自動的にマージされる仕組みがある。<br>
この機能を <u>Declaration Merging (宣言マージ)</u> と呼ぶ。<br>
<br>
 <syntaxhighlight lang="typescript">
 interface Foo {
    x: number;
 }
 
 interface Foo {
    y: number;
 }
 
 let a: Foo;
 console.log(a.x + a.y);  // OK : xとyの両方にアクセス可能
 </syntaxhighlight>
<br>
同名のプロパティが異なる型で宣言された場合はコンパイルエラーとなる。<br>
<br>
 <syntaxhighlight lang="typescript">
 interface Foo {
    x: number;
 }
 
 interface Foo {
    x: string;  // エラー : xがnumberとstringで矛盾する
 }
 </syntaxhighlight>
<br>
<code>type</code> エイリアスでは、Declaration Mergingはできない。<br>
同名の <code>type</code> を再宣言しようとするとコンパイルエラーとなる。<br>
<br>
 <syntaxhighlight lang="typescript">
 type Bar = { x: number };
 type Bar = { y: number };   // エラー: 識別子 'Bar' が重複している
 </syntaxhighlight>
<br>
下表に、Declaration Mergingの主な用途を示す。<br>
<br>
<center>
{| class="wikitable"
|+ Declaration Mergingの主な用途
! 用途 !! 説明
|-
| ライブラリの型定義を拡張する場合 || 外部ライブラリが提供する <code>interface</code> に独自プロパティを追加する。
|-
| グローバルオブジェクトに新しいプロパティを追加する場合 || <code>Window</code> や <code>NodeJS.ProcessEnv</code> 等のグローバルinterfaceを拡張する。
|-
| モジュールの型を補完する場合 || モジュールオーグメンテーション (Module Augmentation) で既存の型定義を補強する。
|}
</center>
<br>
<u>Declaration Mergingは、ライブラリ開発や型定義の拡張において有用な機能であるが、同じスコープ内での多用はコードの可読性を低下させる可能性があるため、</u><br>
<u>使用する場面を適切に判断することが重要である。</u><br>
<br><br>

== 関連情報 ==
* [[TypeScriptの基礎 - tsconfig.json]]
* [[TypeScriptの基礎 - 型注釈とプリミティブ型]]
* [[TypeScriptの基礎 - 型推論]]
* [[TypeScriptの基礎 - 型エイリアス]]
* [[TypeScriptの基礎 - 関数の型定義]]
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Rust]][[カテゴリ:Web]]