TypeScript演算子の使いこなしで開発効率アップ！サンプルコードとテクニック集

2024-05-22

種類

TypeScriptにおける演算子は、大きく以下の3種類に分類できます。

算術演算子: 数値に対する基本的な操作を行います。例: +, -, *, /, %
比較演算子: 2つの値を比較し、真偽値を返します。例: ==, !=, <, >, <=, >=
論理演算子: 複数の真偽値を組み合わせて、新しい真偽値を生成します。例: &&, ||, !

上記以外にも、TypeScriptには様々な種類の演算子が存在します。

代入演算子: 変数に値を代入します。例: =, +=, -=, *=, /=, %=
インクリメント・デクリメント演算子: 変数の値を1ずつ増減します。例: ++, --
ビット演算子: ビットレベルで操作を行います。例: &, |, ^, ~, <<, >>, >>>
条件演算子: 条件に応じて異なる値を返します。例: ?:
null 合体演算子: 左辺が null または undefined の場合、右辺の値を返します。例: ??

それぞれの演算子の詳細な使用方法や挙動については、以下のリソースを参考にしてください。

TypeScriptには様々な種類の演算子が存在し、それぞれ様々な用途で使用することができます。これらの演算子を理解することで、より柔軟で効率的なTypeScriptコードを書くことができます。

TypeScript 演算子のサンプルコード

算術演算子

// 加算
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

その他の演算子

以下に、その他の代表的な演算子のサンプルコードを示します。

上記はほんの一例であり、TypeScriptには他にも様々な演算子が存在します。これらの演算子を理解し、適切に使いこなすことで、より柔軟で効率的なTypeScriptコードを書くことができます。

TypeScriptで演算子を使うその他の方法

デストラクチャリング代入は、オブジェクトや配列から値を個別に抽出する際に便利な機能です。演算子と組み合わせて使用することで、より複雑な処理を簡潔に記述することができます。

// オブジェクトのデストラクチャリング
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