TypeScript 変数

TypeScriptでは、変数はvar, let, constキーワードを使って宣言することができます。

TypeScriptは型注釈と呼ばれる機能をサポートしています。型注釈では、変数の宣言時にその型を指定することができます。

例えば、以下のコードでは、number型の変数xを宣言しています。

let x: number = 10;

もし、異なる型の値を変数に代入しようとすると、TypeScriptは型エラーを発生させます。

x = "hello"; // TypeError: Type '"hello"' is not assignable to type 'number'.

TypeScript letとvar

varとletはどちらも変数を宣言するのに使われますが、スコープ規則が異なります。

varで宣言された変数は、その変数が宣言された関数の中でのみアクセス可能です。関数外でvarを使用して変数を宣言した場合、その変数はグローバル変数となり、スクリプト全体からアクセスできるようになります。

console.log(x); // undefined
var x: number = 5;

JavaScriptエンジンは、変数宣言var xをスクリプトの先頭に巻き上げて、他のどのコードよりも先に処理するようにします。つまり、上記のコードは、次のように書かれているように解釈されます。

var x;
console.log(x);
x = 5;

letはブロックスコープを持ちます。つまり、letで宣言された変数は、その変数が宣言されたブロック内でのみアクセス可能です。つまり、letを使ってif文やforループの中で変数を宣言した場合、そのブロックの外からはアクセスできなくなります。

また、varはスコープの先頭に移動し、コードが実行される前に未定義の値で初期化されます。letとconstではそのような仕様になっていないため、コード内で宣言される前にアクセスすることはできません。

console.log(x); // Cannot access 'x' before initialization 
let x: number = 5;

他にはvarで同名の変数宣言が可能になっています。そのため、意図しない変数の書き換えが発生する可能性があります。

var n = 1;
var n = 2;
console.log(n); // 2

TypeScriptの開発では、varよりもletを使用することが推奨されています。

TypeScript const

constはletと似ていますが、constで宣言された変数は新しい値に再代入することができません。このため、const変数は、定数など変更されては困る値を宣言するのに便利です。

例えば、次のようなコードを書くとエラーが発生します。

const X: number = 10;
X = 20; // Assignment to constant variable.

Note: TypeScriptでは、定数には大文字を使うのが一般的です。これはJavaScriptや他のプログラミング言語から採用された慣習で、コード内で定数の値を他の変数と明確に区別するのに役立ちます。ただし、これはあくまで慣習であり、TypeScript言語自体が強制する要件ではありません。一貫性があり、コードの文脈で意味をなすものであれば、どのような命名規則を用いてもかまいません。

TypeScript 変数とユニオン型

TypeScriptは、ユニオン型の使用もサポートしています。ユニオン型は、ある変数が複数の型のうちの一つの値を保持できることを指定するものです。

let x: number | string = 10;
x = "hello"; // ok

TypeScript 分割代入

TypeScriptの変数のもう一つの重要な機能として、分割代入があります。分割代入によって、開発者は配列やオブジェクトから値を抽出し、別の変数に代入することができます。

例えば、以下のコードでは配列の最初と最後の要素を取り出し、別の変数に代入しています。

let arr = [1, 2, 3, 4, 5];
let [first, , , , last] = arr;
console.log(first); // 1
console.log(last); // 5

同様に、オブジェクトからプロパティを抽出して別の変数に代入することも可能です。

let obj = { name: "John", age: 30 };
let { name, age } = obj;
console.log(name); // "John"
console.log(age); // 30

また、次のような処理も可能です。

let obj = { name: "John", age: 30 };
let { name: firstName, age: ageNumber } = obj;
console.log(firstName); // "John"
console.log(ageNumber); // 30

TypeScriptでは、分割代入のほかに、複数の配列やオブジェクトを1つの配列やオブジェクトに統合できるスプレッド演算子と呼ばれる機能もサポートされています。スプレッド演算子は3つのドット(...)で表現されます。

例えば、以下のコードではスプレッド演算子を用いて、2つの配列を1つの配列にマージしています。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]

TypeScript さまざまな型の変数宣言

TypeScriptでは、数値や文字列、ブーリアンといった基本的なデータ型に加え、配列やオブジェクトを変数として利用することも可能です。

TypeScript 配列の宣言

配列を宣言するには、[]記法を用いて、その配列が含む要素の種類を指定します。たとえば、次のコードでは数値の配列を宣言しています。

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

また、Arrayを使用して、特定の型の配列を宣言することもできます。例えば、以下のコードでは文字列の配列を宣言しています。

let names: Array<string> = ["John", "Mary", "Mike"];

TypeScript オブジェクト型の宣言

オブジェクトを宣言するには、{}記法を用いて、プロパティとその型を指定することができます。例えば、次のコードは、nameとageというプロパティをそれぞれstringとnumberという型で持つオブジェクトを宣言しています。

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

また、以下のようにinterfaceキーワードを用いて、オブジェクトの型として使用することもできます。

interface Person {
   name: string;
   age: number;
}
let person: Person = { name: "John", age: 30 };

TypeScript タプルの宣言

TypeScriptは配列やオブジェクトに加えて、タプルを変数として使用することもサポートしています。タプルは配列に似ていますが、特定の型を持つ固定数の要素を持ちます。

let coordinates: [number, number] = [10, 20];

TypeScript 列挙型の宣言

TypeScriptはEnumを変数として使うこともサポートしています。Enumを使うと、名前をつけた定数のセットを定義することができます。

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

この記事を書いた人

著者の画像

Jeffry Alvarado

Ex-Facebook Engineer 大学ではコンピュータサイエンスを専攻し、在学中に複数のインターンシップを経験。コンピュータサイエンスが学習できるプラットフォームRecursionを創業し、CTOとしてカリキュラム作成、ソフトウェア開発を担当。

Twitter YouTube GitHub
前の記事
「any型とunknown型」

ツイート