How To Avoid If-Else In Typescript

In Typescript, if-else statements can be necessary in certain situations, but they can make your code look cluttered and difficult to read. Luckily, there are several ways to avoid using if-else statements in your Typescript code.

Steps:

1. Use conditional operators

Conditional operators like ternary operators can replace simple if-else statements. For example, instead of writing:

1
2
3
4
5
if (x === 0) {
  y = 1;
} else {
  y = 0;
}

You can write:

1
y = x === 0 ? 1 : 0;

2. Use default parameters

Default parameters can eliminate the need for if-else statements when dealing with optional function parameters. For example, instead of writing:

1
2
3
4
5
6
function greet(name: string) {
  if (name === undefined) {
    name = 'Stranger';
  }
  console.log('Hello, ' + name);
}

You can write:

1
2
3
function greet(name = 'Stranger') {
  console.log('Hello, ' + name);
}

3. Use enums

Enums can replace long if-else statements when dealing with a limited set of options. For example, instead of writing:

1
2
3
4
5
6
7
8
9
10
11
function getColor(name: string) {
  if (name === 'red') {
    return '#FF0000';
  } else if (name === 'green') {
    return '#00FF00';
  } else if (name === 'blue') {
    return '#0000FF';
  } else {
    throw new Error('Invalid color.');
  }
}

You can write:

1
2
3
4
5
6
7
8
9
10
11
12
13
enum Color {
  Red = '#FF0000',
  Green = '#00FF00',
  Blue = '#0000FF'
}
 
function getColor(name: Color) {
  if (name in Color) {
    return Color[name];
  } else {
    throw new Error('Invalid color.');
  }
}

4. Use interfaces and classes

Interfaces and classes can be used to define and enforce rules, making it unnecessary to use if-else statements in certain situations. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
interface Animal {
  name: string;
}
 
class Dog implements Animal {
  name: string;
 
  constructor(name: string) {
    this.name = name;
  }
 
  bark() {
    console.log('Woof!');
  }
}
 
function makeNoise(animal: Animal) {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    console.log('Some other noise.');
  }
}
 
const myDog = new Dog('Rex');
makeNoise(myDog); // Output: 'Woof!'

Conclusion

Using these methods, you can avoid using if-else statements in your Typescript code and make it more readable and easier to maintain.

Full code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// Example using conditional operators
const x = 0;
const y = x === 0 ? 1 : 0;
 
// Example using default parameters
function greet(name = 'Stranger') {
  console.log('Hello, ' + name);
}
greet(); // Output: 'Hello, Stranger'
 
// Example using enums
enum Color {
  Red = '#FF0000',
  Green = '#00FF00',
  Blue = '#0000FF'
}
 
function getColor(name: Color) {
  if (name in Color) {
    return Color[name];
  } else {
    throw new Error('Invalid color.');
  }
}
getColor(Color.Red); // Output: '#FF0000'
 
// Example using interfaces and classes
interface Animal {
  name: string;
}
 
class Dog implements Animal {
  name: string;
 
  constructor(name: string) {
    this.name = name;
  }
 
  bark() {
    console.log('Woof!');
  }
}
 
function makeNoise(animal: Animal) {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    console.log('Some other noise.');
  }
}
 
const myDog = new Dog('Rex');
makeNoise(myDog); // Output: 'Woof!'