Day 4 of TypeScript — As a Beginner

Things I’ve learned on day 4…

SriniWhoCodes

3 min readJun 10, 2023

Things I’ve learned today:

Literal Types
Extending Types
Intersection Types (&)

1. Literal Types

Literal types can be used for making your changeable or mutable variables into a non-mutable one.
Literal Types are used for making certain strings or numbers or any types as a variable’s type. Check this example to get a better understanding:
Note: I’ve copy pasted every code example of this blog from the TypeScript official docs😅 which saves me a lot of time.

let x: "hello" = "hello";
// OK
x = "hello";
// ...
x = "howdy"; 
// Type'"howdy"' is not assignable to type '"hello"'.
// '"howdy"' is not assignable to type '"hello"'.

In the above code, you can see that x is having the type of “hello” and got assigned to the value “hello”
This basically means that the variable x can only have the type “hello” and nothing else!
Literal types offer improved type safety by limiting the valid values that can be assigned to a variable or parameter. This helps catch potential bugs and ensures that only the intended values are accepted.
Of course this might seem useless for one variable.
However, think about using this literal type with Union and other types!

function printText(s: string, alignment: "left" | "right" | "center") {
  // ...
}
printText("Hello, world", "left");
printText("G'day, mate", "centre"); /* Error: Argument of type '"centre"' 
is not assignable to the argument of type '"left" | "right" | "center"'.

Check out those arguments’ literal type!
The alignment argument only accepts either of those three values!
Now here’s another example ( but with an interface! ):

interface Options {
  width: number;
}
function configure(x: Options | "auto") {
  // ...
}
configure({ width: 100 });
configure("auto");
configure("automatic"); /* Error: Argument of type '"automatic"' 
is not assignable to the argument of type 'Options | "auto"'. */

2. Extending Types

If you want to mix those properties of an interface with another interface and also want to “add” additional properties, then use the extends keyword. Just like you extend the class in JavaScript.
Below code is an example of mixing two interfaces into one 👇:

interface Colorful {
  color: string;
}
 
interface Circle {
  radius: number;
}
 
interface MixingBoth extends Colorful, Circle {}
 
const cc: MixingBoth = {
  color: "red",
  radius: 42,
};

You can add properties if you want inside the parentheses of the “extended” interface.
Below is an example of adding a property 👇:

interface BasicAddress {
  name?: string;
  street: string;
  city: string;
  country: string;
  postalCode: string;
}
 
interface AddressWithUnit extends BasicAddress {
  unit: string; // new property got inserted here, inside the parentheses.
}

However, you can use this extends just for mixing two or more interfaces and combining them into one.
But it’s not recommended since TypeScript is having Intersection Types for that purpose which I’m gonna cover next!

3. Intersection Types (&)

Intersection types allow you to combine multiple types into one, creating a new type with all the combined features.
On the other hand, extending types with interfaces enables you to inherit and extend the properties and methods of a base interface, creating specialized interfaces and building hierarchies.
Intersection types use the & operator to combine types.

interface Colorful {
  color: string;
}
interface Circle {
  radius: number;
}
 
type ColorfulCircle = Colorful & Circle;

That’s a wrap for today!

I hope that you’ve enjoyed reading my blog. If you did then make sure to give a clap, comment and share this blog with your friends and families who are looking to learn TypeScript specifically!

Love you all and take care.

Ba bye…😁👋

Resources that I’ve used for learning and writing this blog:

Literal Types — https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
Extending and Intersection Types — https://www.typescriptlang.org/docs/handbook/2/objects.html