TypeScriptの基礎 - 型注釈とプリミティブ型のソースを表示

== 概要 ==
TypeScriptは、JavaScriptに静的型付けを追加したプログラミング言語であり、コードの品質と保守性を向上させる。<br>
その中心となる概念が <u>型注釈</u> (Type Annotation) と <u>型</u> である。<br>
<br>
TypeScriptの基本的な型システムを構成する要素を以下に示す。<br>
* 型注釈 (Type Annotation)
*: 変数、関数の引数、戻り値に対して型を明示的に指定する構文
* プリミティブ型
*: string、number、boolean、null、undefined、symbol、bigintの7種類
* リテラル型
*: 特定の値そのものを型として扱う仕組み
* 特殊な型
*: any、unknown、void、neverといった特殊な用途を持つ型
<br>
TypeScriptの型システムを理解することで、バグを早期に発見し、IDEのコード補完や静的解析の恩恵を最大限に活用できる。<br>
<br>
型注釈の省略と型推論については、[[TypeScriptの基礎 - 型推論]]のページを参照すること。<br>
<br><br>

== 型注釈 (Type Annotation) ==
型注釈とは、変数や関数に対してデータの型を明示的に指定する構文である。<br>
コロン (<code>:</code>) の後に型名を記述することにより、TypeScriptコンパイラに型情報を伝える。<br>
<br>
==== 変数の型注釈 ====
変数の型注釈は、変数名の直後にコロンと型名を記述する。<br>
<br>
基本的な構文は以下の通りである。<br>
<br>
 <syntaxhighlight lang="typescript">
 let <変数名>: <型名> = <初期値>;
 </syntaxhighlight>
<br>
具体的な例を以下に示す。<br>
<br>
 <syntaxhighlight lang="typescript">
 let userName: string  = "Alice";
 let age: number       = 30;
 let isActive: boolean = true;
 let score: number;  // 初期値なしも可能 (undefinedになる)
 </syntaxhighlight>
<br>
型注釈が必要な場面と省略できる場面を以下にまとめる。<br>
<br>
<center>
{| class="wikitable"
|+ 型注釈の要否
! 区分 !! 場面 !! 説明
|-
| rowspan="3" | 型注釈が必要な場面
| 関数のパラメータ || TypeScriptは関数の引数の型を推論しないため、明示的な型注釈が必要
|-
| 公開APIの戻り値 || ライブラリや公開インターフェースでは意図を明確にするため記述する。
|-
| 複雑なオブジェクト || 型推論では不十分な場合に明示する。
|-
| rowspan="3" | 型注釈を省略できる場面
| 変数の初期化時 || 初期値から型推論が可能なため、省略しても同等の型安全性が得られる。
|-
| 単純な関数の戻り値 || 実装から型推論が可能な場合
|-
| コールバック関数の引数 || 高階関数の型定義から推論される場合
|}
</center>
<br><br>

==== 関数の引数の型注釈 ====
関数のパラメータは、TypeScriptが自動推論を行わないため、型注釈が必須である。<br>
<br>
 <syntaxhighlight lang="typescript">
 function greet(name: string): void {
    console.log(`Hello, ${name}!`);
 }
 
 function add(a: number, b: number): number {
    return a + b;
 }
 
 // 複数の型を受け入れる場合 (ユニオン型)
 function display(value: string | number): void {
    console.log(value);
 }
 </syntaxhighlight>
<br>
型注釈が正しく機能すると、誤った型の引数を渡した時にコンパイル時にエラーが発生する。<br>
<br>
 <syntaxhighlight lang="typescript">
 greet(42);  // エラー: Argument of type 'number' is not assignable to parameter of type 'string'.
 </syntaxhighlight>
<br>
==== 関数の戻り値の型注釈 ====
関数の戻り値の型は、引数リストの閉じ括弧の後にコロンと型名を記述する。<br>
<br>
 <syntaxhighlight lang="typescript">
 // 戻り値がnumberの場合
 function multiply(a: number, b: number): number {
    return a * b;
 }
 
 // 戻り値がない場合はvoid
 function logMessage(message: string): void {
    console.log(message);
 }
 
 // 戻り値がstring または nullの場合
 function findUser(id: number): string | null {
    if (id === 1) {
       return "Alice";
    }
    return null;
 }
 </syntaxhighlight>
<br>
戻り値の型注釈は、関数の意図を明確にし、誤った値を返した場合にコンパイル時にエラーを発生させる。<br>
<br><br>

== プリミティブ型 ==
TypeScriptのプリミティブ型は、JavaScriptのプリミティブ型に対応する7種類の基本的な型である。<br>
これらは、TypeScriptの型システムの基盤となる。<br>
<br>
==== string ====
<code>string</code> 型は、文字列値を表す型である。<br>
シングルクォート、ダブルクォート、バッククォート (テンプレートリテラル) のいずれで記述した文字列も <code>string</code> 型となる。<br>
<br>
 <syntaxhighlight lang="typescript">
 let firstName: string = "Alice";
 let lastName: string  = 'Bob';
 let fullName: string  = `${firstName} ${lastName}`;  // テンプレートリテラルも string 型
 
 let greeting: string  = `Hello, ${firstName}!`;
 </syntaxhighlight>
<br>
文字列の操作に関するメソッド (length、toUpperCase、slice 等) も <code>string</code> 型の値に対して利用できる。<br>
<br>
==== number ====
<code>number</code> 型は、全ての数値を表す型である。<br>
JavaScriptと同様に、整数と浮動小数点数の区別はなく、全て <code>number</code> 型で扱われる。<br>
<br>
 <syntaxhighlight lang="typescript">
 let integer: number  = 42;
 let float: number    = 3.14;
 let negative: number = -10;
 
 // 各種数値リテラルもnumber型
 let hex: number    = 0xFF;    // 16進数
 let binary: number = 0b1010;  // 2進数
 let octal: number  = 0o777;   // 8進数
 
 // 特殊なnumber値
 let infinity: number   = Infinity;
 let notANumber: number = NaN;
 </syntaxhighlight>
<br>
<u>非常に大きな整数を扱う場合は、<code>number</code> 型では精度が失われる可能性があるため、<code>bigint</code> 型の使用を検討する。</u><br>
<br>
==== boolean ====
<code>boolean</code> 型は、真偽値を表す型であり、<u>true</u> または <u>false</u> のいずれかの値を持つ。<br>
<br>
 <syntaxhighlight lang="typescript">
 let isActive: boolean    = true;
 let isCompleted: boolean = false;
 
 // 比較演算の結果もboolean型
 let isAdult: boolean       = age >= 18;
 let hasPermission: boolean = role === "admin";
 </syntaxhighlight>
<br>
条件分岐 (<code>if</code> 文) や ループ (<code>while</code> 文) の条件式で使用される。<br>
<br>
==== null と undefined ====
<u>null</u> と <u>undefined</u> は、TypeScriptにおいて別々の型として扱われる。<br>
<br>
<center>
{| class="wikitable"
|+ undefined と null の違い
! 型 !! 説明
|-
| undefined || 値が未定義の状態を表す。<br>変数宣言後に値が代入されていない場合などに発生する。
|-
| null || 値がないことを明示的に表す。<br>意図的に <u>値がない</u> 状態を示す場合に使用する。
|}
</center>
<br>
 <syntaxhighlight lang="typescript">
 let notDefined: undefined = undefined;
 let noValue: null         = null;
 </syntaxhighlight>
<br>
<u>tsconfig.jsonファイル</u> で <code>strictNullChecks</code> が有効な場合 (推奨設定)、<u>null</u> と <u>undefined</u> は他の型に代入できない。<br>
<br>
 <syntaxhighlight lang="typescript">
 // strictNullChecksが有効な場合
 let name: string = null;             // エラー: Type 'null' is not assignable to type 'string'.

 // ユニオン型で明示的にnullを許可する
 let userName: string | null = null;  // OK
 userName = "Alice";                  // OK
 </syntaxhighlight>
<br>
<code>strictNullChecks</code> の詳細は、[[TypeScriptの基礎 - tsconfig.json]]のページを参照すること。<br>
<br>
==== symbol ====
<code>symbol</code> 型は、<code>Symbol()</code> 関数で生成されるユニークな識別子を表す型である。<br>
同じ説明を持つシンボルでも、異なるインスタンスは等しくならないという特性を持つ。<br>
<br>
 <syntaxhighlight lang="typescript">
 let sym1: symbol = Symbol("description");
 let sym2: symbol = Symbol("description");
 
 console.log(sym1 === sym2);  // false (異なるインスタンスは常に不等)
 
 // オブジェクトのユニークなプロパティキーとして使用
 const KEY = Symbol("key");
 const obj = {
    [KEY]: "value"
 };
 </syntaxhighlight>
<br>
<code>symbol</code> 型は、プロパティキーの衝突を防ぐ用途や、メタプログラミングに利用される。<br>
<br>
==== bigint ====
<code>bigint</code> 型は、ES2020以降で利用可能な型であり、<code>number</code> 型では表現できないほど大きな整数を扱う。<br>
<br>
リテラル構文は、数値の末尾に <code>n</code> を付与する形式である。<br>
<br>
 <syntaxhighlight lang="typescript">
 let bigNumber: bigint = 100n;
 let veryLarge: bigint = 9007199254740991n;
 
 // BigInt()関数でも生成可能
 let fromFunction: bigint = BigInt(100);
 </syntaxhighlight>
<br>
<u><code>bigint</code> と <code>number</code> は別の型であり、直接の算術演算は行えない点に注意が必要である。</u><br>
<br>
 <syntaxhighlight lang="typescript">
 let n: number = 10;
 let b: bigint = 20n;
 
 let result = n + b;  // エラー: Operator '+' cannot be applied to types 'number' and 'bigint'.
 </syntaxhighlight>
<br>
<u><code>bigint</code> 型を使用するには、<u>tsconfig.jsonファイル</u> の <code>target</code> を <code>ES2020</code> 以降に設定する必要がある。</u><br>
<br><br>

== リテラル型 ==
リテラル型は、TypeScriptの型システムにおける強力な機能の1つである。<br>
特定の値を型として使用することにより、より厳密な型制約を表現できる。<br>
<br>
==== リテラル型とは ====
リテラル型とは、特定の値そのものを型として扱う仕組みである。<br>
例えば、<u><code>string</code> 型があらゆる文字列を表す</u> のに対し、<u>文字列リテラル型 <code>"left"</code> は <code>"left"</code> という値のみ</u> を表す。<br>
<br>
 <syntaxhighlight lang="typescript">
 // string型 : あらゆる文字列を受け入れる
 let direction1: string = "left";
 direction1 = "anything";   // OK
 
 // リテラル型 : "left"という値のみを受け入れる
 let direction2: "left" = "left";
 direction2 = "right";      // エラー: Type '"right"' is not assignable to type '"left"'.
 </syntaxhighlight>
<br>
<u>リテラル型はユニオン型 (<code>|</code>) と組み合わせて使用することにより、取り得る値を限定した型を定義できる。</u><br>
<br>
==== 文字列リテラル型 ====
文字列リテラル型は、特定の文字列値のみを受け入れる型である。<br>
ユニオン型と組み合わせて、列挙的な制約を表現するために広く使用される。<br>
<br>
 <syntaxhighlight lang="typescript">
 // ユニオン型による文字列リテラル型
 type Direction = "left" | "right" | "center";
 type Status = "active" | "inactive" | "pending";
 
 function setAlignment(alignment: Direction): void {
    console.log(`Alignment: ${alignment}`);
 }
 
 setAlignment("left");    // OK
 setAlignment("center");  // OK
 setAlignment("top");     // エラー: Argument of type '"top"' is not assignable to parameter of type 'Direction'.
 </syntaxhighlight>
<br>
文字列リテラル型により、無効な値の使用をコンパイル時に検出できる。<br>
<br>
==== 数値リテラル型 ====
数値リテラル型は、特定の数値のみを受け入れる型である。<br>
サイコロの目や特定のコードの値など、取り得る数値が限定される場面で活用する。<br>
<br>
 <syntaxhighlight lang="typescript">
 // サイコロの目を表す型
 type DiceValue = 1 | 2 | 3 | 4 | 5 | 6;
 
 function rollDice(): DiceValue {
    return (Math.floor(Math.random() * 6) + 1) as DiceValue;
 }
 
 let result: DiceValue  = 3;  // OK
 let invalid: DiceValue = 7;  // エラー: Type '7' is not assignable to type 'DiceValue'.
 </syntaxhighlight>
<br>
==== 真偽値リテラル型 ====
真偽値リテラル型は、<u>true</u> または <u>false</u> という具体的な値を型として扱う。<br>
条件によって型が異なる場合や、特定の状態を型レベルで表現する際に使用する。<br>
<br>
 <syntaxhighlight lang="typescript">
 type AlwaysTrue  = true;
 type AlwaysFalse = false;
 
 // 成功・失敗を型で表現する例
 type SuccessResult = { success: true; data: string };
 type FailureResult = { success: false; error: string };
 type Result = SuccessResult | FailureResult;
 
 function processResult(result: Result): void {
    if (result.success) {
       console.log(result.data);   // TypeScriptは、result.dataがstringと認識する
    }
    else {
       console.log(result.error);  // TypeScriptは、result.errorがstringと認識する
    }
 }
 </syntaxhighlight>
<br>
==== let と const での型推論の違い ====
<code>let</code> と <code>const</code> では、型注釈を省略した場合の型推論の結果が異なる。<br>
この動作は、<u>型ワイドニング</u> (Type Widening) と呼ばれる。<br>
<br>
 <syntaxhighlight lang="typescript">
 // let : ワイドな型に推論される
 let color = "red";     // 型: string
 color = "blue";        // OK (string 型の任意の値を代入可能)
 
 // const: リテラル型に推論される
 const theme = "dark";  // 型: "dark" (再代入不可のためリテラル型)
 </syntaxhighlight>
<br>
<code>let</code> の場合、変数は後から別の値に変更される可能性があるため、TypeScriptは広い型 (<code>string</code>) に推論する。<br>
<code>const</code> の場合、変数は再代入されないことが確定しているため、TypeScriptはリテラル型 (<code>"dark"</code>) に推論する。<br>
<br>
<center>
{| class="wikitable"
|+ let と constの型推論の違い
! 宣言 !! コード例 !! 推論される型 !! 理由
|-
| <code>let</code> || <u>let color = "red"</u> || string || 再代入の可能性があるためワイドな型
|-
| <code>const</code> || <u>const theme = "dark"</u> || "dark" || 再代入不可のためリテラル型
|-
| <code>let</code> || <u>let count = 0</u> || number || 再代入の可能性があるためワイドな型
|-
| <code>const</code> || <u>const MAX = 100</u> || 100 || 再代入不可のためリテラル型
|}
</center>
<br>
型ワイドニングの詳細な仕組みと制御方法は、[[TypeScriptの基礎 - 型推論]]のページを参照すること。<br>
<br><br>

== 特殊な型 ==
TypeScriptには、特殊な用途のために設けられた型が存在する。<br>
これらの型は、通常のプリミティブ型では表現できない状態や振る舞いを扱うために使用する。<br>
<br>
==== any ====
<code>any</code> 型は、全ての型チェックを無効化する型である。<br>
<code>any</code> 型の変数には、どんな値でも代入でき、どんな操作も許可される。<br>
<br>
 <syntaxhighlight lang="typescript">
 let value: any = 42;
 value          = "hello";    // OK
 value          = true;       // OK
 value          = [1, 2, 3];  // OK
 
 // any型の変数にはどんな操作も許可される (エラーが発生しない)
 value.someMethod();          // OK (実行時エラーの可能性あり)
 value.nonExistentProp;       // OK (実行時エラーの可能性あり)
 </syntaxhighlight>
<br>
<code>any</code> 型を使用すると、TypeScriptの型安全性が完全に失われる。<br>
型チェックが無効化されることで、実行時エラーの早期発見ができなくなるため、使用は最小限に留めることを推奨する。<br>
<br>
<code>any</code> 型が許容される場面を以下に示す。<br>
* 段階的なJavaScriptからTypeScriptへの移行時
*: 既存コードを一時的に <code>any</code> でラップして移行を進める場合
* 型定義が存在しないサードパーティライブラリの使用時
*: <code>@types</code> パッケージが存在しない場合の暫定的な対処
<br>
==== unknown ====
<code>unknown</code> 型は、<code>any</code> 型と同様に任意の値を受け入れるが、型安全性を保持する <u>型安全なany</u> である。<br>
<code>unknown</code> 型の変数を使用する前に、<code>typeof</code> 等による型チェックが必須となる点が <code>any</code> との大きな違いである。<br>
<br>
 <syntaxhighlight lang="typescript">
 let value: unknown = "hello";
 
 // unknown型の変数は使用前に型チェックが必要
 value.toUpperCase();     // エラー: Object is of type 'unknown'.
 
 // typeofによる型チェック後は使用可能
 if (typeof value === "string") {
    value.toUpperCase();  // OK (string型として扱われる)
 }
 </syntaxhighlight>
<br>
<code>unknown</code> 型は、外部からの入力等で型が不確定な場面で安全に使用できる。<br>
<br>
 <syntaxhighlight lang="typescript">
 // catch句でのエラーは、unknown型 (TypeScript 4.0以降)
 try {
    throw new Error("something went wrong");
 }
 catch (error: unknown) {
    if (error instanceof Error) {
       console.log(error.message);  // OK
    }
 }
 
 // JSON.parseの結果等、型が不確定な場合
 function parseData(jsonString: string): unknown {
    return JSON.parse(jsonString);
 }
 </syntaxhighlight>
<br>
下表に、<code>any</code> と <code>unknown</code> の違いを示す。<br>
<br>
<center>
{| class="wikitable"
|+ any と unknown の比較
! 特性 !! any !! unknown
|-
| 任意の値の代入 || 可能 || 可能
|-
| 使用前の型チェック || 不要 || 必須
|-
| 型安全性 || 失われる || 保持される
|-
| 推奨度 || 使用を避ける || 型が不確定な場面で使用
|}
</center>
<br>
<code>unknown</code> 型を用いた型の絞り込み (Type Narrowing) の詳細は、[[TypeScriptの基礎 - 型の絞り込み]]のページを参照すること。<br>
<br>
==== void ====
<code>void</code> 型は、戻り値がない関数の戻り値型として使用する型である。<br>
<u>undefined</u> のみを代入可能であり、関数が値を返さないことを明示する。<br>
<br>
 <syntaxhighlight lang="typescript">
 // 戻り値がない関数
 function logMessage(message: string): void {
    console.log(message);
    // return undefined; は暗黙的に行われる
 }
 
 // void型の変数には、undefinedのみ代入可能
 let result: void = undefined;  // OK
 let invalid: void = "hello";   // エラー: Type 'string' is not assignable to type 'void'.
 </syntaxhighlight>
<br>
void と undefinedは似ているが、voidは <u>関数が意図的に値を返さない</u> という意味を明示するために使用する。<br>
<br>
==== never ====
<u>never</u> 型は、到達不可能な値の型である。<br>
例外をスローする関数や無限ループを持つ関数の戻り値型として使用され、その処理が正常に終了しないことを表す。<br>
<br>
 <syntaxhighlight lang="typescript">
 // 必ず例外をスローする関数
 function throwError(message: string): never {
    throw new Error(message);
 }
 
 // 無限ループ
 function infiniteLoop(): never {
    while (true) {
       // 処理
    }
 }
 </syntaxhighlight>
<br>
<u>never</u> 型の重要な活用例として、<u>網羅性チェック</u> (exhaustiveness check) がある。<br>
switch文で全てのケースを処理していることをコンパイル時に検証できる。<br>
<br>
 <syntaxhighlight lang="typescript">
 type Shape = "circle" | "square" | "triangle";
 
 function getArea(shape: Shape): number {
    switch (shape) {
       case "circle":
          return Math.PI * 10 * 10;
       case "square":
          return 10 * 10;
       case "triangle":
          return (10 * 10) / 2;
       default:
          // shape が never 型になることで、全ケースが処理されていることを保証
          const exhaustiveCheck: never = shape;
          throw new Error(`Unknown shape: ${exhaustiveCheck}`);
    }
 }
 </syntaxhighlight>
<br>
新しい型 (例: "pentagon") が <u>Shape</u> に追加されて、switch文のケースが追加されていない場合、<br
default節でshapeが"pentagon"型になるため、neverへの代入でコンパイルエラーが発生する。<br>
これにより、型の追加漏れを確実に検出できる。<br>
<br><br>

== 型注釈の省略と型推論 ==
TypeScriptは、変数の初期化値や文脈から型を自動的に推論する <u>型推論</u> の仕組みを持つ。<br>
型推論が機能する場面では、型注釈を省略しても同等の型安全性が得られる。<br>
<br>
 <syntaxhighlight lang="typescript">
 let x   = 5;        // 型推論: number
 const y = "hello";  // 型推論: "hello" (リテラル型)
 let z   = true;     // 型推論: boolean
 </syntaxhighlight>
<br>
型推論の詳細な仕組みや、型ワイドニング、contextual typing (文脈的型付け) については [[TypeScriptの基礎 - 型推論]] で詳しく解説している。<br>
<br><br>

== 関連情報 ==
* [[TypeScriptの基礎 - 開発環境]]
* [[TypeScriptの基礎 - tsconfig.json]]
* [[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]]