TypeScript の三項演算子

1. TypeScript 演算子
2. TypeScript で三項演算子を使用する
3. TypeScript 三項演算子を使用してネストされた条件を実装する

この記事では、TypeScript のさまざまな演算子を簡単に紹介し、三項演算子とその使用方法について説明します。

TypeScript 演算子

ソフトウェアアプリケーションは、データを処理することを目的としています。したがって、彼らはこのデータに対してさまざまな操作を実行する方法を設計しました。

各操作は 1つ以上のデータ値を処理し、最終結果を生成します。これらの操作は、さまざまなグループに分けることができます。

TypeScript のオペランドと演算子

通常、オペレーターは、オペランドと呼ばれる少なくとも 1つのデータ値を操作します。たとえば、式 500 + 200 では、値 500 と 200 は 2つのオペランドであり、+ は演算子です。

TypeScript にはいくつかの演算子があります。これらは、算術、論理、ビットワイズ、リレーショナルなど、各オペレーターの操作の性質に基づいてグループに分けることができます。

また、これらの演算子は、各演算子が期待するオペランドの数に基づいてグループ化できます。バイナリ演算子には、次のように 2つのオペランドがあります。

例：

x * y
20 / 2

unary 演算子は、1つのオペランドのみを取ります。

例：

x++
y--

TypeScript 言語は、3つのオペランドで動作する三項演算子をサポートしています。これは、if...else 構文の短縮形式です。これを TypeScript 条件付き演算子と呼びます。

TypeScript で三項演算子を使用する

TypeScript 条件演算子は 3つのオペランドを取ります。1つ目は、評価する条件です。これは、通常の if...else 構文の if() 部分として識別できます。

次の 2つのオペランドは、評価された条件の結果に基づいて実行される 2つの式です。したがって、2 番目のオペランドは、条件が true と評価されたときに実行される式です。

それ以外の場合は、3 番目のオペランド式が返されます。

構文：

<your_condition> ? <expression_A> : <expression_B>

ここで

1. <your_condition> は評価される条件です。これは、true または false のいずれかを返すブール式です。
2. <expression_A> は、条件が true の場合に返される式です。
3. <expression_B> は、条件が false の場合に返される式です。

条件演算子は、TypeScript 言語で使用できる唯一の三項演算子です。

TypeScript コードを記述して、ユーザーの年齢を確認します。これにより、それに基づいてメッセージが返されます。まず、通常の if...else を使用して条件付きロジックを記述します。

const MAX_ALLOWED_AGE = 18;
let userAge = 15;
let finalMessage = '';

if( userAge >= MAX_ALLOWED_AGE ) {
    finalMessage = 'You are allowed to this site';
} else {
    finalMessage = 'Get Back!!'
}

console.log(finalMessage);

出力：

三項演算子を使用すると、同じロジックをよりコンパクトに記述できます。

const MAX_ALLOWED_AGE = 18;
let userAge = 15;
let finalMessage = userAge >= MAX_ALLOWED_AGE ? 'You are allowed to this site' : 'Get Back!!';

console.log(finalMessage);

上記の if...else ロジックと同じ出力が得られます。これは、if...else 構文よりも行数が少なく、よりクリーンです。

TypeScript 三項演算子を使用してネストされた条件を実装する

三項演算子は単一の条件に限定されません。また、複数の条件をサポートします。

次のように、ネストされた if...else 条件付きロジックを見てみましょう。

let studentMark = 68;
const GRADE_A_MARK = 75;
const GRADE_B_MARK = 61;
let finalMessage = '';

if( studentMark >= GRADE_A_MARK ) {
    finalMessage = 'Great work!';
} else if(studentMark >= 61 && studentMark < 75) {
    finalMessage = 'Good work!';
} else {
    finalMessage = 'Study more!!!';
}

console.log(finalMessage);

出力：

三項演算子を使用して、上記のネストされた条件を記述してみましょう。

let studentMark = 68;
const GRADE_A_MARK = 75;
const GRADE_B_MARK = 61;
let finalMessage = studentMark >= GRADE_A_MARK ? 'Great work!' : studentMark >= 61 && studentMark < 75 ? 'Good work!' : 'Study more!!!';

console.log(finalMessage);

上記の TypeScript コードをトランスパイルし、ノードを使用して実行すると、上記の if...else シナリオと同じ出力が得られます。

コードで条件演算子を使用することをお勧めします。これは、コードをよりクリーンにする 1 行の式です。