The Fern Check

A type with two values

You have met number and string. The third everyday type is boolean, and it has exactly two possible values: true and false, written without quotes.

You rarely type true or false yourself. They are what comparisons produce:

• < is less than, and > is greater than
• <= is less than or equal, and >= is greater than or equal
• === asks whether two values are the same, and !== whether they differ

const speed: number = 38;
const limit: number = 30;

const tooFast: boolean = speed > limit;

console.log("Too fast:", tooFast);
console.log("Exactly the limit:", speed === limit);

Too fast: true
Exactly the limit: false

speed > limit is a question, and true is its answer. Storing that answer under a name with : boolean gives the decision a name you can read back later.

if/else runs one block

if checks a boolean in round brackets. When it is true, the block in the braces straight after it runs; when it is false, the block after else runs instead. Exactly one of the two, never both.

const speed: number = 38;
const limit: number = 30;
const tooFast: boolean = speed > limit;

if (tooFast) {
  console.log("Slow down.");
} else {
  console.log("Thank you for driving safely.");
}

console.log("Sign checked.");

Slow down.
Sign checked.

The braces decide which lines belong to each side. The indentation inside them is for people reading the code; the compiler only looks at the braces. The last line sits outside both, so it runs whichever way the decision went.

What the compiler catches here

A comparison needs two things of a kind that can be compared. Compare a number with text and it is refused before anything runs:

const speed: number = 38;

console.log(speed > "30");

main.ts(3,13): error TS2365: Operator '>' cannot be applied to types 'number' and 'string'.

One equals sign stores a value; three compare. Use one inside an if and the compiler notices you are trying to store into a const:

const speed: number = 38;
const limit: number = 30;

if (speed = limit) {
  console.log("Right on the limit.");
}

main.ts(4,5): error TS2588: Cannot assign to 'speed' because it is a constant.

Plain JavaScript would only discover that while running. Here nothing runs until the question is written as a question.

Your turn

The editor holds a fern check. moisture is how damp the soil is, and dryBelow is the mark under which the fern needs water. Press Run first: the check says Needs water .... false and tells you to leave the fern, even though 22 is under 30. The answer was typed in instead of worked out.

Replace false on the marked line with a comparison asking whether moisture is less than dryBelow, leave : boolean where it is, and press Run. Once it passes, try changing moisture to 45 and running it again: the same program now tells you to leave the fern for now. The check marks that run as not matching, because it expects today's reading of 22, so put 22 back to see it pass again.

If something goes wrong

If the compiler reports Type 'string' is not assignable to type 'boolean'., the comparison has quotes around it. Quoted, it is a piece of text that happens to contain a less-than sign; unquoted, it is a question with a true-or-false answer.

If the check runs but still says false, read the comparison aloud. moisture > dryBelow asks whether the soil is wetter than the dry mark, which is the opposite question.

If the compiler reports Cannot assign to 'needsWater' because it is a constant., a single = has crept into the if. Its round brackets only need needsWater, which is already true or false.