2024-09-13

🔷TypeScriptの学習_3

変数の静的型付け（型注釈）

TypeScriptでは変数や関数に「この値はこの型である」ということを明示的に示すため、データ型を記述する

変数の型注釈

code:変数の型注釈の構文

let 変数名: 型 = 値;

const 変数名: 型 = 値;

code:変数の型注釈の例

let age: number = 20;

const gender: string = "さおり";

変数宣言時に指定した型とは異なる型の値を代入しようとするとエラーになる

code:エラーになる例

age = "30"; // error: Type 'string' is not assignable to type 'number'.

関数の型注釈

引数や戻り値に型注釈をつけることができる

code:関数の型注釈の構文

function 関数名(引数名: 型, 引数名: 型): 戻り値の型 {

return 戻り値;

}

code:関数の型注釈の例

function add(a: number, b: number): number {

return a + b;

}

console.log(test(1, 2)); // 引数で渡し型が一致しているので問題なし

指定した型とは異なる型を引数として渡したり、戻り値として返そうとするとエラーになる

code:エラーになる例

//console.log(test(1, "2")); // error: Argument of type 'string' is not assignable to parameter of type 'number'.

/* 戻り値が指定の型と異なるエラーの関数

function test2(a: number): number {

return a + ""; // error: Type 'string' is not assignable to type 'number'.

}

*/

型推論

型推論とは、明示的に型を指定しなくても、TypeScriptのコンパイラが自動的に変数や関数の型を推測してくれる仕組み

➜型注釈を省略でき、コードがシンプルになる

TypeScriptは、変数や関数の初期値や戻り値を元に、適切な型を自動的に推測してくれる

変数の型推論

変数に初期値が与えられた場合、初期値から型を推論する

code:変数の型推論

let age = 20; // 型推論で変数"age"はNumberとして認識される

//age = "30"; // error: Type 'string' is not assignable to type 'number'.

code:変数の型推論（初期値なし）

let gender; // 初期値が設定されていない場合、any型と推論される

gender = "female"; // OK

gender = 1; // OK

初期値がない変数は型安全性を保つために型注釈を使用して明示的に型を指定することが推奨される

関数の戻り値の型推論

関数の戻り値の型は関数でどのような値が返されているかによって推論される

code:関数の戻り値の型推論

function test(a: number, b: number) {

return a + b; // 戻り値の型はnumberと推論される

}

ファイルをモジュールとして扱う

TypeScriptでプロジェクト内の別ファイルで同じ変数名を宣言しようとすると、再宣言できないというエラーが発生する。

これは、TypeScriptがトップレベルに定義した変数のスコープがファイル内だけでなく、プロジェクト全体に適用されてしまうため

ファイルの先頭に以下を追加し、ファイルをモジュールとして扱うことでスコープを限定することができ、上記のような問題を防ぐことができる

export {};