JavaScript：切换非布尔值的简写

Question

Is there a better shorthand to toggle foo ?

type Foo = 'BAR' | 'BAZ';

let foo: Foo = 'BAR';

const toggleFoo = () => {
  foo = foo === 'BAR' ? 'BAZ' : foo;
};

toggleFoo();

Answer 1

You could take an object with the opposite as value.

const toggleFoo = () => {
  foo = { BAR: 'BAZ', BAZ: 'BAR' }[foo];
};

Answer 2

With only two states, it can be simpler to use 0 to represent "off" and 1 to represent "on". This has the added advantage of being simple to use in an if -statement.

let foo = 1;
const toggleFoo = () => foo ^= 1;
if(foo){
   //on
} else {
  //off
}

Answer 3

Here's another idea if you want a reusable way of toggling between two states.

const createToggler = <F, T>(toggleStates: [F, T], initialState = false) => {
  let state = initialState
  return () => {
    state = !state
    return toggleStates[+state] // convert boolean to number for indexing
  }
}

TypeScript playground

(Not sure if there's any way of avoiding a runtime typecheck of the return value, though, in case it's a non primitive such as my mixedToggler example.)

Answer 4

Merging some of the answers I came to this approach:

enum StateValues {
  OFF = 0,
  ON = 1
}

type State = StateValues.OFF | StateValues.ON;

const toggleState = (state: State) => {
  return state ^= 1
}

let myState: State = StateValues.OFF;

console.log(StateValues[myState]); // "OFF"

myState = toggleState(myState);
console.log(StateValues[myState]); // "ON"

myState = toggleState(myState);
console.log(StateValues[myState]); // "OFF"

TypeScript playground