プログラミングを楽にするテクニック！TypeScriptで変数をまとめて宣言する方法
TypeScriptで同じ型を持つ複数の変数を宣言する方法
構文
let/const variable1, variable2, ..., variableN: type;
ここで、
letまたはconstは、変数のスコープと再代入可能性を指定します。variable1, variable2, ..., variableNは、宣言する変数の名前をカンマ区切りで列挙します。typeは、変数の型を指定します。
例
let name: string, age: number, isStudent: boolean;
name = "Taro Yamada";
age = 20;
isStudent = true;
この例では、name、age、isStudent という 3 つの変数を、それぞれ string、number、boolean 型で宣言しています。
複数の型注釈を使用する
複数の変数に異なる型を指定したい場合は、それぞれの変数の後に型注釈を記述することができます。
let name: string, age: number, isStudent: boolean = true;
この例では、isStudent 変数のみ初期化されており、値は true に設定されています。
オブジェクト型を使用する
type Person = {
name: string,
age: number,
isStudent: boolean
};
let person1: Person = {
name: "Taro Yamada",
age: 20,
isStudent: true
};
let person2: Person = {
name: "Hanako Sato",
age: 21,
isStudent: false
};
この例では、Person という名前のオブジェクト型を定義し、その中に name、age、isStudent というプロパティを定義しています。その後、person1 と person2 という 2 つの変数を Person 型で宣言し、それぞれ異なる値を設定しています。
// 同じ型の変数を複数宣言
let name1: string, name2: string;
name1 = "Taro Yamada";
name2 = "Hanako Sato";
// 型注釈を使用して異なる型の変数を宣言
let age: number = 20;
let isStudent: boolean = true;
// オブジェクト型を使用して変数を宣言
type Person = {
name: string;
age: number;
isStudent: boolean;
};
let person: Person = {
name: "Jiro Tanaka",
age: 30,
isStudent: false
};
// 関数のパラメータとして型を使用する
function greet(person: Person): void {
console.log(`Hello, ${person.name}!`);
}
greet(person);
このコードを実行すると、以下の出力が得られます。
Hello, Jiro Tanaka!
この例では、以下の点に注目してください。
- 最初の行では、
name1とname2という 2 つの変数をstring型で宣言しています。 - 2 行目で、
age変数をnumber型で、isStudent変数をboolean型で宣言しています。 - 3 行目から 6 行目では、
Personという名前のオブジェクト型を定義し、その中にname、age、isStudentというプロパティを定義しています。 - 7 行目から 10 行目では、
personという変数をPerson型で宣言し、値を設定しています。 - 11 行目から 15 行目では、
greetという関数を定義し、そのパラメータとしてpersonというPerson型の変数を受け取ります。この関数は、personのnameプロパティの値を出力します。 - 16 行目で、
greet関数を呼び出し、person変数に渡しています。
TypeScriptは型推論と呼ばれる機能を備えており、変数の型を明示的に指定しなくても、その値に基づいて型を推論することができます。
let name1 = "Taro Yamada";
let name2 = "Hanako Sato";
// 型推論により、name1 と name2 は string 型であると推論される
console.log(name1.toUpperCase()); // TARO YAMADA
console.log(name2.length); // 11
この例では、name1 と name2 変数の型を明示的に指定していませんが、それぞれに文字列リテラルを代入しているため、TypeScriptは型推論によって string 型であると推論します。
デストラクチャリング代入を使用する
配列やオブジェクトの値を個々の変数に分解して代入する際に、デストラクチャリング代入を使用することができます。
const students: Person[] = [
{ name: "Taro Yamada", age: 20, isStudent: true },
{ name: "Hanako Sato", age: 21, isStudent: false },
];
for (const { name, age } of students) {
console.log(`${name} is ${age} years old.`);
}
この例では、students という配列に複数の Person オブジェクトを格納しています。for...of ループを使用してこの配列をループし、各要素の name と age プロパティを個々の変数に代入しています。
ジェネリック型を使用する
可変長の変数リストを宣言する場合、ジェネリック型を使用することができます。
function createArray<T>(items: T[]): T[] {
return items;
}
const numbers = createArray([1, 2, 3]);
const names = createArray(["Alice", "Bob", "Charlie"]);
この例では、createArray というジェネリック関数を定義し、引数と戻り値の型を同じ型パラメータ T で指定しています。これにより、numbers と names という変数に、それぞれ要素の型が number または string である配列を代入することができます。
typescript types variable-types
