TypeScript演算子の使いこなしで開発効率アップ！サンプルコードとテクニック集
2024-07-27
TypeScriptにおける演算子
種類
TypeScriptにおける演算子は、大きく以下の3種類に分類できます。
- 算術演算子
数値に対する基本的な操作を行います。例:+,-,*,/,% - 比較演算子
2つの値を比較し、真偽値を返します。例:==,!=,<,>,<=,>= - 論理演算子
複数の真偽値を組み合わせて、新しい真偽値を生成します。例:&&,||,!
上記以外にも、TypeScriptには様々な種類の演算子が存在します。
- オプショナルチェーン演算子
左辺がnullまたはundefinedの場合、右辺のアクセスを省略します。例:?. - 条件演算子
条件に応じて異なる値を返します。例:?: - ビット演算子
ビットレベルで操作を行います。例:&,|,^,~,<<,>>,>>> - インクリメント・デクリメント演算子
変数の値を1ずつ増減します。例:++,-- - 代入演算子
変数に値を代入します。例:=,+=,-=,*=,/=,%=
算術演算子
// 加算
const sum = 10 + 20;
console.log(sum); // 30
// 減算
const difference = 20 - 10;
console.log(difference); // 10
// 乗算
const product = 5 * 4;
console.log(product); // 20
// 除算
const quotient = 20 / 5;
console.log(quotient); // 4
// 剰余算
const remainder = 20 % 3;
console.log(remainder); // 2
比較演算子
// 等価演算子
const isEqual = 10 == 10;
console.log(isEqual); // true
// 非等価演算子
const isNotEqual = 10 != 20;
console.log(isNotEqual); // true
// 小なり演算子
const isLessThan = 10 < 20;
console.log(isLessThan); // true
// 大なり演算子
const isGreaterThan = 20 > 10;
console.log(isGreaterThan); // true
// 小なりまたは等価演算子
const isLessOrEqual = 10 <= 10;
console.log(isLessOrEqual); // true
// 大なりまたは等価演算子
const isGreaterOrEqual = 20 >= 10;
console.log(isGreaterOrEqual); // true
論理演算子
// 論理積演算子
const isAnd = true && false;
console.log(isAnd); // false
// 論理和演算子
const isOr = true || false;
console.log(isOr); // true
// 論理否定演算子
const isNot = !true;
console.log(isNot); // false
デストラクチャリング代入
デストラクチャリング代入は、オブジェクトや配列から値を個別に抽出する際に便利な機能です。演算子と組み合わせて使用することで、より複雑な処理を簡潔に記述することができます。
// オブジェクトのデストラクチャリング
const person = { name: "田中", age: 30 };
const { name, age } = person;
console.log(name); // 田中
console.log(age); // 30
// 配列のデストラクチャリング
const numbers = [10, 20, 30];
const [first, second, third] = numbers;
console.log(first); // 10
console.log(second); // 20
console.log(third); // 30
テンプレートリテラル
テンプレートリテラルは、文字列の中に変数や式を埋め込むことができる機能です。演算子と組み合わせて使用することで、より動的な文字列を生成することができます。
const name = "田中";
const age = 30;
const message = `名前は${name}で、年齢は${age}歳です。`;
console.log(message); // 名前は田中で、年齢は30歳です。
関数
関数内で演算子を使用することで、より複雑な処理を実行することができます。
function add(x: number, y: number): number {
return x + y;
}
const sum = add(10, 20);
console.log(sum); // 30
クラス
クラス内で演算子を使用することで、オブジェクトの操作や状態管理を行うことができます。
class Person {
private name: string;
private age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
getName(): string {
return this.name;
}
getAge(): number {
return this.age;
}
setAge(newAge: number) {
this.age = newAge;
}
}
const person = new Person("田中", 30);
console.log(person.getName()); // 田中
console.log(person.getAge()); // 30
person.setAge(35);
console.log(person.getAge()); // 35
ジェネリック型
ジェネリック型を使用して、演算子の動作を汎用化することができます。
function add<T>(x: T, y: T): T {
return x + y;
}
const sum1 = add(10, 20); // number
const sum2 = add("Hello", "World"); // string
型エイリアス
型エイリアスを使用して、演算子の結果の型を定義することができます。
type SumResult = number | string;
function add<T extends number | string>(x: T, y: T): SumResult {
return x + y;
}
const sum1 = add(10, 20); // number
const sum2 = add("Hello", "World"); // string
上記以外にも、TypeScriptには様々な方法で演算子を使用することができます。詳細は、TypeScript公式ドキュメントや各種チュートリアルを参照してください。
typescript
