TypeScript Tutorial
TypeScript Ternary Operator
condition ? a : b picks one of two values without a full if.
One expression, two outcomes
The ternary operator is written condition ? a : b. TypeScript evaluates the condition. If it is true, the whole expression becomes a. If it is false, the expression becomes b. You get one value. You do not get a block of statements.
That is the difference from if. An if chooses which code runs. A ternary chooses which value to use. Put it on the right of an assignment, inside console.log, or as a return value. C++ uses the same ? and : syntax.
Example
const n: number = 8;
const kind: string = n % 2 === 0 ? "even" : "odd";
console.log(n + " is " + kind);Compile this in /typescript/try. Change n to 7 and run it again. The same line still picks a label; only the condition changed.
Same choice as a short if/else
This program is equivalent to an if with an else that each assign one string. The ternary version keeps the decision next to the variable. Use it when both arms are short and both produce the same kind of value.
Example
const score: number = 72;
const result: string = score >= 50 ? "pass" : "fail";
console.log(result);Parentheses around the condition are not always required, but they make the test easy to see when the line grows. The colon is not optional: every ? has a matching :.
Use it where a value is needed
Because the ternary is an expression, you can print it directly. You do not have to store it first. This program prints the larger of two numbers. Swap the numbers and compile again.
Example
const a: number = 9;
const b: number = 14;
console.log("larger: " + (a > b ? a : b));Extra parentheses around the ternary keep the concatenation from becoming hard to read. When the operator sits inside a larger expression, wrap it.
Both arms need a common type
a and b must make sense as one type. Two number values are fine. Twostring values are fine. Mixing "yes" with the number 1 makes the expression a union. Match the arms unless you intend that union.
| Condition | If true | If false |
|---|---|---|
n % 2 === 0 | "even" | "odd" |
score >= 50 | "pass" | "fail" |
a > b | a | b |
The condition itself is a boolean test: comparison, !, &&, ||. Do not write if inside the test. It is an expression, the same kind you already use in an if header.
Nesting is legal, not kind
You can put a ternary in an arm of another ternary. The compiler accepts it. A person reading the line has to count question marks. Prefer else if once you have three or more outcomes.
Example
const score: number = 82;
const grade: string = score >= 90 ? "A" : score >= 80 ? "B" : "C";
console.log(grade);This compiles. The if/else chain from the If Else chapter is easier to extend. Use a nested ternary only when both extra arms stay tiny.
It is not a block
Each arm is one expression. You cannot put two statements in an arm. If the true path needs two lines, write anif. Do not hide a console.log plus an assignment in one ternary. Readers expect a value, not a mutation.
When if is the better tool
Stay with if when you need braces, more than one statement, or a chain of ranges. Use the ternary when you are filling one variable or printing one chosen value. Next: nested loops, where one foris not enough to walk a table.