decoding typescript ternary operator

Question

I came across some code in the typescript docs that is confusing for me.

function compare(a: string, b: string): -1 | 0 | 1 {
  return a === b ? 0 : a > b ? 1 : -1;
}

Can anybody explain what's going on in the return statement? Is that a ternary operator?

It's not typescript-specific, just https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator twice. — jonrsharpe, Sep 09 '21 at 15:25
This is why I don't approve ternary operations in PRs at work. This is a nested ternary and they become very difficult to read very quickly. It's saying if a is equal to b, return 0, otherwise if a is greater than b, return 1, otherwise return -1. (note: a > b in strings is a sorting check) — Sterling Archer, Sep 09 '21 at 15:25
WHile I do like ternary operations - I don't like them to be nested. YOu should avoid nested ternary as much as possible — captain-yossarian from Ukraine, Sep 09 '21 at 15:39
From type system perspective `compare` function (I believe it is a callback for sort) returns `-1` OR `0` OR `1` — captain-yossarian from Ukraine, Sep 09 '21 at 15:40
There’s a shorter and more general way to write this: `(b < a) - (a < b)`. Not sure if TypeScript allows subtracting booleans, but `Number(b < a) - Number(a < b)` should do. — Sebastian Simon, Sep 09 '21 at 20:00
See [Alternative to nested ternary operator in JS](/q/32289340/4642212). — Sebastian Simon, Sep 09 '21 at 20:04

Daniel Kaplan · Accepted Answer · 2021-09-10T16:14:31.857

Think of it like this:

function compare(a: string, b: string): -1 | 0 | 1 {
  return a === b ? 0 : (a > b ? 1 : -1);
}

If a === b, return 0. Otherwise, is a > b? If so, return 1. Otherwise, return -1. Might be easier to think of like this:

function compare(a: string, b: string): -1 | 0 | 1 {
  if (a === b) {
    return 0;
  } else {
    if (a > b) {
      return 1;
    } else {
      return -1;
    }
}

Although that's the way I think about it, this is the way I'd write the code with if statements (remember, all three of these are equivalent):

function compare(a: string, b: string): -1 | 0 | 1 {
  if (a === b) {
    return 0;
  } else if (a > b) {
    return 1;
  } else {
    return -1;
  }
}

score 1 · Answer 2 · answered Sep 09 '21 at 16:44

function compare(a: string, b: string): -1 | 0 | 1 {
  return a === b ? 0 : a > b ? 1 : -1;
}

First, analyze the declared return type -1 | 0 | 1:

This is a union of Literal types [see docs for reference]. This indicates that the return type of this function will be either:

the number -1,
the number 0,
or the number 1.

Now analyze the return statement in the function return a === b ? 0 : (a > b ? 1 : -1);:

This is a 'nested' JavaScript Ternary Operator [see docs for reference].

The expression before the ? is evaluated first; If it is evaluated to true then the expression before the : is evaluated, if false then the expression after the : is evaluated.

It is equivalent to the follow if statement:

if (a === b) {
  return 0;
} else {
  if (a > b) {
    return 1;
  } else {
    return -1;
  {
}

or put more simply:

if (a === b) {
  return 0;
} else if (a > b) {
  return 1;
} else {
  return -1;
{

decoding typescript ternary operator

2 Answers2