TypeScript：変数と基本的な型を３分でわかりやすく解説

TypeScriptで変数を宣言する際はJavaScriptと同様、var、let、constのキーワードを使用します。

参考　TypeScriptとは？

let myNumber: number = 10;
const myString: string = "Hello, TypeScript!";

このページではTypeScript理解の第１歩となる変数と型についてサンプルコード付きで初心者向けにわかりやすく解説します。

関連　JavaScriptでの変数宣言

TypeScript：変数の宣言

TypeScriptでは、変数を宣言するために主に3つのキーワードが使用されます：var、let、const。役割的にはJavaScriptと同じですが、変数の宣言時に「型」を明示する必要がある点がTypeScriptの特徴です。

varキーワード

• 使用方法: var 変数名: 型 = 初期値;
• 特徴:
  • varで宣言された変数は、同じスコープ内で再宣言可能。
  • ファンクションスコープを持つ。つまり、関数内で宣言された場合のみローカル変数となり、関数外ではグローバル変数となる。
  • しかし、varはスコープの問題から推奨されない場合が多いため現代ではあまり利用されていない。

// varの使用例
var greeting: string = "Hello, World!";
console.log(greeting); // Hello, World!

function varTest(): void {
    var greeting: string = "Hello, TypeScript!";
    console.log(greeting); // Hello, TypeScript!
}
varTest();
console.log(greeting); // Hello, World!

letキーワード

• 使用方法: let 変数名: 型 = 初期値;
• 特徴:
  • letで宣言された変数はブロックスコープを持ちます。つまり、宣言されたブロック（{}で囲まれた範囲）内でのみアクセス可能であり、外部からはアクセスできないことを意味する。
  • 変更可能な変数を宣言する際に使用。
  • 同じスコープ内での再宣言は不可能。

// letの使用例
let name: string = "Alice";
console.log(name); // Alice

if (true) {
    let name: string = "Bob";
    console.log(name); // Bob
}
console.log(name); // Alice

constキーワード

• 使用方法: const 変数名: 型 = 初期値;
• 特徴:
  • constもブロックスコープ。
  • constで宣言された変数は、宣言時に初期値を必ず指定し、その後変更することはできません（不変性）。→つまり、実質的には「定数」として扱われる。
  • 再宣言はもちろん、再代入も不可能。

// constの使用例
const age: number = 30;
console.log(age); // 30

// constでオブジェクト宣言 - プロパティの変更は可能
const person: { name: string; age: number; } = { name: "Alice", age: 30 };
person.name = "Bob"; // OK
console.log(person); // { name: "Bob", age: 30 }

型の指定

TypeScriptの大きな特徴の１つは、その名の通り型（Type）安全性です。変数を宣言する際にその型を指定することで、予期しない型のデータが代入されることを防ぎます。

TypeScriptで型を指定する際の構文ルールは非常にシンプルで直感的。基本的な型注釈の構文は以下の通りです：

let 変数名: 型 = 初期値;

// または、初期値を指定せずに型だけを注釈する場合：
let 変数名: 型;

サンプルコード　数値型 (number) の指定

let age: number = 30;

サンプルコード　数値型 (number) の指定：初期値なし

let age: number;let age: number;

サンプルコード　文字列型 (string) の指定

let name: string = "Alice";

複数の型を許容するUnion型

特定の変数に複数の型のいずれかを許容したい場合、Union型を使って型注釈を行います。これは、型を|で区切って指定します。

let id: number | string;
id = 101; // OK
id = "202"; // OK

nullやundefinedも型として指定可能

変数がnullやundefinedの可能性がある場合にも、それらを型注釈に含めることができます。

let optionalString: string | null;
optionalString = null; // OK
optionalString = "Hello"; // OK

関連：関数の戻り値の型注釈

関数においても、戻り値の型を指定することができます。その構文は以下の通り。

function 関数名(パラメータ: パラメータ型): 戻り値の型 {
  // 関数の本体
  return 戻り値;
}

例えば、数値を受け取り、その数値の二乗を返す関数は以下のように記述します。

function square(number: number): number {
  return number * number;
}

関連：オブジェクトの型注釈

オブジェクトに対して型を指定する場合、プロパティごとに型を注釈します：

let person: { name: string; age: number; };
person = { name: "Alice", age: 30 };

関連：配列の型注釈

配列の各要素に対して型を指定するには、要素の型の後に[]を付けます：

let numbers: number[] = [1, 2, 3];

または、Array<要素の型>を使用しても同じ意味になります。

let numbers: Array<number> = [1, 2, 3];

このように、TypeScriptではその名の通り変数をはじめとして、すべての「データ」に対して明示的に「型」を指定します。動的に型付けが行われるJavaScriptでは、意図しない型として扱われてしまう事象が発生し、予期せぬエラーにつながることも多かったのですが、TypeScriptではこの意図しない「型付け」を排除することで、プロジェクト全体で整合が取れた開発を行うことが可能になります。

TypeScript：データ型

TypeScriptでは様々なデータ型をサポートしており、これにより開発者はより厳密な型チェックとエラーの少ないコードを書くことができます。ここでは、TypeScriptの主なデータ型をサンプルコード付きで解説します。

1. Number

JavaScriptと同様に、TypeScriptのnumber型は浮動小数点値です。整数も浮動小数点数も、すべてnumber型で表されます。

let integer: number = 6;
let float: number = 6.5;

2. String

文字列データにはstring型を使用します。シングルクォート('), ダブルクォート("), またはバックティック(``)を使って文字列を定義できます。

let name: string = "Alice";
let greeting: string = `Hello, ${name}!`;

3. Boolean

真偽値はboolean型で表され、trueまたはfalseの値を取ります。

let isComplete: boolean = false;
isComplete = true; // 値を変更

4. Array

配列の型は、要素の型の後に[]をつけるか、ジェネリック配列型Array<要素の型>を使って表します。

let numbers: number[] = [1, 2, 3, 4, 5];
let strings: Array<string> = ["Hello", "TypeScript"];

5. Tuple

タプル型は、固定された長さの配列で、各要素が異なる型を持つことができます。

let tuple: [string, number];
tuple = ["hello", 10]; // OK

6. Enum

enum型は、数値のセットにより名前をつける方法です。デフォルトでは、enumの値は0から始まりますが、値を手動で設定することもできます。

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

Enumはenumキーワードを使用して定義されます。Enumの値（メンバー）はデフォルトで0から始まる数値ですが、任意の数値を指定することもできます。また、文字列の値を指定することも可能です。

サンプルコード　数値Enum

enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

上記の例では、Direction.Upの値は明示的に1に設定され、残りのメンバー（Down、Left、Right）は自動的にインクリメントされます（つまり、Downは2、Leftは3、Rightは4となります）。

サンプルコード　文字列Enum

文字列Enumでは、各メンバーに文字列の値を明示的に設定します。

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT"
}

function move(direction: Direction) {
    console.log(`Moving: ${direction}`);
}

move(Direction.Up); // Output: "Moving: UP"

7. Any

any型は、任意の型の値を許容します。これは型チェックを避けたい場合に便利ですが、可能な限り使用を避けるべきです。

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // これもboolean型です

8. Void

void型は、値が存在しないことを示すために使用されます。主に関数が値を返さない場合の戻り値の型として使われます。

function warnUser(): void {
    console.log("This is a warning message");
}

9. Null and Undefined

TypeScriptでは、nullとundefinedもそれぞれ型として扱います。これらは他のすべての型のサブタイプです。

let u: undefined = undefined;
let n: null = null;

10. Never

never型は、決して発生しない値の型を表します。例えば、常に例外を投げる関数の戻り値の型として使用されます。

function error(message: string): never {
    throw new Error(message);
}