typescript inline if assignment

Home » TypeScript Tutorial » TypeScript if else

TypeScript if else

Summary : in this tutorial, you will learn about the TypeScript if...else statement.

TypeScript if statement

An if statement executes a statement based on a condition. If the condition is truthy, the if statement will execute the statements inside its body:

For example, the following statement illustrates how to use the if statement to increase the counter variable if its value is less than the value of the max constant:

In this example, because the counter variable starts at zero, it is less than the max constant. The expression counter < max evaluates to true therefore the if statement executes the statement counter++ .

Let’s initialize the counter variable to 100 :

In this example, the expression counter < max evaluates to false . The if statement doesn’t execute the statement counter++ . Therefore, the output is 100.

TypeScript if…else statement

If you want to execute other statements when the condition in the if statement evaluates to false , you can use the if...else statement:

The following illustrates an example of using the if..else statement:

In this example, the expression counter < max evaluates to false therefore the statement in the else branch executes that resets the counter variable to 1 .

Ternary operator ?:

In practice, if you have a simple condition, you can use the ternary operator ?: rather than the if...else statement to make code shorter like this:

TypeScript if…else if…else statement

When you want to execute code based on multiple conditions, you can use the if...else if...else statement.

The if…else if…else statement can have one or more else if branches but only one else branch.

For example:

This example used the if...else if...else statement to determine the discount based on the number of items.

If the number of items is less than or equal to 5, the discount is 5%. The statement in the if branch executes.

If the number of items is less than or equal to 10, the discount is 10%. The statement in the else if branch executes.

When the number of items is greater than 10, the discount is 15%. The statement in the else branch executes.

In this example, the assumption is that the number of items is always greater than zero. However, if the number of items is less than zero or greater than 10, the discount is 15%.

To make the code more robust, you can use another else if instead of the else branch like this:

In this example, when the number of items is greater than 10, the discount is 15%. The statement in the second else if branch executes.

If the number of items is less than zero, the statement in the else branch executes.

• Use the if statement to execute code based on a condition.
• Use the else branch if you want to execute code when the condition is false. It’s good practice to use the ternary operator ?: instead of a simple if…else statement.
• Use if else if...else statement to execute code based on multiple conditions.

Mastering TypeScript’s If Statements – A Comprehensive Guide to Conditionals

Understanding typescript’s if statements.

Understanding how to use if statements in TypeScript is an essential skill for any programmer. With if statements, you can control the flow of your program based on certain conditions. In this guide, we will explore the syntax and usage of if statements in TypeScript, as well as some advanced techniques to enhance your programming skills.

Understanding the Basics of If Statements

The syntax of if statements in TypeScript is quite similar to other programming languages. It starts with the keyword if , followed by a set of parentheses containing the condition that needs to be evaluated. If the condition is true, the code inside the block will be executed. If the condition is false, the code will be skipped.

When evaluating conditions in if statements, TypeScript follows the same rules as JavaScript. It coerces values to a boolean using the truthy and falsy conversion. You can use comparison operators, such as == for equality and != for inequality, to compare values in the condition.

In addition to comparison operators, you can also use logical operators like && (AND) and || (OR) to combine multiple conditions. This allows you to create more complex if statements to handle different scenarios.

Writing If Statements with Single Conditions

Let’s take a look at some examples of using single conditions in if statements. By using comparison operators, you can compare values to determine if a condition is true or false.

Using Comparison Operators in If Statements

Comparison operators are used to compare values and return a boolean result. Here are some examples:

• == (equality operator): checks if two values are equal
• != (inequality operator): checks if two values are not equal

For example:

In the above code, the first if statement will be executed because the condition is true ( age == 25 ). The second if statement will also be executed because the condition is true ( age != 30 ).

Using the typeof Operator in If Statements

The typeof operator in TypeScript is used to determine the data type of a value. You can use it in if statements to perform specific actions based on the data type. Here’s an example:

In the above code, the if statement will be executed because the condition is true ( typeof name === "string" ). It checks if the variable ‘name’ is of type string.

Using the instanceof Operator in If Statements

The instanceof operator in TypeScript is used to check if an object is an instance of a specific class or interface. You can use it in if statements to perform actions based on the instance type. Here’s an example:

In the above code, the if statement will be executed because the condition is true ( jane instanceof Person ). It checks if the object ‘jane’ is an instance of the Person class.

Working with Multiple Conditions in If Statements

Often, you may need to evaluate multiple conditions in if statements. TypeScript allows you to use logical operators to combine conditions and create more complex if statements.

Using Logical Operators (AND, OR) with If Statements

The logical operators && (AND) and || (OR) are commonly used in if statements to combine conditions. Let’s take a look at some examples:

Using the AND Operator

In the above code, the if statement will be executed if both conditions are true ( age > 20 and jobTitle === "Web Developer" ). It checks if the age is greater than 20 and the job title is “Web Developer”.

Using the OR Operator

In the above code, the if statement will be executed if at least one of the conditions is true ( age or country === "USA" ). It checks if the age is less than 18 or the country is "USA".

Using the Ternary Operator in If Statements

The ternary operator in TypeScript is a shorthand way to write if-else statements. It allows you to quickly assign values or execute code based on a condition. Here's an example:

In the above code, the ternary operator is used to assign the value of the message variable based on the condition ( age > 18 ). If the condition is true, the value "You are an adult." will be assigned; otherwise, the value "You are a minor." will be assigned.

Combining Conditions with Parentheses

To create more complex conditions in if statements, you can use parentheses to group conditions together. This allows you to control the order in which conditions are evaluated. Here's an example:

In the above code, the if statement will be executed if either of the conditions is true ( age > 20 && jobTitle === "Web Developer" or age ). It checks if the age is greater than 20 and the job title is "Web Developer", or if the age is less than 30.

Using Else and Else If Statements

The else and else if statements provide alternative code paths in case the initial condition in the if statement is false. They allow you to handle different scenarios based on various conditions.

Writing Else Statements for Alternative Code Paths

You can use the else statement to specify a block of code that will be executed if the initial condition is false. Here's an example:

In the above code, if the initial condition ( age >= 18 ) is false, the code inside the else block will be executed. It will print "You are a minor." to the console.

Using Else If Statements for Multiple Conditions

The else if statement allows you to specify additional conditions to be checked if the initial condition is false. Here's an example:

In the above code, the conditions are checked in the order they are written. If the initial condition ( score >= 90 ) is false, the else if statement will be evaluated. The first else if statement checks if the score is greater than or equal to 80, the second else if statement checks if the score is greater than or equal to 70, and so on. If none of the conditions are true, the code inside the else block will be executed.

Nesting If, Else, and Else If Statements

You can also nest if, else if, and else statements to create more complex logic. Here's an example:

In the above code, if the initial condition ( age >= 18 ) is true, an additional check is performed to determine if the person has enough experience. If the person is eligible for the job, the message "You are eligible for the job." is printed. If the person doesn't have enough experience, the message "You need to gain some experience first." is printed. If the initial condition is false, the message "You must be at least 18 years old." is printed.

Avoiding Common Pitfalls in If Statements

When working with if statements, it's important to be aware of some common pitfalls to avoid bugs and unexpected behavior. Let's take a look at a couple of common pitfalls:

Understanding Truthy and Falsy Values

In JavaScript and TypeScript, certain values are considered "truthy" or "falsy" when evaluated in a boolean context. Understanding these values is crucial when working with if statements.

Falsy values include false , null , undefined , 0 , NaN , and an empty string ( "" ). All other values are considered truthy.

In the above code, the first if statement will be executed because the condition is truthy ( "Truthy value" ). The second if statement will not be executed because the condition is falsy ( 0 ).

Common Mistakes to Avoid When Using If Statements

Here are a couple of common mistakes to avoid when using if statements:

Mistakes in Condition Syntax

Double-check the syntax of your conditions to ensure they are written correctly. Common mistakes include missing parentheses, missing comparison operators, or using assignment (=) instead of equality (== or ===) operators.

Mistakes in Logical Operator Usage

When using logical operators to combine conditions, make sure you are using the correct operator for the desired logic. Using the wrong operator can lead to unexpected results. It's also important to understand short-circuit evaluation, where the right-hand side of an AND operator (&&) or an OR operator (||) is not evaluated if the left-hand side already determines the outcome.

Advanced Techniques for If Statements

Now that you have a solid understanding of if statements in TypeScript, let's explore some advanced techniques to enhance your programming skills.

Using Switch Statements as an Alternative to If Statements

The switch statement is an alternative to if-else statements when you need to perform different actions based on the value of a variable. It provides a more concise and readable way to handle multiple conditions. Here's an example:

In the above code, the switch statement checks the value of the day variable and executes the corresponding block of code. If none of the cases match, the code inside the default block will be executed.

Using Conditional Assignment with If Statements

The conditional assignment, also known as the ternary operator, is a powerful way to assign a value based on a condition. It can also be used in combination with if statements to simplify your code. Here's an example:

In the above code, the conditional assignment is used to assign the value of the message variable based on the condition ( age > 18 ). If the condition is true, the value "You are an adult." will be assigned; otherwise, the value "You are a minor." will be assigned.

Utilizing Nullish Coalescing with If Statements

The nullish coalescing operator (??) is a relatively new addition to JavaScript and TypeScript. It allows you to provide a default value for variables that are null or undefined. You can use it in if statements to handle null or undefined values more effectively. Here's an example:

In the above code, if the name variable is null or undefined, the nullish coalescing operator assigns the value "Anonymous" to the displayName variable. This ensures that the variable has a default value and prevents any potential errors in the code.

In this guide, we have covered the basics of if statements in TypeScript, including the syntax, evaluation of conditions, and usage of logical operators. We have also explored how to write if statements with single and multiple conditions, as well as if-else and if-else if statements. Additionally, we have discussed common pitfalls to avoid and advanced techniques such as switch statements, conditional assignment, and nullish coalescing.

Understanding if statements and knowing how to use them effectively is essential for writing clean and concise code. By practicing these concepts and applying them in your projects, you'll become a more proficient TypeScript programmer. Remember to refer to additional resources for further learning and keep exploring this powerful language.

Related posts:

• Mastering TypeScript – Your Guide to TypeScript Certification Success
• Online TypeScript Compiler – A Comprehensive Guide to Compiler Tools and Resources
• Demystifying TypeScript Case Statements – A Comprehensive Guide and Best Practices
• Exploring the Best Online TypeScript Playground – A Comprehensive Guide
• Everything You Need to Know About TypeScript Certification – The Ultimate Guide

TypeScript - if else

An if statement can include one or more expressions which return boolean. If the boolean expression evaluates to true, a set of statements is then executed.

The following example includes multiple boolean expressions in the if condition.

In the above example, the if condition expression x < y is evaluated to true and so it executes the statement within the curly { } brackets.

if else Condition

An if else condition includes two blocks - if block and an else block. If the if condition evaluates to true, then the if block is executed. Otherwies, the else block is executed.

In the above example, the else block will be executed. Remember: else cannot include any condition and it must follow if or else if conditions.

The else if statement can be used after the if statement.

Ternary operator

A ternary operator is denoted by '?' and is used as a short cut for an if..else statement. It checks for a boolean condition and executes one of the two statements, depending on the result of the boolean condition.

In the above example, condition x > y is turned out be to false, so the second statement will be executed.

We are a team of passionate developers, educators, and technology enthusiasts who, with their combined expertise and experience, create in -depth, comprehensive, and easy to understand tutorials.We focus on a blend of theoretical explanations and practical examples to encourages hands - on learning. Visit About Us page for more information.

• Course List
• Introduction to TypeScript
• Environment Setup
• Workspace & first app
• Basic Syntax
• Variables & Constants
• Conditional Control
• if, else if, else & switch
• Iteration Control
• for, while, do-while loops
• Intermediate
• Map Collections
• Object Oriented Programming
• OOP: Classes & Objects
• OOP: Standalone Objects
• OOP: Constructors
• OOP: Property Modifiers
• OOP: Access Modifiers
• OOP: Parameter Properties
• OOP: Getters & Setters
• OOP: Static methods
• OOP: Index Signatures
• OOP: Inheritance
• OOP: Composition
• Compilation Config (tsconfig.json)

TypeScript if, else & switch Conditional Control Tutorial

In this TypeScript tutorial we learn to control the flow of our application through the if, else if, else and switch statements.

We also learn how to nest conditional statements inside one another, and use the shorthand method of writing an if statement with the ternary operator.

• What is conditional control
• The if statement
• The else if ladder
• The else fallback
• Nesting if statements
• The ternary operator ( ? : )
• The switch statement

Summary: Points to remember

We can control the flow of our application by evaluating certain conditions. Based on the result of the evaluation, we can then execute certain sections of code.

As an example, let’s consider an application with a member area. To gain access to the member area, a user must provide the correct login credentials.

If the user provides the correct credentials, they are allowed to enter the member area. If not, they are given the option to try again or reset their password.

In pseudocode, the example above would look something like this.

The actual code will not look like the example above, but it serves to give you an example of what conditional control is used for.

We can use conditional control in TypeScript through the following statements, in combination with comparison and logical operators.

The if statement will evaluate if a condition is true or not.

If a condition proves true, the compiler will execute the code in the if statement’s code block. If the condition proves false, the compiler will move on to the next statement outside and below the code block.

An if statement is written with the keyword if , followed by the condition(s) we want to evaluate between parentheses.

Then, we specify a code block with open and close curly braces that will be executed if the condition proves true.

In the example above, the if statement compares the two numbers to see if they are the same. Because they are, the message is printed to the console.

If we change one of the numbers to another value, the condition will be false and the message will not be printed.

When we run the example above, nothing is printed to the console because the condition is false and the print statement never gets executed.

The else if ladder can be used when we want to evaluate extra conditions that relate to our if statement.

To create an else if ladder, we simply add the keyword else between two if statements, connecting them.

If the first condition proves false, the compiler will evaluate the second before moving on to any other code.

We use else if ladders to connect our if statements together, sort of grouping them.

note An else if statement can only follow an if statement, it cannot stand on its own. The first conditional statement must always be an if.

The else statement acts as a catch-all fallback for anything that isn’t covered by an if statement or an else if ladder.

The else statement doesn’t need a conditional block in the header because it works as a catch-all. We only write the keyword else , followed by its execution block.

note Like with the else if ladder, the else statement cannot stand on its own. It must follow an if statement or an else if ladder.

In the example above, our else execution block is executed because both if statements prove false.

TypeScript allows us to nest if statements inside other if statements. The compiler will evaluate each if statement in a hierarchical fashion.

All we do is write an if statement inside the execution block of another if statement.

We’re not limited to one nested if statement. We can have as many nested if conditions as we need in one control structure set.

note We recommend not nesting more than three levels deep. Nesting too deep is a bad practice, in most situations we can use an alternative method.

When we have an if else statement with only single execution statements, we can use what’s known as the ternary operator as a shorthand method to write it.

To use the ternary operator, we write the condition between parentheses first, followed by a ? (question mark) operator.

Then, we write the single execution statement if the condition proves true, followed by the : (colon) operator.

Finally, we write the single execution statement if the condition proves false, and terminate the whole expression with a semicolon.

Let’s consider the following if else statement.

In the example above, we evaluate if a number is 10 or not, and print a message to the console. Let’s convert this into shorthand with the ternary operator.

It may seem confusing at first, especially if you’ve only been writing traditional if statements for a while, but with practice it becomes second nature.

note It’s important to note that many developers do not like to use the ternary operator because it makes the code harder to read, especially for new developers.

It can also result in some impenetrably complex expressions. Some employers even disallow its use altogether.

For this reason, we’ll only be using traditional if else statements throughout this tutorial course, but feel free to practice the ternary in case you come across it in the wild.

We use the switch statement when we want to compare a single value against a list of many other values.

Before we explain how it works, let’s look at the syntax first.

First, we specify the main value that we will be comparing other values against. Then, in the code block, we specify our cases.

A case consists of the value we want to compare against the main value, and execution code after the : (colon) if the comparison proves true.

The break keyword tells the compiler that we’ve found what we’re looking for in the switch, so it can break out of it and continue on to code outside and below the switch.

The default case acts as our fallback statement, much like an else statement. In fact, the switch statement above is comparable to the following if statement.

Let’s see a real world example.

In the example above, we have a single main value (grade) that’s being evaluated against multiple cases. When a case evaluates to true, the execution statement after the colon executes.

note Typically a switch statement is only used when we want to compare one value to many others.

• We control the flow of our application with if , else if , else and switch conditional control statements.
• The else if ladder and else statement cannot stand on their own, they must be part of an if statement.
• The else statement represents everything that the if and else if statements do not cover.
• We can nest conditionals by writing them inside the execution blocks of other conditionals.
• The ternary operator is a shorthand method of writing an if else statement with only a single execution statement.
• A switch statement is used to compare one value against many.

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

The guide to conditional types in TypeScript

Since version 2.8, TypeScript has introduced support for conditional types. They might be a niche feature, but, as we’ll see, they are a very useful addition that helps us write reusable code.

In this article, we’re going to see what conditional types are and why we might have used them intensively, even without knowing it.

Constraints on conditional types

Type inference in conditional types, distributive conditional types, nonnullable<t>, extract<t, u> and exclude<t, u>, parameters<t> and returntype<t>, constructorparameters<t> and instancetype<t>, what are conditional types.

Conditional types let us deterministically define type transformations depending on a condition. In brief, they are a ternary conditional operator applied at the type level rather than at the value level.

Conditional types are defined as follows:

In plain English, the definition above would be as follows:

If a given type SomeType extends another given type OtherType , then ConditionalType is TrueType , otherwise it is FalseType .

As usual, extends here means that any value of type SomeType is also of type OtherType .

Conditional types can be recursive; that is, one, or both, of the branches can themselves be a conditional type:

One of the main advantages of conditional types is their ability to narrow down the possible actual types of a generic type.

For instance, let’s assume we want to define ExtractIdType<T> , to extract, from a generic T , the type of a property named id . In this case, the actual generic type T must have a property named id . At first, we might come up with something like the following snippet of code:

Here, we made it explicit that T must have a property named id , with type either string or number . Then, we defined three interfaces: NumericId , StringId , and BooleanId .

If we attempt to extract the type of the id property, TypeScript correctly returns string and number for StringId and NumericId , respectively. However, it fails for BooleanId : Type 'BooleanId' does not satisfy the constraint '{ id: string | number; }'. Types of property 'id' are incompatible. Type 'boolean' is not assignable to type 'string | number' .

Still, how can we enhance our ExtractIdType to accept any type T and then resort to something like never if T did not define the required id property? We can do that using conditional types:

By simply moving the constraint in the conditional type, we were able to make the definition of BooleanIdType work. In this second version, TypeScript knows that if the first branch is true, then T will have a property named id with type string | number .

It is so common to use conditional types to apply constraints and extract properties’ types that we can use a sugared syntax for that. For instance, we could rewrite our definition of ExtractIdType as follows:

In this case, we refined the ExtractIdType type. Instead of forcing the type of the id property to be of type string | number, we’ve introduced a new type U using the infer keyword. Hence, BooleanIdType won’t evaluate to never anymore. In fact, TypeScript will extract boolean as expected.

infer provides us with a way to introduce a new generic type, instead of specifying how to retrieve the element type from the true branch.

At the end of the post, we’ll see some useful inbuilt types relying on the infer keyword.

In TypeScript, conditional types are distributive over union types. In other words, when evaluated against a union type, the conditional type applies to all the members of the union. Let’s see an example:

In the example above, we simply defined a conditional type named ToStringArray , evaluating to string[] if and only if its generic parameter is string . Otherwise, it evaluates to never .

Over 200k developers use LogRocket to create better digital experiences

Let’s now see how TypeScript evaluates ToStringArray<string | number> to define StringArray . First, ToStringArray distributes over the union:

Then, we can replace ToStringArray with its definition:

Evaluating the conditionals leaves us with the following definition:

Since never is a subtype of any type, we can remove it from the union:

Most of the times the distributive property of conditional types is desired. Nonetheless, to avoid it we can just enclose each side of the extends keyword with square brackets:

In this case, when evaluating StringArray , the definition of ToStringArray does not distribute anymore:

Hence, since string | number does not extend, string, StringArray will become never .

Lastly, the distributive property doesn’t hold if the union type is part of a larger expression (i.e., a function, object, or tuple), no matter if this larger expression appears before or after extends . Let’s see an example:

Inbuilt conditional types

This last section shows a few examples of conditional types defined by TypeScript’s standard library.

NonNullable<T> filters out the null and undefined values from a type T :

Extract<T, U> and are one the opposite of the other. The former filters the T type to keep all the types that are assignable to U . The latter, on the other hand, will keep the types that are not assignable to U :

In the example above when defining A , we asked TypeScript to filter out of string | string[] all the types that were not assignable to any[] . That would only be string, as string[] is perfectly assignable to any[] . On the contrary, when we defined B , we asked TypeScript to do just the opposite. As expected, the result is string, instead of string[] .

The same argument holds for C and D . In the definition of C , number is not assignable to boolean . Hence, TypeScript infers never as a type. When it comes to defining D , instead, TypeScript keeps number .

Parameters<T> and ReturnType<T> let us extract all the parameter types and the return type of a function type, respectively:

Parameters<T> is a bit complex in its declaration. It basically produces a tuple type with all the parameter types (or never if T is not a function).

In particular, (...args: infer P) => any indicates a function type where the actual type of all the parameters ( P ) gets inferred. Any function will be assignable to this, as there is no constraint on the type of the parameters, and the return type is any .

Similarly, ReturnType<T> extracts the return type of a function. In this case, we use any to indicate that the parameters can be of any type. Then, we infer the return type R .

ConstructorParameters<T> and InstanceType<T> are the same things as Parameters<T> and ReturnType<T> , applied to constructor function types rather than to function types:

In this article, we explored conditional types in TypeScript. We started from the basic definition and how to use it to enforce constraints. We then saw how type inference works and explored the workings of the distributivity property of union types . Lastly, we looked at some of the common utility conditional types defined by TypeScript: we analyzed their definitions and complemented them with a few examples.

As we saw throughout this article, conditional types are a very advanced feature of the type system. However, we’ll likely end up using them almost on a daily basis because TypeScript’s standard library widely employs them.

Hopefully, this post will help you write your own types to simplify your code and make it more readable and maintainable in the long run.

LogRocket : Full visibility into your web and mobile apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page and mobile apps.

Try it for free .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)
• #typescript

Would you be interested in joining LogRocket's developer community?

Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Stop guessing about your digital experience with LogRocket

Recent posts:.

Creating toast notifications using Solid Toast

Toast notifications are messages that appear on the screen to provide feedback to users. When users interact with the user […]

Deno adoption guide: Overview, examples, and alternatives

Deno’s features and built-in TypeScript support make it appealing for developers seeking a secure and streamlined development experience.

Types vs. interfaces in TypeScript

It can be difficult to choose between types and interfaces in TypeScript, but in this post, you’ll learn which to use in specific use cases.

How to build a bottom navigation bar in Flutter

This tutorial demonstrates how to build, integrate, and customize a bottom navigation bar in a Flutter app.

2 Replies to "The guide to conditional types in TypeScript"

Nice article. In the example of section “Type inference in conditional types”, `T[“I’d”]` should be `U` I think.

Yes, you’re right. Both actually work, but `U` is more correct, considering that the example shows the purpose of the `infer` keyword.

Leave a Reply Cancel reply

I'm tired of these old-school single-line statements and looked up one-line solutions in TypeScript. The following one is pretty clean in my eyes:

How to cast a string to a Number in Typescript

Ts2322 error in typescript explained, how to use functions inside a switch statement in typescript, saved you some valuable time.

Buy me a drink 🍺 to keep me motivated to create free content like this!

Hello! I'm Stef, a software engineer near Antwerp, Belgium. For the past decade, I've built websites with Drupal and Angular for government and enterprise clients.

Since 2023, I've been captivated by generative art, especially with platforms like Midjourney.

Through this blog, I aim to share my code and projects with the community. Cheers and enjoy!

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Conditional (ternary) operator

The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark ( ? ), then an expression to execute if the condition is truthy followed by a colon ( : ), and finally the expression to execute if the condition is falsy . This operator is frequently used as an alternative to an if...else statement.

An expression whose value is used as a condition.

An expression which is executed if the condition evaluates to a truthy value (one which equals or can be converted to true ).

An expression which is executed if the condition is falsy (that is, has a value which can be converted to false ).

Description

Besides false , possible falsy expressions are: null , NaN , 0 , the empty string ( "" ), and undefined . If condition is any of these, the result of the conditional expression will be the result of executing the expression exprIfFalse .

A simple example

Handling null values.

One common usage is to handle a value that may be null :

Conditional chains

The ternary operator is right-associative, which means it can be "chained" in the following way, similar to an if … else if … else if … else chain:

This is equivalent to the following if...else chain.

Specifications

Browser compatibility

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Nullish coalescing operator ( ?? )
• Optional chaining ( ?. )
• Making decisions in your code — conditionals
• Expressions and operators guide

• Data Structures
• Web Developement
• AI Code Generator NEW
• Student Help
• Main Website

Write an Inline IF Statement in JavaScript (with code)

Conditional statements are a fundamental aspect of programming, as they allow developers to add logic and control the basic flow of a program based on specific conditions. In this article, we will learn different ways of creating inline If statements in JavaScript, such as using ternary operators and logical operators.

What are Inline IF Statements in JavaScript?

As we know IF statements are used for checking a specific condition. It often consists of an else block, when the “if” condition is false then the “else” block is executed.

A simple syntax of “if-else” is given below:

We want to learn about “inline if”, which means compiling this whole code into a single line. Let’s learn how to do this:

1) Using Ternary Operators

The best way to write an inline IF statement in Javascript is by using Ternary Operator. The ternary operator is denoted by a question mark(?) and a colon(:), allowing for concise conditional logic and action.

The syntax is as follows:

Here, Condition is a statement which can either be true or false, returning trueAns or falseAns respectively.

Therefore we can see that if the condition is true then the statement after ? executes and in other cases, statement after : executes.

2) Using Logical Operators

Another method for the same is using a combination of AND(&&) and OR(||) operators and executing the if else condition in a single line. 

As we know while executing a logical AND both the operands need to be true to return true and for an OR, we will return true even if one of the operands is true. The logical OR operator returns the first true operand, or the last operand if none are true.

Here is an example for more understanding:

Here’s how it works:

• First of all, we will encounter `a>b`, which will return false as 10 is smaller than 12.
• Then `a>b && a` will return false as for AND(&&) both the operands need to be true for returning true, and here a>b is false.
• After that `a>b && a || b` is a combination of both AND and OR operators. The expression is evaluated from left to right.
• Since `a>b && a` is false, the expression becomes false || b.
• And we know that the logical OR operator returns the first true operand, or the last operand if none are true.
• Here it returns b because the second operand is true.

3) Multiple Conditions Using Ternary Operator

If we have nested or multiple if-else blocks, we can still use a ternary operator to write this whole code in a single line of code. Its syntax is as follows:

Here if first “condition1” is true then trueAns1 part will be executed, else if “condition2” is true then it will result in the execution of trueAns2 and falseAns is the else part.

Let’s see this one line of code by breaking it into pieces:

Here we can see how if-else if-else is executed in a single line of code. If a is greater than b, it returns the value of a. If a is less than b, it returns the value of b. And if none of the conditions are met, it returns “NaN”.

Should I use inline if in JavaScript?

The usage of inline if statements depends on the readability of your code. Using such statements can make your code more concise, but remember that it is also harder to read, and debug. Also, if your condition is quite complex, it is recommended to use the traditional if-else statement for clarity. Also, if you are working in a company, most enterprises don’t recommend using such IF statements.

We explored different techniques for implementing inline If statements in JavaScript. So, the next time you come across a situation where you need to use if else statements in your code, consider replacing your code with inline if statements for a more concise and readable code. Need some more explanation? Get JavaScript Assignment help from experts online.

Nikita Arora

I'm Nikita, a B.Tech Computer Engineering student. My passion lies in web development, data structures, and algorithms. Committed to continuous learning, I find immense joy in sharing insights and fostering collaboration among like-minded peers in web development. Excited about exploring interesting opportunities in technology.

Related Posts

Top 40 JavaScript Interview Questions and Answers in 2024

10 Must-Know React UI Component Libraries for Web Devs 2024

Currying in JavaScript Explained (with Examples)

Sort an Object Array by Date in JavaScript (with code)

JavaScript Recursion (with Examples)

About favtutor.

FavTutor is a trusted online tutoring service to connects students with expert tutors to provide guidance on Computer Science subjects like Java, Python, C, C++, SQL, Data Science, Statistics, etc.

• AI News, Research & Latest Updates
• Data Science

Important Subjects

• Python Assignment Help
• R Programming Help
• Java Homework Help
• Programming Help
• Editorial Policy
• Privacy Policy
• Terms and Conditions

© Copyright 2024. All Right Reserved.

• AI Code Generator

• DSA with JS - Self Paced
• JS Tutorial
• JS Exercise
• JS Interview Questions
• JS Operator
• JS Projects
• JS Examples
• JS Free JS Course
• JS A to Z Guide
• JS Formatter

How to write an inline IF statement in JavaScript ?

We can write an inline IF statement in javascript using the methods described below. Method 1: In this method we write an inline IF statement Without else, only by using the statement given below.

Example: Below is the implementation of above approach:

Method 2: In this method, we will use ternary operator to write inline if statement.

If condition is true then value1 will be assigned to result variable and if wrong then value2 will be assigned.

Please Login to comment...

Similar reads.

• Web Technologies
• JavaScript-Questions
• Top 10 Fun ESL Games and Activities for Teaching Kids English Abroad in 2024
• Top Free Voice Changers for Multiplayer Games and Chat in 2024
• Best Monitors for MacBook Pro and MacBook Air in 2024
• 10 Best Laptop Brands in 2024
• 15 Most Important Aptitude Topics For Placements [2024]

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inline assignment in if statement breaks instanceof #31292

cmerighi commented May 7, 2019 • edited Loading

Successfully merging a pull request may close this issue.

Set a default value if Null or Undefined in TypeScript

Last updated: Feb 28, 2024 Reading time · 3 min

# Set a Variable's value if it's Null or Undefined in TypeScript

Use the logical nullish assignment operator to set a variable's value if it's equal to null or undefined .

The logical nullish assignment (??=) operator assigns the provided value to the variable if it's equal to null or undefined .

We used the logical nullish assignment (??=) operator to assign a value to the role variable if it stores a null or undefined value.

If the value of the role variable is not equal to null or undefined , the logical nullish assignment (??=) operator short-circuits and doesn't assign the value to the variable.

An alternative approach is to use the nullish coalescing (??) operator.

# Set a default value if Null or Undefined in TypeScript

Use the nullish coalescing operator (??) to set a default value if null or undefined in TypeScript.

An easy way to think about the nullish coalescing operator (??) is that it allows us to provide a fallback value if the value to the left is equal to null or undefined .

If the value to the left isn't null or undefined , the operator returns the value as is.

Otherwise, the variable gets assigned a new value.

# Set a default value if Null or Undefined using the ternary operator

An alternative approach is to explicitly check whether the value is equal to null or undefined with the ternary operator.

The ternary operator is very similar to an if/else statement.

If the expression to the left of the question mark is truthy, the operator returns the value to the left of the colon, otherwise, the value to the right of the colon is returned.

You can imagine that the value before the colon is the if block and the value after the colon is the else block.

Notice that we used the loose (==) equality operator in the example.

The loose (==) equality operator checks for both null and undefined .

An easy way to visualize this is to use the operators to compare null and undefined .

The example shows that when using the loose equality operator (==), null is equal to undefined .

# Set default value to variable if it's Null or undefined using if

You can also set a default value to a variable if it's equal to null or undefined in a simple if statement.

We used the logical OR (||) operator to chain 2 conditions.

If either of the conditions returns a truthy value, the if block runs.

We check if the myVar variable is equal to null or undefined and if it is, we reassign the variable.

# Set a default value if Null or Undefined using logical OR (||)

You can also use the logical OR (||) operator to provide a default value if a variable is null or undefined .

The logical OR (||) operator returns the value to the right if the value to the left is falsy.

This is different from the nullish coalescing operator we used in the first example.

The logical OR (||) operator checks whether a value is falsy, whereas the nullish coalescing operator (??) checks whether a value is null or undefined .

The falsy values in JavaScript (and TypeScript) are undefined , null , 0 , false , "" (empty string), NaN (not a number).

This means that the logical OR (||) operator will return the value to the right if the value to the left is any of the aforementioned 6 falsy values.

On the other hand, the nullish coalescing operator will return the value to the right only if the value to the left is null or undefined .

Borislav Hadzhiev

Web Developer

Copyright © 2024 Borislav Hadzhiev

• Trending Categories

• Selected Reading
• UPSC IAS Exams Notes
• Developer's Best Practices
• Questions and Answers
• Effective Resume Writing
• HR Interview Questions
• Computer Glossary

How to write an inline IF statement in JavaScript?

Conditional statements are the most important and basic concept of any programming language. The if-else statement allows us to execute any code block conditionally. We can define the condition for the if statement in braces, and if the condition becomes true, it executes the code of the if block; Otherwise, it executes the code of the else block.

Here, we have demonstrated how an if-else statement works in JavaScript.

From the above code, users can learn the syntax of if-else statements.

What if I say that you can write the above five lines of code into one line? Yes, you can do that using the inline if statement.

Users can follow the syntax below to use the inline if statement in JavaScript.

In the above syntax, a condition is an expression. When the condition expression evaluates true, it executes code block 1; Otherwise, it executes code block 2.

If we compare the inline if statement with the if-else statement, code-block-1 is a code of the if statement and code-block-2 is a code of the else statement.

In the example below, we will learn the basic use of the inline if statement. We have used the condition ‘10===10’, and if the condition evaluates true, it will print that ’10 is equal to 10’; Otherwise, it will print that ’10 is not equal to 10’.

In the output, users can observe that it prints ’10 is equal to 10’ as the condition always evaluates true.

In the example below, we have created the array of numbers. Also, we have created the func1() and func2() function, which prints the different messages with the value passed as a parameter.

We used the forEach() method to loop through the array. In the callback function of the forEach() method, we check that if the number is divisible by 10, call the func1() function; Otherwise, call the func2() function.

In the example below, we check whether the year is a leap year or not using an if-else statement and an inline if statement. The checkYear() function uses the if-else statements to ensure whether the year passed as a parameter is a leap year.

In the checkInlineYear() function, we have implemented the same logic as in the checkYear() function, but we have converted the if-else statements into the inline if statement. Users can see how we have written the nine lines in a single line.

Users can observe that both functions give the same output for any year value.

Users learned to use the inline if statement in JavaScript. We can observe that inline if statements make code clearer and more readable, and it is always good to write fewer lines of code with the same logic.

• Related Articles
• How to write inline if statement for print in Python?
• How to write inline JavaScript code in HTML page?
• How to write an if-else statement in a JSP page?
• How to include inline JavaScript inside an HTML page?
• How to indent an if...else statement in Python?
• How to use OR condition in a JavaScript IF statement?
• How to add an inline layer in HTML?
• How to show if...else statement using a flowchart in JavaScript?
• How to write JavaScript in an External File?
• What is if statement in JavaScript?
• What is if...else if... statement in JavaScript?
• How to Write a Thesis Statement?
• How Do You Make An If Statement In JavaScript That Checks If A Variable is Equal To A Certain Word?
• How to compare two variables in an if statement using Python?
• How to use for...in statement to loop through an Array in JavaScript?

Kickstart Your Career

Get certified by completing the course

Was this page helpful?

This page has been deprecated

This handbook page has been replaced, go to the new page

One of TypeScript’s core principles is that type checking focuses on the shape that values have. This is sometimes called “duck typing” or “structural subtyping”. In TypeScript, interfaces fill the role of naming these types, and are a powerful way of defining contracts within your code as well as contracts with code outside of your project.

Our First Interface

The easiest way to see how interfaces work is to start with a simple example:

The type checker checks the call to printLabel . The printLabel function has a single parameter that requires that the object passed in has a property called label of type string . Notice that our object actually has more properties than this, but the compiler only checks that at least the ones required are present and match the types required. There are some cases where TypeScript isn’t as lenient, which we’ll cover in a bit.

We can write the same example again, this time using an interface to describe the requirement of having the label property that is a string:

The interface LabeledValue is a name we can now use to describe the requirement in the previous example. It still represents having a single property called label that is of type string . Notice we didn’t have to explicitly say that the object we pass to printLabel implements this interface like we might have to in other languages. Here, it’s only the shape that matters. If the object we pass to the function meets the requirements listed, then it’s allowed.

It’s worth pointing out that the type checker does not require that these properties come in any sort of order, only that the properties the interface requires are present and have the required type.

Optional Properties

Not all properties of an interface may be required. Some exist under certain conditions or may not be there at all. These optional properties are popular when creating patterns like “option bags” where you pass an object to a function that only has a couple of properties filled in.

Here’s an example of this pattern:

Interfaces with optional properties are written similar to other interfaces, with each optional property denoted by a ? at the end of the property name in the declaration.

The advantage of optional properties is that you can describe these possibly available properties while still also preventing use of properties that are not part of the interface. For example, had we mistyped the name of the color property in createSquare , we would get an error message letting us know:

Readonly properties

Some properties should only be modifiable when an object is first created. You can specify this by putting readonly before the name of the property:

You can construct a Point by assigning an object literal. After the assignment, x and y can’t be changed.

TypeScript comes with a ReadonlyArray<T> type that is the same as Array<T> with all mutating methods removed, so you can make sure you don’t change your arrays after creation:

On the last line of the snippet you can see that even assigning the entire ReadonlyArray back to a normal array is illegal. You can still override it with a type assertion, though:

readonly vs const

The easiest way to remember whether to use readonly or const is to ask whether you’re using it on a variable or a property. Variables use const whereas properties use readonly .

Excess Property Checks

In our first example using interfaces, TypeScript lets us pass { size: number; label: string; } to something that only expected a { label: string; } . We also just learned about optional properties, and how they’re useful when describing so-called “option bags”.

However, combining the two naively would allow an error to sneak in. For example, taking our last example using createSquare :

Notice the given argument to createSquare is spelled colour instead of color . In plain JavaScript, this sort of thing fails silently.

You could argue that this program is correctly typed, since the width properties are compatible, there’s no color property present, and the extra colour property is insignificant.

However, TypeScript takes the stance that there’s probably a bug in this code. Object literals get special treatment and undergo excess property checking when assigning them to other variables, or passing them as arguments. If an object literal has any properties that the “target type” doesn’t have, you’ll get an error:

Getting around these checks is actually really simple. The easiest method is to just use a type assertion:

However, a better approach might be to add a string index signature if you’re sure that the object can have some extra properties that are used in some special way. If SquareConfig can have color and width properties with the above types, but could also have any number of other properties, then we could define it like so:

We’ll discuss index signatures in a bit, but here we’re saying a SquareConfig can have any number of properties, and as long as they aren’t color or width , their types don’t matter.

One final way to get around these checks, which might be a bit surprising, is to assign the object to another variable: Since squareOptions won’t undergo excess property checks, the compiler won’t give you an error.

The above workaround will work as long as you have a common property between squareOptions and SquareConfig . In this example, it was the property width . It will however, fail if the variable does not have any common object property. For example:

Keep in mind that for simple code like above, you probably shouldn’t be trying to “get around” these checks. For more complex object literals that have methods and hold state, you might need to keep these techniques in mind, but a majority of excess property errors are actually bugs. That means if you’re running into excess property checking problems for something like option bags, you might need to revise some of your type declarations. In this instance, if it’s okay to pass an object with both a color or colour property to createSquare , you should fix up the definition of SquareConfig to reflect that.

Function Types

Interfaces are capable of describing the wide range of shapes that JavaScript objects can take. In addition to describing an object with properties, interfaces are also capable of describing function types.

To describe a function type with an interface, we give the interface a call signature. This is like a function declaration with only the parameter list and return type given. Each parameter in the parameter list requires both name and type.

Once defined, we can use this function type interface like we would other interfaces. Here, we show how you can create a variable of a function type and assign it a function value of the same type.

For function types to correctly type check, the names of the parameters do not need to match. We could have, for example, written the above example like this:

Function parameters are checked one at a time, with the type in each corresponding parameter position checked against each other. If you do not want to specify types at all, TypeScript’s contextual typing can infer the argument types since the function value is assigned directly to a variable of type SearchFunc . Here, also, the return type of our function expression is implied by the values it returns (here false and true ).

Had the function expression returned numbers or strings, the type checker would have made an error that indicates return type doesn’t match the return type described in the SearchFunc interface.

Indexable Types

Similarly to how we can use interfaces to describe function types, we can also describe types that we can “index into” like a[10] , or ageMap["daniel"] . Indexable types have an index signature that describes the types we can use to index into the object, along with the corresponding return types when indexing.

Let’s take an example:

Above, we have a StringArray interface that has an index signature. This index signature states that when a StringArray is indexed with a number , it will return a string .

There are four types of supported index signatures: string, number, symbol and template strings. It is possible to support many types of indexers, but the type returned from a numeric indexer must be a subtype of the type returned from the string indexer.

This is because when indexing with a number , JavaScript will actually convert that to a string before indexing into an object. That means that indexing with 100 (a number ) is the same thing as indexing with "100" (a string ), so the two need to be consistent.

While string index signatures are a powerful way to describe the “dictionary” pattern, they also enforce that all properties match their return type. This is because a string index declares that obj.property is also available as obj["property"] . In the following example, name ’s type does not match the string index’s type, and the type checker gives an error:

However, properties of different types are acceptable if the index signature is a union of the property types:

Finally, you can make index signatures readonly in order to prevent assignment to their indices:

You can’t set myArray[2] because the index signature is readonly .

Indexable Types with Template Strings

A template string can be used to indicate that a particular pattern is allowed, but not all. For example, a HTTP headers object may have a set list of known headers and support any custom defined properties which are prefixed with x- .

Class Types

Implementing an interface.

One of the most common uses of interfaces in languages like C# and Java, that of explicitly enforcing that a class meets a particular contract, is also possible in TypeScript.

You can also describe methods in an interface that are implemented in the class, as we do with setTime in the below example:

Interfaces describe the public side of the class, rather than both the public and private side. This prohibits you from using them to check that a class also has particular types for the private side of the class instance.

Difference between the static and instance sides of classes

When working with classes and interfaces, it helps to keep in mind that a class has two types: the type of the static side and the type of the instance side. You may notice that if you create an interface with a construct signature and try to create a class that implements this interface you get an error:

This is because when a class implements an interface, only the instance side of the class is checked. Since the constructor sits in the static side, it is not included in this check.

Instead, you would need to work with the static side of the class directly. In this example, we define two interfaces, ClockConstructor for the constructor and ClockInterface for the instance methods. Then, for convenience, we define a constructor function createClock that creates instances of the type that is passed to it:

Because createClock ’s first parameter is of type ClockConstructor , in createClock(AnalogClock, 7, 32) , it checks that AnalogClock has the correct constructor signature.

Another simple way is to use class expressions:

Extending Interfaces

Like classes, interfaces can extend each other. This allows you to copy the members of one interface into another, which gives you more flexibility in how you separate your interfaces into reusable components.

An interface can extend multiple interfaces, creating a combination of all of the interfaces.

Hybrid Types

As we mentioned earlier, interfaces can describe the rich types present in real world JavaScript. Because of JavaScript’s dynamic and flexible nature, you may occasionally encounter an object that works as a combination of some of the types described above.

One such example is an object that acts as both a function and an object, with additional properties:

When interacting with 3rd-party JavaScript, you may need to use patterns like the above to fully describe the shape of the type.

Interfaces Extending Classes

When an interface type extends a class type it inherits the members of the class but not their implementations. It is as if the interface had declared all of the members of the class without providing an implementation. Interfaces inherit even the private and protected members of a base class. This means that when you create an interface that extends a class with private or protected members, that interface type can only be implemented by that class or a subclass of it.

This is useful when you have a large inheritance hierarchy, but want to specify that your code works with only subclasses that have certain properties. The subclasses don’t have to be related besides inheriting from the base class. For example:

In the above example, SelectableControl contains all of the members of Control , including the private state property. Since state is a private member it is only possible for descendants of Control to implement SelectableControl . This is because only descendants of Control will have a state private member that originates in the same declaration, which is a requirement for private members to be compatible.

Within the Control class it is possible to access the state private member through an instance of SelectableControl . Effectively, a SelectableControl acts like a Control that is known to have a select method. The Button and TextBox classes are subtypes of SelectableControl (because they both inherit from Control and have a select method). The ImageControl class has its own state private member rather than extending Control , so it cannot implement SelectableControl .

Nightly Builds

How to use a nightly build of TypeScript

The TypeScript docs are an open source project. Help us improve these pages by sending a Pull Request ❤

Last updated: Sep 02, 2024  

@typescript-eslint/eslint-plugin includes over 100 rules that detect best practice violations, bugs, and/or stylistic issues specifically for TypeScript code. All of our rules are listed below.

Instead of enabling rules one by one, we recommend using one of our pre-defined configs to enable a large set of recommended rules.

The rules are listed in alphabetical order. You can optionally filter them based on these categories:

• ✅ recommended
• 🎨 stylistic
• 💡 has suggestions
• 💭 type checked
• 🧱 extension
• 💀 deprecated

(These categories are explained in more detail below .)

Filtering ​

Config group (⚙️) ​.

"Config Group" refers to the pre-defined config that includes the rule. Extending from a configuration preset allow for enabling a large set of recommended rules all at once.

• 🔧 fixable refers to whether the rule contains an ESLint --fix auto-fixer .
• Sometimes, it is not safe to automatically fix the code with an auto-fixer. But in these cases, we often have a good guess of what the correct fix should be, and we can provide it as a suggestion to the developer.
• 💭 requires type information refers to whether the rule requires typed linting .
• 🧱 extension rule means that the rule is an extension of an core ESLint rule (see Extension Rules ).
• 💀 deprecated rule means that the rule should no longer be used and will be removed from the plugin in a future version.

Extension Rules ​

Some core ESLint rules do not support TypeScript syntax: either they crash, ignore the syntax, or falsely report against it. In these cases, we create what we call an "extension rule": a rule within our plugin that has the same functionality, but also supports TypeScript.

Extension rules generally completely replace the base rule from ESLint core. If the base rule is enabled in a config you extend from, you'll need to disable the base rule:

Search for 🧱 extension rule s in this page to see all extension rules.

• Config Group (⚙️)
• Extension Rules

• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
• OverflowAI GenAI features for Teams
• OverflowAPI Train & fine-tune LLMs
• Labs The future of collective knowledge sharing
• About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

How to check for null value inline and throw an error in typescript?

In C# I can write code to check for null references and in case throw a custom exception, example:

In recent updates TypeScript introduced the null coalescing operator ?? but using it like the above statement produces a compilation error. Is there some similar allowed syntax in TypeScript?

To clarify, the desired behavior is achieved with the following code:

works logically ok but throws a less meaningful exception.

• Shouldn't that C# version be just var myValue = someObject?.SomeProperty ?? throw new Exception("..."); ? Or are you trying to get someObject.SomeProperty.SomeProperty ? –  T.J. Crowder Commented Mar 27, 2020 at 10:55

4 Answers 4

As long as TypeScript doesn't support this natively, you could write a function similar to this one:

which would then allow you to throw an error as expression:

• A throw helper function is an interesting approach, thanks for sharing! –  Valentino Miori Commented Jan 11, 2021 at 13:51
• Very nice! Thanks for this answer. –  Johnny Oshika Commented Jan 28, 2021 at 5:02
• Do note that this will goof up your stacktrace a bit. –  Finlay Roelofs Commented Dec 14, 2023 at 22:56

The reason for the syntax error is that throw is a statement, so you can't use it as the operand to an operator.

There is a JavaScript proposal for throw expressions working its way through the TC39 process, currently at Stage 2. If it gets to Stage 3 you can expect it will show up in TypeScript soon thereafter. (Update at the end of 2020: However, it seems to have stalled, having been blocked in Jan 2018 by a TC39 member who didn't think they "...were sufficiently motivated if we have do expressions..." Note that do expressions are still Stage 1 here at the end of 2020, but at least they were presented to TC39 in June .)

With a throw expression, you could write this (if you want the value of someObject.someProperty ):

Or if you want someObject.someProperty.someProperty (which is what I think your C# version does):

There's a Babel plugin for it you can use now. Here's the first example above on Babel's REPL.

Side note: You've said you want to throw a custom error, but for anyone else reading this who doesn't need a custom error:

If you want someObject.someProperty.someProperty , with no error if someObject is null / undefined but getting an error if someObject.someProperty is null / undefined , you can do:

• If someObject is null or undefined , myValue will get the value undefined
• If someObject is not null or undefined but someObject.someProperty is null or undefined , you'll get an error because we didn't use ?. after the first someProperty .
• If someObject and someObject.someProperty are both not null or undefined , myValue will get the result of looking up someObject.someProperty.someProperty .

• 2 The proposal is not moving forward and it has been a long time... so I would remove the part about it moving forward soon(at the next meeting) –  Yepeekai Commented Dec 2, 2020 at 16:18
• @Yepeekai - Yeah, last presented in 2018, blocked from consensus to move to Stage 3, and meanwhile the reason for that ( do expressions) is still at Stage 1. But at least do expressions were presented at the June 2020 meeting. –  T.J. Crowder Commented Dec 2, 2020 at 16:49

If you're interested in throwing the error within a single line, you could wrap it in an immediately invoked function expression:

const test = null ?? (() => {throw new Error("Test is nullish")})();

• Do you know how to setup prettier so it won't reformat this into multiple lines? –  Dimas Putra Commented Sep 11, 2023 at 7:32

I'm a little late to the party, but I bet this is what you want. I just tossed it in my utils.ts file:

Full disclosure I haven't tested this yet, but, I think this is what you want.

So instead of

I bet that means you can write

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged typescript syntax null null-check or ask your own question .

• The Overflow Blog
• The hidden cost of speed
• The creator of Jenkins discusses CI/CD and balancing business with open source
• Featured on Meta
• Announcing a change to the data-dump process
• Bringing clarity to status tag usage on meta sites
• What does a new user need in a homepage experience on Stack Overflow?
• Feedback requested: How do you use tag hover descriptions for curating and do...
• Staging Ground Reviewer Motivation

Hot Network Questions

• Why is LiCl a hypovalent covalent molecule?
• Text wrapping in longtable not working
• Environment for verbatim boxes
• I'm not quite sure I understand this daily puzzle on Lichess (9/6/24)
• Manhattan distance
• In which town of Europe (Germany ?) were this 2 photos taken during WWII?
• Did Babylon 4 actually do anything in the first shadow war?
• How to align rows within cell in Latex?
• Confusion about time dilation
• Is there a way to read lawyers arguments in various trials?
• Star Trek: The Next Generation episode that talks about life and death
• Where is this railroad track as seen in Rocky II during the training montage?
• When can the cat and mouse meet?
• What is this movie aircraft?
• Best approach to make lasagna fill pan
• Nausea during high altitude cycling climbs
• What is the nature of the relationship between language and thought?
• What would be a good weapon to use with size changing spell
• What's the radius of Mars over Mount Olympus?
• Is there a problem known to have no fastest algorithm, up to polynomials?
• How to run only selected lines of a shell script?
• Replacing jockey wheels on Shimano Deore rear derailleur
• Largest number possible with +, -, ÷
• Are all citizens of Saudi Arabia "considered Muslims by the state"?