with Keyword in Typescript

Do you want to know about Typescript with keyword? In this Typescript tutorial, I will explain to you how to use the with keyword in Typescript with a few examples.

The with keyword in TypeScript, inherited from JavaScript, is not recommended due to its potential to create ambiguous and error-prone code. TypeScript encourages clearer and more maintainable coding practices, such as object destructuring or encapsulation, which offer better alternatives for handling object properties without the drawbacks associated with with.

What is the “with” Keyword in Typescript?

The with statement in JavaScript (and consequently TypeScript, although not recommended) is used to extend the scope chain for a block of statements. It allows you to write shorter code when accessing properties of an object repeatedly.

Syntax of Typescript with Keyword

with (expression) {
  // Statements
}

How to use the Typescript with Keyword?

Now, let us see an example of how to use the “with” keyword in Typescript.

Consider an object person in Typescript like below:

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
};

Without “with” keyword, accessing multiple properties would look like the below code:

console.log(person.firstName);
console.log(person.lastName);
console.log(person.age);

With “with” keyword in Typescript, you can access multiple properties like the below code:

with (person) {
  console.log(firstName);
  console.log(lastName);
  console.log(age);
}

Note: If you run the with code in Typescript in Strict Mode then it will give the error “error TS1101: ‘with’ statements are not allowed in strict mode.”.

You can see the below screenshot.

typescript with keyword

Why to Avoid “with” in TypeScript

Here are a few reasons you should avoid using the” with” keyword in Typescript.

  • Scope Ambiguity: It’s not always clear where a particular variable comes from, leading to confusion and bugs.
  • Performance Concerns: The with statement can hinder optimizations by compilers and engines.
  • Incompatibility with Strict Mode: In strict mode, a common practice in TypeScript, the with statement is not allowed.
  • TypeScript Philosophy: TypeScript aims to improve JavaScript’s clarity and maintainability, and with is contrary to this goal.

Alternatives of “with” in TypeScript

Instead of using with, consider these TypeScript-friendly alternatives:

Destructuring:

Destructuring allows you to unpack properties from objects into distinct variables. Here is an example:

const { firstName, lastName, age } = person;
console.log(firstName);
console.log(lastName);
console.log(age);

Using Shorter References:

If destructuring is not suitable, creating a shorter reference to an object can also reduce verbosity.

Here is an example you can use in Typescript.

const p = person;
console.log(p.firstName);
console.log(p.lastName);
console.log(p.age);

Encapsulation:

Encapsulate behavior within objects or classes, allowing operations on the object without repeatedly referencing its properties.

Here is an example:

class Person {
  firstName: string;
  lastName: string;
  age: number;

  constructor(firstName: string, lastName: string, age: number) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  printDetails() {
    console.log(this.firstName);
    console.log(this.lastName);
    console.log(this.age);
  }
}

const person = new Person('John', 'Doe', 30);
person.printDetails();

Conclusion

While the “with” keyword is a part of JavaScript, it’s not recommended in TypeScript due to its ambiguity and potential issues. TypeScript offers better patterns and practices like destructuring, shorter references, and encapsulation, which align more with the language’s goals of clarity and maintainability.

In this Typescript tutorial, I have explained how to use the with keyword in Typescript, why you should avoid using the “with” keyword, and also what are the alternatives to Typescript with keyword.

You may also like:

>